/* NIR website
   One stylesheet, two skins.
   body.playful  = the homepage: kraft ground, torn paper sheets, real tape, stickers, objects
   body.sincere  = inner pages: flat cream, quieter, the work carries the page
   Every texture is a photograph from the brand deck, in assets/. No frameworks, no build step. */

/* ---------- tokens ---------- */
:root {
  --kraft: #B9976B;
  --paper: #F1ECE1;
  --paper-2: #E9E2D3;
  --paper-dim: #D9D1C0;
  --ink: #23283B;
  --ink-soft: #3C4258;
  --coral: #E4553A;
  --coral-deep: #C9432B;

  /* Rubik is the typeface of the 2026 Playful and Sincere system (Esther's deck). Black for display, SemiBold for labels, Regular/Medium for body. */
  --display: "Rubik", "Arial Black", Impact, sans-serif;
  --sub: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --body: "Rubik", "Helvetica Neue", Arial, sans-serif;

  --shadow: drop-shadow(0 18px 22px rgba(40, 28, 12, .32)) drop-shadow(0 2px 4px rgba(40, 28, 12, .2));
  --shadow-sm: drop-shadow(0 8px 12px rgba(40, 28, 12, .28)) drop-shadow(0 1px 2px rgba(40, 28, 12, .18));
  --max: 1180px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .15  0 0 0 0 .08  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Tape and stickers hang past the edge of the page on purpose. `clip` stops that overflow from widening the
   layout viewport on phones (which `hidden` on body does not), and unlike `hidden` it creates no scroll container,
   so the sticky nav on case pages keeps working. */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
}
body.playful {
  background-color: var(--kraft);
  background-image: url("assets/kraft-tile.webp");
  background-size: 1400px auto;
}
body.sincere {
  background-color: var(--paper);
  background-image: var(--grain);
}
::selection { background: var(--coral); color: var(--paper); }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: min(var(--max), 92vw); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .96;
  margin: 0;
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(46px, 8.6vw, 116px); }
h2 { font-size: clamp(34px, 5.2vw, 68px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; }
.lede { font-size: clamp(19px, 1.7vw, 23px); max-width: 58ch; }
.rule { width: 96px; height: 8px; background: var(--coral); margin: 14px 0 22px; }

/* ---------- small parts ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--sub);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 6px 12px;
  background: var(--paper);
}
.eyebrow.solid { background: var(--ink); color: var(--paper); }
.pill {
  display: inline-block;
  border: 2px solid var(--ink);
  border-radius: 7px;
  padding: 5px 10px;
  font-family: var(--sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pill.solid { background: var(--ink); color: var(--paper); }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display); font-weight: 800;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .04em;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 26px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 0 #0e1120;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(3px); box-shadow: 0 3px 0 #0e1120; }
.btn.coral { background: var(--coral); box-shadow: 0 6px 0 var(--coral-deep); }
.btn.coral:hover { box-shadow: 0 3px 0 var(--coral-deep); }

/* ---------- the paper sheet ----------
   A photographed torn sheet stretched to the panel. Padding keeps text off the ragged edge. */
.paper { position: relative; color: var(--ink); }
.sheet {
  background: url("assets/paper-torn.webp") center / 100% 100% no-repeat;
  filter: var(--shadow);
  padding: clamp(30px, 5vw, 64px) clamp(28px, 5vw, 60px);
}
.sincere .sheet { background: var(--paper); box-shadow: 0 1px 0 var(--paper-dim); filter: none; }

/* real objects, positioned by the section that uses them */
.tape { position: absolute; width: 170px; height: auto; pointer-events: none; z-index: 3; }
.clip { position: absolute; width: 66px; height: auto; top: -32px; left: 44px; z-index: 4; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.clip-right { left: auto; right: 64px; }
.sticker { position: absolute; width: min(300px, 34vw); height: auto; filter: drop-shadow(0 16px 20px rgba(40, 28, 12, .45)); z-index: 5; }


/* ---------- tape on the corners ----------
   Every sheet is stuck to the kraft: two strips of tape on the top corners by default, four with .four
   (add two spans inside). Colour with .t-mint / .t-orange / .t-grey. */
.sheet::before, .sheet::after, .sheet .tape-bl, .sheet .tape-br {
  content: ""; position: absolute; width: 132px; height: 34px; z-index: 6; pointer-events: none;
  background: url("assets/tape-masking.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(40, 28, 12, .25));
}
.sheet::before { left: -34px; top: -6px; transform: rotate(-38deg); }
.sheet::after { right: -34px; top: -6px; transform: rotate(38deg); }
.sheet .tape-bl { left: -34px; bottom: -6px; transform: rotate(38deg); }
.sheet .tape-br { right: -34px; bottom: -6px; transform: rotate(-38deg); }
.sheet.t-mint::before, .sheet.t-mint::after, .sheet.t-mint .tape-bl, .sheet.t-mint .tape-br { background-image: url("assets/tape-mint.webp"); }
.sheet.t-orange::before, .sheet.t-orange::after, .sheet.t-orange .tape-bl, .sheet.t-orange .tape-br { background-image: url("assets/tape-orange.webp"); }
.sheet.t-grey::before, .sheet.t-grey::after, .sheet.t-grey .tape-bl, .sheet.t-grey .tape-br { background-image: url("assets/tape-grey.webp"); height: 30px; }
.sincere .sheet::before, .sincere .sheet::after { display: none; }
.case.sheet::before, .case.sheet::after { width: 100px; height: 26px; }
.person.sheet::before, .person.sheet::after { width: 96px; height: 24px; }
@media (max-width: 820px) { .sheet::before, .sheet::after, .sheet .tape-bl, .sheet .tape-br { width: 96px; height: 24px; } }

/* stickers slapped on sheet corners */
.corner-sticker { position: absolute; width: 150px; height: auto; z-index: 7; filter: drop-shadow(0 10px 14px rgba(40, 28, 12, .4)); pointer-events: none; }
.cs-tr { right: -40px; top: -46px; --tilt: 12deg; transform: rotate(12deg); }
.head-sticker { width: 130px; height: auto; margin-left: auto; --tilt: -10deg; transform: rotate(-10deg); filter: drop-shadow(0 10px 14px rgba(40, 28, 12, .4)); }
@media (max-width: 820px) { .corner-sticker { width: 96px; right: -10px; top: -30px; } .head-sticker { width: 84px; } }


/* ---------- creatures and doodles, slapped on corners and peeking from behind sheets ---------- */
.deco { position: absolute; pointer-events: none; z-index: 0; filter: drop-shadow(0 14px 18px rgba(40, 28, 12, .4)); }
.page .wrap { position: relative; }
.tentacle-film { left: -60px; top: -30px; width: 260px; transform: rotate(-20deg); z-index: 0; }
.puffer { right: -90px; top: -110px; width: 230px; transform: rotate(14deg); z-index: 7; }
.tentacle-work { right: -110px; bottom: -80px; width: 320px; transform: rotate(160deg) scaleX(-1); }
.urchin { left: -110px; bottom: -110px; width: 260px; z-index: 7; }
.barramundi { left: -80px; top: -120px; width: 520px; transform: rotate(-8deg); z-index: 0; }
.cs-bl { left: -46px; bottom: -40px; width: 150px; --tilt: -14deg; transform: rotate(-14deg); }
.cs-br { right: -30px; bottom: -34px; width: 160px; --tilt: 9deg; transform: rotate(9deg); }
.mode .cs-br { width: 130px; right: -22px; bottom: -28px; }
.cs-octo { right: -20px; bottom: -70px; width: 220px; --tilt: -6deg; transform: rotate(-6deg); }
.cs-oyster { left: -40px; top: -50px; width: 140px; --tilt: -12deg; transform: rotate(-12deg); }
.head-sticker.thumbs { margin-left: 0; width: 110px; --tilt: 14deg; transform: rotate(14deg); }
.avatar { position: absolute; right: -16px; top: -30px; width: 92px; height: auto; --tilt: 10deg; transform: rotate(10deg); filter: drop-shadow(0 8px 10px rgba(40, 28, 12, .35)); z-index: 7; }
@media (max-width: 820px) { .deco, .cs-bl, .cs-br, .cs-octo, .cs-oyster, .head-sticker.thumbs { display: none; } .avatar { width: 70px; } }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; padding: 18px 0; }
/* no bar: each part of the nav is its own piece stuck to the page, so they float over whatever scrolls under them */
.playful .nav ul { background: url("assets/paper-torn.webp") center / 100% 100% no-repeat; padding: 8px 16px; filter: var(--shadow-sm); transform: rotate(.4deg); }
.sincere .nav ul, .sincere .logo { background: var(--paper); padding: 6px 12px; box-shadow: 0 8px 18px rgba(40, 28, 12, .18); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.playful .logo {
  background: url("assets/tape-masking.webp") center / 100% 100% no-repeat;
  padding: 14px 28px 14px 20px;
  transform: rotate(-2deg);
  filter: var(--shadow-sm);
}
.logo svg { display: block; }
.nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.nav li a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  font-family: var(--sub);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .1em;
  border-radius: 8px;
}
.nav li a:hover { background: rgba(35, 40, 59, .1); }
.nav .btn { padding: 12px 18px; font-size: 13px; }
.nav-toggle { display: none; }
@media (max-width: 820px) {
  .nav ul, .nav .btn { display: none; }
  .nav-toggle {
    display: inline-block;
    background: var(--ink); color: var(--paper);
    border: 0; border-radius: 8px; padding: 10px 14px;
    font-family: var(--sub); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  }
  .nav.open ul {
    display: grid; position: absolute; left: 4vw; right: 4vw; top: 100%;
    background: var(--paper); box-shadow: 0 18px 40px rgba(40, 28, 12, .3); padding: 10px;
  }
}

/* ---------- scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px) rotate(var(--tilt, 0deg)); }
.js .reveal.in { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in.slap { animation: slap .5s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes slap {
  from { transform: scale(1.35) rotate(calc(var(--tilt, 0deg) - 12deg)); opacity: 0; }
  to   { transform: scale(1) rotate(var(--tilt, 0deg)); opacity: 1; }
}


/* ---------- pages: one scroll, one page ----------
   Every section is a full-height page and the document snaps to page starts.
   On phones the snap relaxes to proximity so tall pages can still be read. */
html:has(body.paged), html.snap { scroll-snap-type: y mandatory; }
.page { min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; align-content: center; position: relative; padding: 96px 0 40px; }
@media (max-width: 820px) { html:has(body.paged), html.snap { scroll-snap-type: y proximity; } .page { padding-top: 84px; } }

/* page dots, right edge */
.dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 55; display: grid; gap: 12px; }
.dots a { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--paper); background: transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: background .2s, transform .2s; }
.dots a.active { background: var(--coral); transform: scale(1.25); }
@media (max-width: 820px) { .dots { display: none; } }

/* nav is fixed over every page; clear over the film, kraft after */
/* nav is fixed over every page, on the same kraft as the ground; the shadow only appears once you leave the film */
.playful .nav.over-film { position: fixed; left: 0; right: 0; }

/* ---------- page 1: the film ----------
   The film is printed on a sheet of paper taped to the kraft. The tagline sits under it. */
.film { padding: 84px 0 0; }
.film .wrap { width: 96vw; }
.film-wrap { display: grid; grid-template-columns: minmax(0, 1fr); height: calc(100svh - 84px); align-content: center; justify-items: center; }
/* the sheet is as wide as a 16:9 frame that fits the height, so the whole picture is always in view */
.film-sheet { padding: 14px; min-width: 0; width: min(100%, calc((100svh - 84px - 48px) * 16 / 9 + 28px)); display: grid; grid-template-columns: minmax(0, 1fr); --tilt: -.4deg; z-index: 1; transform: rotate(-.4deg); }
.film-screen { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; width: 100%; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-grain { position: absolute; inset: 0; background: var(--grain); background-size: 240px; mix-blend-mode: multiply; opacity: .55; pointer-events: none; }
.film-sheet .tape-bl, .film-sheet .tape-br { opacity: .55; }
.film-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 70px 3% 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; min-width: 0; background: linear-gradient(180deg, rgba(20, 16, 10, 0), rgba(20, 16, 10, .72)); }
.film-copy > * { min-width: 0; max-width: 100%; }
.tagline { color: var(--paper); font-size: clamp(26px, 3vw, 44px); line-height: 1; text-shadow: 0 3px 0 rgba(35, 40, 59, .9), 0 10px 22px rgba(0, 0, 0, .25); }
.tagline span { display: inline; margin-right: .35em; }
.tagline span:nth-child(2) { color: var(--coral); }
.scroll-cue { display: inline-flex; align-items: center; gap: 14px; margin: 0; text-decoration: none; color: var(--paper); }
.scroll-cue .pill { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cue-arrow { font-family: var(--display); font-weight: 900; font-size: 22px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.sound {
  position: absolute; top: 18px; right: 18px; z-index: 7;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); color: var(--ink); border: 0; border-radius: 999px; padding: 11px 18px 11px 14px;
  font-family: var(--sub); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3); cursor: pointer; transition: transform .12s, background .15s;
}
.sound:hover { transform: translateY(-1px); }
.sound[aria-pressed="true"] { background: var(--coral); color: var(--paper); }
.sound .wave { opacity: .35; }
.sound[aria-pressed="true"] .wave { opacity: 1; }
.sound[aria-pressed="true"] .slash { display: none; }
@media (max-width: 820px) {
  .film { padding-top: 84px; }
  .film-wrap { height: auto; }
  .film-sheet { padding: 10px; width: 100%; }
  .film-copy { padding: 44px 4% 12px; gap: 10px; }
  .tagline { font-size: clamp(20px, 6.2vw, 30px); }
  .sound { top: 10px; right: 10px; padding: 10px 12px; }
  .sound-label { display: none; }
}
}

/* loops cut from the sizzle, used as taped stills */
.mini-sheet { padding: 12px; --tilt: 2deg; width: min(360px, 100%); }
.mini-screen { display: block; width: 100%; }
.case .img .cover-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- manifesto ---------- */
.manifesto .sheet { max-height: none; }
.manifesto .sheet { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.manifesto .lines { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.2; }
.manifesto .lede { font-size: clamp(16px, 1.3vw, 19px); }
.manifesto .lines em { font-style: normal; color: var(--coral); }
.manifesto .desk { position: relative; min-height: min(380px, 40vh); }
.manifesto .group { position: absolute; margin: 0; width: 92%; left: 0; top: 2%; --tilt: -2.5deg; transform: rotate(-2.5deg); z-index: 2; background: #fff; padding: 10px 10px 12px; box-shadow: 0 14px 22px rgba(40, 28, 12, .35); }
.manifesto .group img { display: block; width: 100%; height: auto; }
.manifesto .group figcaption { font-family: var(--sub); font-weight: 600; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 9px; }
.manifesto .group::before, .manifesto .group::after { content: ""; position: absolute; width: 110px; height: 28px; top: -12px; background: url("assets/tape-masking.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 2px 2px rgba(40, 28, 12, .25)); }
.manifesto .group::before { left: -30px; transform: rotate(-30deg); } .manifesto .group::after { right: -30px; transform: rotate(30deg); }
.manifesto .sheet { padding-bottom: 100px; }
.manifesto .cs-bl { width: 120px; left: -56px; bottom: -36px; }
.manifesto .split { margin-top: 18px; padding-top: 14px; border-top: 3px solid var(--ink); }
.manifesto .tape-2 { width: 150px; left: 48%; top: -10px; transform: rotate(-8deg); z-index: 3; }
.manifesto .crab { position: absolute; width: 38%; right: -9%; bottom: -18%; z-index: 3; --tilt: 8deg; transform: rotate(8deg); filter: drop-shadow(0 16px 18px rgba(40, 28, 12, .4)); }
@media (max-width: 900px) {
  .manifesto .sheet { grid-template-columns: 1fr; }
  .manifesto .desk { min-height: 300px; }
}

/* ---------- approach ---------- */
.approach-head { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin-bottom: 22px; }
.approach .sheet { padding: clamp(22px, 3vw, 40px) clamp(24px, 3.4vw, 48px); }
.approach h2 { font-size: clamp(30px, 4.2vw, 56px); }
.approach header .sheet { --tilt: .6deg; }
@media (max-width: 900px) { .approach-head { grid-template-columns: 1fr; } }
.approach header h2 { margin-top: 16px; }
.approach header .lede { margin: 18px 0 0; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.mode { --tilt: -.8deg; }
.mode:nth-child(2) { --tilt: .9deg; }
.mode .q { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 3.4vw, 48px); text-transform: uppercase; line-height: .9; margin: 18px 0 8px; }
.mode .q i { font-style: normal; color: var(--coral); }
.mode .tag { font-family: var(--sub); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.mode ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mode li { display: flex; gap: 12px; align-items: flex-start; }
.mode li::before { content: "➤"; color: var(--coral); font-size: 14px; margin-top: 4px; }
.scale {
  margin-top: 32px; padding: 26px 40px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: var(--sub); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 13px;
}
.scale .bar { flex: 1 1 200px; height: 12px; border: 2px solid var(--ink); border-radius: 8px; position: relative; background: var(--paper-2); }
.scale .bar::after { content: ""; position: absolute; top: -8px; left: 38%; width: 24px; height: 24px; background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; }
.scale .note { font-family: var(--body); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
@media (max-width: 820px) { .modes { grid-template-columns: 1fr; } }

/* ---------- work ---------- */
.work .head { display: flex; align-items: center; gap: 24px; margin-bottom: 10px; flex-wrap: wrap; }
.work .head h2 { font-size: clamp(30px, 4vw, 52px); }
.work .head h2 { color: var(--paper); text-shadow: 0 3px 0 rgba(40, 28, 12, .35); margin-top: 14px; }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
.case { padding: 14px 14px 16px; text-decoration: none; display: block; transition: transform .18s; }
.case:nth-child(1) { --tilt: -1deg; } .case:nth-child(2) { --tilt: 1deg; } .case:nth-child(3) { --tilt: -.6deg; } .case:nth-child(4) { --tilt: .8deg; } .case:nth-child(5) { --tilt: -1.1deg; } .case:nth-child(6) { --tilt: .6deg; }
.case:hover { transform: translateY(-6px) rotate(var(--tilt, 0deg)); }
.case .img { aspect-ratio: 2 / 1; background: var(--ink); display: grid; place-items: center; color: var(--paper); position: relative; overflow: hidden; }
.case .img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20, 16, 10, .55)); pointer-events: none; }
.case .img .label { font-family: var(--sub); font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: .1em; opacity: .6; text-align: center; padding: 0 20px; position: relative; }
.case .stat { position: absolute; left: 12px; bottom: 10px; font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2vw, 30px); text-shadow: 0 2px 8px rgba(0,0,0,.6); line-height: 1; color: var(--paper); }
.case .stat small { display: block; font-family: var(--sub); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-top: 4px; }
.case h3 { margin: 10px 0 3px; font-size: clamp(16px, 1.3vw, 19px); }
.case p { color: var(--ink-soft); font-size: 13px; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.case .pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.case .pill { font-size: 9px; padding: 3px 7px; }
.case .pill { font-size: 10px; padding: 4px 8px; }
.case.soon::after {
  content: ""; position: absolute; right: -18px; top: -26px; width: 150px; aspect-ratio: 643 / 434;
  background: url("assets/doodle-wip.webp") center / contain no-repeat;
  transform: rotate(8deg); filter: drop-shadow(0 8px 10px rgba(40, 28, 12, .35));
}
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } .case.soon::after { width: 130px; right: -10px; } }


/* ---------- page 3: what we do ---------- */
.services .sheet { --tilt: .4deg; }
.services-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: end; margin-bottom: 22px; }
.services h2 { font-size: clamp(28px, 3.6vw, 48px); margin-top: 12px; }
.services .lede { font-size: clamp(15px, 1.2vw, 17px); margin: 0; }
.service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 18px 0; }
.service-list li b { display: block; font-family: var(--display); font-weight: 900; color: var(--coral); font-size: 22px; margin-bottom: 6px; }
.service-list h3 { font-size: 17px; margin-bottom: 6px; }
.service-list p { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); margin: 0; }
.process { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.process li { position: relative; padding: 10px 12px; font-family: var(--sub); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; background: var(--paper-2); border-radius: 8px; }
.process li b { display: inline-block; margin-right: 8px; color: var(--coral); }
.process li small { display: block; font-family: var(--body); font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 900px) { .services-head { grid-template-columns: 1fr; } .service-list, .process { grid-template-columns: 1fr; } }

/* ---------- page 6: clients ---------- */
.clients .sheet { --tilt: -.4deg; }
.clients-head h2 { margin-top: 12px; font-size: clamp(28px, 3.6vw, 48px); }
.logos { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px 28px; align-items: center; }
.logos li { height: 64px; display: grid; place-items: center; }
.logos img { width: 100%; height: 64px; object-fit: contain; opacity: .92; }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.way { border-top: 3px solid var(--ink); padding-top: 12px; }
.way h3 { font-size: 20px; margin: 8px 0 6px; }
.way p { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(4, 1fr); } .ways { grid-template-columns: 1fr; } }

/* ---------- page 7: team ----------
   Leadership on four sheets with a photo print and a doodle sticker; the crew on seven small sheets.
   Photos are cut-outs from the credentials deck, printed on a paper square. People without a photo yet get a doodle print. */
.team-head { margin-bottom: 38px; }
.team-head h2 { color: var(--paper); text-shadow: 0 3px 0 rgba(40, 28, 12, .35); margin-top: 10px; font-size: clamp(24px, 3vw, 40px); }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.person { padding: 26px 18px 16px; }
.person:nth-child(odd) { --tilt: -1deg; } .person:nth-child(even) { --tilt: 1deg; }
.person-head { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.print {
  flex: 0 0 auto; display: block; width: 78px; aspect-ratio: 1; overflow: hidden;
  background: var(--paper-2) var(--grain); border: 4px solid #fff;
  box-shadow: 0 6px 10px rgba(40, 28, 12, .3); transform: rotate(-3deg);
}
.print img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.print.doodle { background: var(--paper); }
.print.doodle img { object-fit: contain; padding: 6px; }
.person h3 { font-size: 17px; }
.person .role { font-family: var(--sub); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); margin: 4px 0 0; }
.person p { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.people.crew { grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 20px; }
.person.mini { padding: 18px 10px 12px; text-align: center; }
.person.mini .print { width: 62px; margin: 0 auto 10px; }
.person.mini:nth-child(3n) .print { transform: rotate(3deg); }
.person.mini h3 { font-size: 13.5px; }
.person.mini .role { font-size: 9.5px; letter-spacing: .06em; }
.person.mini.sheet::before, .person.mini.sheet::after { width: 70px; height: 18px; left: -22px; top: -4px; }
.person.mini.sheet::after { left: auto; right: -22px; }
.team-note { margin: 16px 0 0; color: var(--paper); font-family: var(--sub); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(40, 28, 12, .35); }
@media (max-width: 900px) { .people { grid-template-columns: 1fr 1fr; } .people.crew { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .people { grid-template-columns: 1fr; } .people.crew { grid-template-columns: repeat(2, 1fr); } .person p { -webkit-line-clamp: 4; } }

/* ---------- values ---------- */

.values .sheet::before {
  content: ""; position: absolute; right: 0; bottom: 0; width: 60%; height: 70%;
  background: url("assets/coffee-stains.webp") right bottom / contain no-repeat;
  opacity: .55; mix-blend-mode: multiply; pointer-events: none;
}
.values h2 { margin-top: 16px; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; position: relative; }
.note { padding: 30px 28px 32px; position: relative; min-height: 220px; aspect-ratio: auto; display: flex; flex-direction: column; justify-content: flex-start; filter: var(--shadow-sm); }
.note.butter { background: url("assets/sticky-cream.webp") center / 100% 100% no-repeat; --tilt: -1.5deg; }
.note.mint { background: url("assets/sticky-teal.webp") center / 100% 100% no-repeat; --tilt: 1deg; }
.note.lilac { background: url("assets/sticky-peach.webp") center / 100% 100% no-repeat; --tilt: -.6deg; }
.note .num { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; margin-bottom: 12px; }
.note h3 { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.note p { font-size: 15px; margin: 0; }
@media (max-width: 820px) { .notes { grid-template-columns: 1fr; } .note { aspect-ratio: auto; } }

/* ---------- contact ---------- */
.contact .sheet { --tilt: -.5deg; min-height: min(520px, 62vh); }
.contact h2 { font-size: clamp(40px, 6vw, 84px); margin-top: 18px; }
.contact .lede { margin-bottom: 0; }
.contact .row { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.contact address { font-style: normal; line-height: 1.6; }
.contact address a { text-decoration: none; }
.contact address b { font-family: var(--display); font-weight: 900; text-transform: uppercase; }
.contact .address b { color: var(--ink); margin-right: 8px; }
.contact .address { margin-top: 22px; line-height: 1.7; max-width: 60%; font-family: var(--sub); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; color: var(--ink-soft); }
.contact .nir-stamp { position: absolute; right: 5%; bottom: 6%; width: min(360px, 34%); --tilt: -3deg; transform: rotate(-3deg); }
@media (max-width: 820px) { .contact .nir-stamp { position: static; width: 60%; margin-top: 28px; } .contact .sheet { min-height: 0; } .contact .address { max-width: none; } }

/* ---------- footer ---------- */
.footer { padding: 28px 0 0; font-family: var(--sub); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.footer a { text-decoration: none; }
.playful .footer { color: var(--paper); }
.sincere .footer { color: var(--ink-soft); padding-top: 40px; border-top: 2px solid var(--paper-dim); margin-top: 40px; }
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; opacity: .9; }

/* ---------- dog-ear to JUO ----------
   A folded page corner, fixed bottom-right. Hover lifts the flap; click goes to juo.sg. */
.dogear { position: fixed; right: 0; bottom: 0; width: 112px; height: 112px; z-index: 60; text-decoration: none; display: block; }
.dogear .under {
  position: absolute; inset: 0; background: var(--ink); color: var(--paper);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px 12px;
  font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
}
.dogear .flap {
  position: absolute; inset: 0;
  background: linear-gradient(225deg, var(--paper) 0 50%, var(--paper-dim) 50%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  filter: drop-shadow(-4px 4px 6px rgba(0, 0, 0, .25));
  transform-origin: 0 0; transition: transform .25s ease;
}
.playful .dogear .flap { background: url("assets/kraft.webp") center / cover; }
.dogear:hover .flap, .dogear:focus-visible .flap { transform: scale(.72); }
.dogear .peek {
  position: absolute; right: 96px; bottom: 28px; width: 300px;
  background: var(--paper); padding: 10px 10px 12px; box-shadow: 0 18px 40px rgba(40, 28, 12, .45);
  transform: rotate(-4deg) translate(24px, 16px) scale(.92); transform-origin: 100% 100%;
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .28s cubic-bezier(.2, .7, .2, 1);
}
.dogear .peek img { display: block; width: 100%; height: auto; }
.dogear .peek b { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--sub); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.dogear .peek b i { font-style: normal; color: var(--coral); }
.dogear:hover .peek, .dogear:focus-visible .peek { opacity: 1; transform: rotate(-4deg) translate(0, 0) scale(1); }
@media (max-width: 820px) { .dogear { width: 72px; height: 72px; } .dogear .under { font-size: 12px; padding: 8px 9px; } .dogear .peek { display: none; } }

/* ---------- sincere skin: case pages ---------- */
.sincere main { position: relative; }
.sincere .case-head { padding: 40px 0 30px; }
.sincere .case-head .meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.sincere .case-head h1 { font-size: clamp(40px, 7vw, 96px); }
.sincere .case-head .lede { margin-top: 22px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0 10px; }
.stat-tile { border-top: 4px solid var(--ink); padding-top: 14px; }
.stat-tile b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 4.6vw, 64px); line-height: 1; }
.stat-tile span { font-family: var(--sub); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; } }
.frame {
  aspect-ratio: 16 / 9; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; margin: 40px 0;
  font-family: var(--sub); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px;
  position: relative; overflow: hidden;
}
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(26px, 3vw, 40px); margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 10px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0; }
.gallery .frame { aspect-ratio: 4 / 5; margin: 0; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }
.next { margin: 60px 0 40px; padding: 28px 0; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.next a { text-decoration: none; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(20px, 2.6vw, 32px); }
.next a:hover { color: var(--coral); }
.next small { font-family: var(--sub); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 4px; }
.sincere .bob-corner { position: fixed; left: 18px; bottom: 14px; width: 54px; height: 54px; color: var(--ink); opacity: .85; z-index: 40; }
@media (max-width: 700px) { .sincere .bob-corner { display: none; } }

/* ---------- motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue-arrow { animation: none; }
  .js .reveal { opacity: 1; transform: rotate(var(--tilt, 0deg)); transition: none; }
  .js .reveal.in.slap { animation: none; }
  .dogear .flap, .dogear .peek { transition: none; }
}

/* ---------- alternate homepage: playfully sincere ----------
   playfully-sincere.html. Same eight pages and the same markup as index.html, the sincere skin first:
   cream ground, ink rules, big type on the page itself. The play is kept to the fish, the coral, the tilted
   photo prints, the one sticker on the manifesto and the sizzle. Nothing here touches the playful homepage. */
.sincere.home .nav { position: fixed; left: 0; right: 0; }
.sincere.home .sheet, .sincere.home .film-sheet { background: transparent; box-shadow: none; filter: none; padding: 0; }
.sincere.home .reveal, .sincere.home .sheet { --tilt: 0deg; }
.sincere.home .sheet .tape-bl, .sincere.home .sheet .tape-br, .sincere.home .deco, .sincere.home .corner-sticker, .sincere.home .avatar,
.sincere.home .head-sticker, .sincere.home .clip, .sincere.home .crab, .sincere.home .case.soon::after, .sincere.home .contact .nir-stamp,
.sincere.home .film-grain, .sincere.home .values .sheet::before { display: none; }
.sincere.home .manifesto .cs-tr { display: block; width: 120px; right: -10px; top: -60px; }
.sincere.home .page:not(.film) > .wrap { border-top: 4px solid var(--ink); padding-top: 26px; }
.sincere.home .film-sheet { transform: none; }
.sincere.home .film-screen { outline: 4px solid var(--ink); }
.sincere.home .team-head h2, .sincere.home .work .head h2 { color: var(--ink); text-shadow: none; }
.sincere.home .team-note, .sincere.home .footer { color: var(--ink-soft); text-shadow: none; }
.sincere.home .dots a { border-color: var(--ink); }
.sincere.home .person, .sincere.home .case, .sincere.home .mode, .sincere.home .approach header .sheet, .sincere.home .scale { border: 3px solid var(--ink); background: var(--paper); }
.sincere.home .person { padding: 22px 18px 16px; }
.sincere.home .person.mini { padding: 16px 10px 12px; }
.sincere.home .case { padding: 10px 10px 14px; }
.sincere.home .mode, .sincere.home .approach header .sheet { padding: clamp(22px, 3vw, 36px); }
.sincere.home .mini-sheet { border: 4px solid var(--ink); padding: 0; transform: none; }
.sincere.home .manifesto .group { transform: rotate(-1.5deg); }
.sincere.home .contact .sheet { min-height: 0; }
.sincere.home .contact .address { max-width: none; }