/* =====================================================================
   YuliBoda Studio — shared styles for every page of the site.
   Page structure, design rules and conventions are documented in CLAUDE.md.
   ===================================================================== */

:root {
  --paper: #f5f0e8;
  --paper-2: #ece4d6;
  --ink: #1d1a17;
  --ink-soft: #5b544c;
  --line: #d8cebf;
  --accent: #1f4bff;
  --accent-ink: #ffffff;
  --tile-1: #f2b84b;
  --tile-2: #7fa7c9;
  --tile-3: #d97a7a;
  --radius: 18px;
  --max: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Pixel-art cursors, embedded so they work wherever the page is opened (originals in media/) */
html {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAkCAYAAACTz/ouAAAAf0lEQVR42s3WwQnAMAgF0KzgKt1/t5YeCiGkiUb9fsGrDw1Em4jcb7asgAFpEAz4IhyCA+FQGRAGlQNuiAY4hugAM0QLqCF6YAvRAONi2mU9oPjGL1XCgbGAeyHBgL/WDaMqBiYPFHMcpANdLFt1jwoBnB7Ly9HyAZORhhc2AQ850yyVUGlH9wAAAABJRU5ErkJggg==") 1 1, auto;
  cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAkCAYAAACTz/ouAAAAf0lEQVR42s3WwQnAMAgF0KzgKt1/t5YeCiGkiUb9fsGrDw1Em4jcb7asgAFpEAz4IhyCA+FQGRAGlQNuiAY4hugAM0QLqCF6YAvRAONi2mU9oPjGL1XCgbGAeyHBgL/WDaMqBiYPFHMcpANdLFt1jwoBnB7Ly9HyAZORhhc2AQ850yyVUGlH9wAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABICAYAAACwc3YrAAAAsklEQVR42u3asQnEMAwF0KzgVbL/bnftkSIOWIrk4xnU6xWSwd/HGOPzW8duBwAgGLAdCAAgGHA97UEAAMmA9iAAgJcB7UAAAMWAchAAQDPA6yAAgOaAdBAAwGaAcBAAwOaAZRAAQDPALDBZLQCAakDAY/AZWgAAyYBZA+UBCQBA/meP2yFKGGoAgFLAg8ujV3AOABCfHywNVflQAwCsA1IzuOilAQDQHfBgSbRvGOCvAV9g2rJRd1zSiAAAAABJRU5ErkJggg==") 2x) 1 1, auto;
  cursor: image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAkCAYAAACTz/ouAAAAf0lEQVR42s3WwQnAMAgF0KzgKt1/t5YeCiGkiUb9fsGrDw1Em4jcb7asgAFpEAz4IhyCA+FQGRAGlQNuiAY4hugAM0QLqCF6YAvRAONi2mU9oPjGL1XCgbGAeyHBgL/WDaMqBiYPFHMcpANdLFt1jwoBnB7Ly9HyAZORhhc2AQ850yyVUGlH9wAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABICAYAAACwc3YrAAAAsklEQVR42u3asQnEMAwF0KzgVbL/bnftkSIOWIrk4xnU6xWSwd/HGOPzW8duBwAgGLAdCAAgGHA97UEAAMmA9iAAgJcB7UAAAMWAchAAQDPA6yAAgOaAdBAAwGaAcBAAwOaAZRAAQDPALDBZLQCAakDAY/AZWgAAyYBZA+UBCQBA/meP2yFKGGoAgFLAg8ujV3AOABCfHywNVflQAwCsA1IzuOilAQDQHfBgSbRvGOCvAV9g2rJRd1zSiAAAAABJRU5ErkJggg==") 2x) 1 1, auto;
}
a, button, [role="button"], label, summary, .btn, .envelope, .focus-icon, .notice-head, .noticed, .clapper, .quote, .sm-screen video {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAqCAYAAADS4VmSAAAApklEQVR42u3XUQqAMAgA0F1hV+n+dyuCBRWamToVE/zZwj1sG6y1Eb33dc+GhHSeDHcAVeg0vozEvr/M5wO8KMQdDw44Wqi2ibh13QFAC8FNJgCCdUMCwBbeQ/tXpQaon/sfkAtgdYHlAZjD0gIoWF0A+yqfDsA2kXagF5kbgNvSOgCriAegjl0dwCxIXQCwcFCANoS9cDiAVn5+nLoBHp7X0owF2ADanpRSUOHeJQAAAABJRU5ErkJggg==") 10 9, pointer;
  cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAqCAYAAADS4VmSAAAApklEQVR42u3XUQqAMAgA0F1hV+n+dyuCBRWamToVE/zZwj1sG6y1Eb33dc+GhHSeDHcAVeg0vozEvr/M5wO8KMQdDw44Wqi2ibh13QFAC8FNJgCCdUMCwBbeQ/tXpQaon/sfkAtgdYHlAZjD0gIoWF0A+yqfDsA2kXagF5kbgNvSOgCriAegjl0dwCxIXQCwcFCANoS9cDiAVn5+nLoBHp7X0owF2ADanpRSUOHeJQAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABUCAYAAAAyLjFTAAAA9UlEQVR42u3bQQ6DIBAFUK7AVbz/3dptY2zrBEFk3k/YgcG3mIyopexSa319jhLM3eubAwBAcoDWDR3M33Yjev2f6wEAADA80Q31ng8AAIALi9x0jUjv/QIAkBzgRBEKNTI3AIb2CwAAgGuL0L/MXlQBAAAwHGD6pz0AAAAAAAAAQB+Apx3AAAAA4FqAx4MBAABgKEArGAAAAHIBdD+UBQBgcYBoIzJ7wgcyAAAkA+hdpAAAALAWwNMCAACAtkYIAAAAuQBWAwEAAEAugBM3DAAAgIbvFGcD6X7DAAAAaHpxMnqU0T9OAgCQDOAg2+QDAAAA3/MGHHBRY9WUaMoAAAAASUVORK5CYII=") 2x) 10 9, pointer;
  cursor: image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAqCAYAAADS4VmSAAAApklEQVR42u3XUQqAMAgA0F1hV+n+dyuCBRWamToVE/zZwj1sG6y1Eb33dc+GhHSeDHcAVeg0vozEvr/M5wO8KMQdDw44Wqi2ibh13QFAC8FNJgCCdUMCwBbeQ/tXpQaon/sfkAtgdYHlAZjD0gIoWF0A+yqfDsA2kXagF5kbgNvSOgCriAegjl0dwCxIXQCwcFCANoS9cDiAVn5+nLoBHp7X0owF2ADanpRSUOHeJQAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABUCAYAAAAyLjFTAAAA9UlEQVR42u3bQQ6DIBAFUK7AVbz/3dptY2zrBEFk3k/YgcG3mIyopexSa319jhLM3eubAwBAcoDWDR3M33Yjev2f6wEAADA80Q31ng8AAIALi9x0jUjv/QIAkBzgRBEKNTI3AIb2CwAAgGuL0L/MXlQBAAAwHGD6pz0AAAAAAAAAQB+Apx3AAAAA4FqAx4MBAABgKEArGAAAAHIBdD+UBQBgcYBoIzJ7wgcyAAAkA+hdpAAAALAWwNMCAACAtkYIAAAAuQBWAwEAAEAugBM3DAAAgIbvFGcD6X7DAAAAaHpxMnqU0T9OAgCQDOAg2+QDAAAA3/MGHHBRY9WUaMoAAAAASUVORK5CYII=") 2x) 10 9, pointer;
}
/* Wrinkled-paper texture behind the page; sections with their own background (case studies onward) cover it */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("media/paper.webp") center / cover no-repeat;
  mix-blend-mode: multiply; opacity: .7;
}
#testimonials { background: var(--paper); }
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.logo {
  font-family: var(--serif); font-weight: 600; font-size: 22px;
  text-decoration: none; letter-spacing: -0.01em;
}
.logo span { color: var(--accent); }
.nav { display: flex; gap: 28px; font-size: 15px; font-weight: 700; }
.nav a { --r: 0deg; display: inline-block; text-decoration: none; color: var(--ink-soft); }
.nav a:hover { color: var(--ink); animation: jelly-hit .7s ease-out; }
.nav .nav-cta { color: var(--accent); }
@media (max-width: 720px) { .nav a, .nav .nav-drop { display: none; } }
/* "Services" opens a small list of the service pages (header on computers/tablets, and inside the phone menu) */
.nav-drop { position: relative; }
.nav-drop-btn {
  --r: 0deg; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 700; color: var(--ink-soft); touch-action: manipulation;
}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { color: var(--ink); }
.nav-drop-btn:hover { animation: jelly-hit .7s ease-out; }
.nav-caret {                                           /* little pixel arrow pointing down (flips up when open) */
  width: 2px; height: 2px; margin: 0 6px 2px 0; background: currentColor;
  box-shadow: 6px 0 currentColor, 2px 2px currentColor, 4px 2px currentColor;
}
.nav-drop-btn[aria-expanded="true"] .nav-caret { transform: translate(0, 2px) scaleY(-1); }
.nav-sub {
  position: absolute; z-index: 20; top: calc(100% + 16px); left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; padding: 8px 0; background: #fff;
  box-shadow:
    0 -3px 0 #111, 0 3px 0 #111, -3px 0 0 #111, 3px 0 0 #111,
    3px 6px 0 rgba(0,0,0,.18), 6px 3px 0 rgba(0,0,0,.18), 6px 6px 0 rgba(0,0,0,.18);
  animation: sub-drop .2s steps(4) both;
}
@keyframes sub-drop { from { clip-path: inset(-12px -12px 100% -12px); } to { clip-path: inset(-12px); } }   /* room for the pixel border */
.nav-sub[hidden] { display: none; }
.nav .nav-sub a { padding: 10px 20px; color: var(--ink); white-space: nowrap; }
.nav .nav-sub a[aria-current="page"], .nav-menu .nav-sub a[aria-current="page"] { color: var(--accent); }   /* the page you're on */
/* phones: only a pixel menu button; it drops down a list of every link, Contact included (built by site.js) */
.nav { align-items: center; }
.nav .nav-toggle { display: none; position: relative; width: 40px; height: 40px; margin-right: 4px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }   /* .nav: beats the pixel-button style */
.nav-toggle::before { content: ""; position: absolute; inset: -10px; }   /* a bigger, easier tap area around the button */
.nav-toggle svg { pointer-events: none; }
.nav-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column; padding: 6px var(--gutter) 18px;
  background: var(--paper); border-bottom: 1px solid rgba(29,26,23,.12);
  box-shadow: 0 18px 30px -18px rgba(29,26,23,.35);
  animation: menu-drop .24s steps(4) both;            /* drops open in little stop-motion steps */
}
.nav-menu[hidden] { display: none; }
.nav-menu a {
  padding: 16px 0; border-top: 1px dashed rgba(29,26,23,.18);
  font: 400 18px/1.1 "Silkscreen", monospace; letter-spacing: .04em; text-transform: uppercase;   /* pixel text, like the menu button */
  text-decoration: none; color: var(--ink);
}
.nav-menu a:first-child { border-top: 0; }
.nav-menu a.nav-cta { color: var(--accent); }
/* phone menu: "Services" row with its pixel arrow; its three pages open underneath, a bit smaller and indented */
.nav-menu .nav-drop { border-top: 0; }
.nav-menu .nav-drop-btn {
  width: 100%; padding: 16px 0; justify-content: flex-start; gap: 12px; color: var(--ink);
  font: 400 18px/1.1 "Silkscreen", monospace; letter-spacing: .04em; text-transform: uppercase;
}
.nav-menu .nav-sub { position: static; translate: none; padding: 0 0 10px 20px; background: none; box-shadow: none; }
.nav-menu .nav-sub a { padding: 11px 0; border-top: 0; font-size: 14px; color: var(--ink-soft); }
@keyframes menu-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 720px) { .nav .nav-toggle { display: inline-flex; } }
@media (min-width: 721px) { .nav-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nav-menu, .nav-sub { animation: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  font-weight: 500; font-size: 16px; text-decoration: none;
  border: 1.5px solid var(--ink);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 8vw, 100px) 0 clamp(64px, 9vw, 110px); position: relative; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 1.02; letter-spacing: -0.045em;
  margin: 0 0 32px; max-width: 13ch;
}
.hero h1 em, .hero h1 .dot { font-style: normal; color: var(--accent); }
.hero h1 .dot { font-size: .7em; }
.hero-lede { font-size: clamp(19px, 2vw, 23px); max-width: 640px; margin: 0 0 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Scrapbook words: each word is a hand-cut scrap of paper with marker lettering, glued on at a slight angle */
.blobs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 4px 0 40px; }
.blob {
  --r: 0deg;
  position: relative; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 8px 10px;
  transform: rotate(var(--r));
  transform-origin: 50% 80%;
  animation: jelly 5.5s ease-in-out infinite;
  user-select: none;
  filter: drop-shadow(0 0 .6px rgba(29,26,23,.45)) drop-shadow(0 4px 5px rgba(29,26,23,.18));   /* cut edge + lift, following the clipped shape */
}
.cut {
  display: inline-block; padding: .26em .7em .18em; white-space: nowrap;
  font-family: "Gochi Hand", cursive; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15;
  text-transform: uppercase; letter-spacing: .07em; color: #1d1a17;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.7), transparent 60%),
    #f6f2e9;
  clip-path: var(--shape);
  transform: rotate(var(--t, 0deg));
}
.scrap-star {
  width: 30px; height: 30px; flex: none; overflow: visible;
  filter: url(#foil) drop-shadow(0 2px 2px rgba(90, 55, 0, .3));
  transform: rotate(var(--t, 0deg));
}
.blob.b1 { --r: -2deg; animation-delay: 0s; }
.blob.b2 { --r: 1.5deg; animation-delay: -1.8s; margin-left: min(84px, 18vw); }
.blob.b3 { --r: -1deg; animation-delay: -3.5s; }
.blob.b4 { --r: 1deg; animation-delay: -4.6s; margin-left: min(48px, 12vw); }
@media (max-width: 480px) { .blob { flex-wrap: wrap; } .cut { white-space: normal; } }
.blob:hover { animation: jelly-hit .7s ease-out; }
@keyframes jelly {
  0%, 100% { transform: translateY(0)    rotate(var(--r)) scale(1, 1); }
  18%      { transform: translateY(-3px) rotate(var(--r)) scale(1.025, .975); }
  34%      { transform: translateY(-5px) rotate(var(--r)) scale(.98, 1.02); }
  50%      { transform: translateY(-2px) rotate(var(--r)) scale(1.012, .988); }
  66%      { transform: translateY(1px)  rotate(var(--r)) scale(.993, 1.007); }
  82%      { transform: translateY(0)    rotate(var(--r)) scale(1.004, .996); }
}
@keyframes jelly-hit {
  0%   { transform: rotate(var(--r)) scale(1, 1); }
  25%  { transform: rotate(var(--r)) scale(1.18, .82); }
  45%  { transform: rotate(var(--r)) scale(.88, 1.12); }
  65%  { transform: rotate(var(--r)) scale(1.06, .94); }
  85%  { transform: rotate(var(--r)) scale(.98, 1.02); }
  100% { transform: rotate(var(--r)) scale(1, 1); }
}

/* hero content sits above the polaroid stars when they fall */
main { position: relative; }
.hero .wrap { position: relative; z-index: 1; }

/* Showreel in a polaroid with star stickers */
.reel { position: relative; justify-self: end; margin-right: 8px; width: min(80%, 416px); transform: rotate(7deg); }
.polaroid {
  position: relative;
  padding: 7% 7% 24%;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 5px),
    #f3f2ee;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 2px 4px rgba(29,26,23,.08),
    0 24px 50px -18px rgba(29,26,23,.35);
  transform: rotate(-3deg);
  animation: reel-float 6s ease-in-out infinite;
}
.polaroid video {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #111;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
@keyframes reel-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-1.5deg) translateY(-14px); }
}

/* gold foil star stickers */
.star {
  position: absolute; z-index: 2; width: var(--s, 13%); aspect-ratio: 1;
  filter: url(#foil) drop-shadow(0 2px 2px rgba(90, 55, 0, .35));
  pointer-events: none;
}
.star svg {
  width: 100%; height: 100%; display: block; overflow: visible;
  transform: rotate(var(--r, 0deg));
  animation: star-wiggle 1.2s steps(1) infinite; animation-delay: inherit;
}
.star.st1 { --s: 16%; --r: 12deg;  top: -4%;  right: 12%; animation-delay: -.2s; }
.star.st2 { --s: 11%; --r: -10deg; top: 17%;  left: 3%;   animation-delay: -.5s; }
.star.st3 { --s: 16%; --r: 6deg;   top: 33%;  left: -8%;  animation-delay: -.9s; }
.star.st4 { --s: 16%; --r: -14deg; top: 66%;  right: -7%; animation-delay: -.3s; }
.star.st5 { --s: 14%; --r: 8deg;   bottom: 3%; left: 30%; animation-delay: -.7s; }
@keyframes star-wiggle {
  0%   { transform: rotate(var(--r)); }
  33%  { transform: rotate(calc(var(--r) + 4deg)); }
  66%  { transform: rotate(calc(var(--r) - 3deg)); }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .reel { justify-self: center; margin-right: 0; width: min(70%, 300px); margin-top: 40px; margin-bottom: 30px; transform: rotate(7deg); }
}

/* ---------- Section basics ---------- */
/* videos never show the browser's own play symbol (iPhone Safari adds one when it holds back a video that should
   start by itself, e.g. in Low Power Mode): every video here has its own buttons, or none */
video::-webkit-media-controls, video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
/* words for search engines and screen readers only (not shown on the page) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* line breaks for one screen size only: <br class="br-phone"> breaks only on phones, <br class="br-desk"> only above */
@media (min-width: 601px) { .br-phone { display: none; } }
.nowrap { white-space: nowrap; }   /* keep words like "3-in-1" together */
@media (max-width: 600px) { .br-desk { display: none; } }
section { scroll-margin-top: 72px; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 16px;
}
.h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: -0.045em;
  margin: 0 0 20px;
}
.section-intro { color: var(--ink-soft); max-width: 560px; margin: 0; }

/* ---------- Services: sticky "noticed." with cards scrolling past ---------- */
.services {
  --fs: clamp(44px, 6.2vw, 88px);         /* heading size */
  --stick: 15vh;                          /* where the heading sticks */
  position: relative; padding-bottom: 18vh;
}
.services .eyebrow { text-align: center; }

/* layer holding the two sticky pieces; spans the whole section */
.notice-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.notice-head {
  position: sticky; top: var(--stick);
  margin: 0; text-align: center;
  font-family: var(--sans); font-weight: 700;
  font-size: var(--fs); line-height: 1; letter-spacing: -0.045em;
  /* --p (0 → 1, set by JS on scroll) wipes the heading away from the bottom up */
  padding-bottom: .12em;                 /* room for descenders like the "g" */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--p, 0) * 130%), transparent calc(130% - var(--p, 0) * 130%));
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--p, 0) * 130%), transparent calc(130% - var(--p, 0) * 130%));
}
.notice-head .line { display: block; }
.notice-head .l2 { display: grid; grid-template-columns: 1fr 1fr; }
.notice-head .line span:first-child { text-align: right; }
.notice-head .line span:last-child  { text-align: left; }
.notice-head .l2 { column-gap: 2.6em; color: #2a2622; }
.notice-center {
  position: sticky; top: calc(var(--stick) + 2.12 * var(--fs) + 8px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 8px;
}
.focus-icon { width: calc(var(--fs) * 1.6); height: auto; color: var(--ink); pointer-events: auto; }
.notice-head, .noticed { pointer-events: auto; }
.focus-icon .arrows { transform-origin: 50px 50px; animation: focus-pulse 1.8s ease-in-out infinite; }
@keyframes focus-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.86); } }
.focus-dot { transform-box: fill-box; transform-origin: center; }
.focus-icon.gulp .focus-dot { animation: gulp .5s steps(5) both; }
@keyframes gulp { 0% { transform: scale(1); } 30% { transform: scale(2.4); } 60% { transform: scale(.7); } 100% { transform: scale(1); } }
.noticed {
  font-family: var(--sans); font-weight: 700; color: var(--accent);
  font-size: calc(var(--fs) * 1.08); line-height: 1; letter-spacing: -0.045em;
}

/* cards: zigzag right / left / right, leaving the middle free for "noticed." */
.svc-cols {
  position: relative; z-index: 2; pointer-events: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px;
}
.svc-card { pointer-events: auto; }
.svc-col.left  { grid-column: 1; padding-top: calc(2 * var(--fs) + 52vh); }
.svc-col.right { grid-column: 3; padding-top: calc(2 * var(--fs) + 40px); }
.svc-col.right .svc-card + .svc-card { margin-top: 42vh; }
.svc-card { position: relative; }
.svc-num { position: absolute; left: -26px; top: 0; font-size: 12px; color: var(--ink-soft); }
.svc-media {
  --tilt: -2deg;
  position: relative; margin: 0 0 26px;
  padding: 6% 6% 0;
  container-type: inline-size;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 5px),
    #f3f2ee;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 22px 44px -18px rgba(29,26,23,.35);
  transform: rotate(var(--tilt));
  animation: svc-float 6s ease-in-out infinite;
}
.svc-media video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #111; }
/* handwritten caption, "written" letter by letter on hover */
.svc-caption {
  aspect-ratio: 88 / 18;                  /* the polaroid's bottom strip */
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: "Annie Use Your Telescope", cursive; font-weight: 400; color: #1e2a5e;
  font-size: 22px; font-size: 7.4cqw; line-height: 1.05;
  transform: rotate(-1.5deg); transition: opacity .25s;
}
.svc-caption.erase { opacity: 0; }
.svc-caption .ch { display: inline-block; clip-path: inset(0 100% 0 0); animation: ink .12s linear forwards; }
@keyframes ink { to { clip-path: inset(0 0 0 0); } }
.c1 .svc-media { --tilt: 2.5deg; }
.c2 .svc-media { --tilt: -3deg; animation-delay: -2s; }
.c3 .svc-media { --tilt: 1.5deg; animation-delay: -4s; }
@keyframes svc-float {
  0%, 100% { transform: rotate(var(--tilt)) translateY(0); }
  50%      { transform: rotate(calc(var(--tilt) + 1deg)) translateY(-10px); }
}
.svc-card h3 { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }
.svc-card p { font-size: 19px; line-height: 1.45; margin: 0 0 12px; }
.svc-card p b { font-weight: 700; }
.svc-btn { margin-top: 8px; padding: 13px 26px; font-weight: 700; }

@media (max-width: 860px) {
  .services { padding-bottom: clamp(64px, 9vw, 120px); }
  .notice-layer { position: static; text-align: center; margin-bottom: 40px; }
  .notice-head, .notice-center { position: static; -webkit-mask-image: none; mask-image: none; }
  .notice-head .l2 { column-gap: .3em; }
  .svc-cols { grid-template-columns: 1fr; gap: 56px; }
  .svc-col.left, .svc-col.right { grid-column: 1; padding-top: 0; }
  .svc-col.right .svc-card + .svc-card { margin-top: 56px; }
  .svc-cols { display: flex; flex-direction: column; }
  .svc-col { display: contents; }
  .svc-card.c1 { order: 1; } .svc-card.c2 { order: 2; } .svc-card.c3 { order: 3; }
  .svc-num { position: static; display: block; margin-bottom: 6px; }
  .svc-media { width: 86%; margin-left: auto; margin-right: auto; }
  .svc-card { width: 100%; max-width: 520px; align-self: center; }   /* tablets: don't let polaroids fill the screen */
}

/* Pixel 👀 that pop up around the screen while the focus icon is hovered */
.eyes-layer { position: absolute; top: 0; left: 0; width: 100%; z-index: 5; pointer-events: none; overflow: hidden; }
.eyes-pair {
  position: absolute; display: block; shape-rendering: crispEdges;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.14));
  animation: eyes-in .3s steps(3) both;
}
.eyes-pair.out { animation: eyes-out .2s steps(2) forwards; }
.eyes-pair .lids { transform-box: fill-box; transform-origin: center; animation: eyes-blink 3.4s steps(1) infinite; animation-delay: inherit; }
@keyframes eyes-in  { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes eyes-out { to { transform: scale(0); } }
@keyframes eyes-blink { 0%, 93%, 100% { transform: none; } 95% { transform: scaleY(.12); } }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.portrait {
  aspect-ratio: 4 / 5; border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.035) 14px 28px),
    var(--paper-2);
  border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-soft); font-size: 14px;
  position: relative; overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; position: absolute; inset: 0; }
.about-text p { margin: 0 0 20px; }
.about-text .lead { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; }
/* floating clapperboard on the photo's top-left corner */
.portrait-wrap { position: relative; }
/* desktop: start the photo level with "I'm Yuliya…" rather than with the small label above it */
@media (min-width: 861px) { .portrait-wrap { margin-top: calc(13px * 1.6 + 16px + 8px); } }
.clapper {
  position: absolute; left: -48px; top: -58px; z-index: 2;
  width: clamp(120px, 12vw, 170px); padding: 0; border: 0; background: none;
  transform: rotate(-6deg);
  animation: clap-float 5s ease-in-out infinite;
  filter: drop-shadow(0 12px 14px rgba(29, 26, 23, .28));
}
.clapper svg { display: block; width: 100%; height: auto; overflow: visible; }
.clapper:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
@media (min-width: 861px) and (max-width: 1240px) { .clapper { left: -14px; } }   /* narrower desktops/landscape tablets: keep it on screen */
@keyframes clap-float {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-5deg) translateY(-10px); }
}
.clap-arm { transform-box: view-box; transform-origin: 14px 58px; transform: rotate(-17deg); }
/* click: snap shut, a tiny bounce, then open again slowly */
.clapper.clap .clap-arm { animation: clap-arm 2.2s forwards; }
.clapper.clap .clap-board { transform-box: view-box; transform-origin: 50% 100%; animation: clap-jolt .3s .14s; }
@keyframes clap-arm {
  0%   { transform: rotate(-17deg); animation-timing-function: cubic-bezier(.6, 0, 1, 1); }
  7%   { transform: rotate(0deg); animation-timing-function: ease-out; }
  11%  { transform: rotate(-2.5deg); animation-timing-function: ease-in; }
  15%  { transform: rotate(0deg); }
  30%  { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  100% { transform: rotate(-17deg); }
}
@keyframes clap-jolt { 0%, 100% { transform: none; } 40% { transform: translateY(2px) scale(1.01, .98); } }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .portrait-wrap { max-width: 420px; }
  .clapper { left: 6px; top: -42px; width: 112px; }
}

/* ---------- Projects ---------- */
.work { background: #d4d0c8; }                 /* light grey of old computer windows (same as "Best suited for") */
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* dashed selection frame (like a design tool) with a resize handle and a cursor grabbing it */
.select-frame {
  --ink-dash: #3a3631;
  position: relative; padding: clamp(20px, 3.5vw, 44px);
  background:
    linear-gradient(90deg, var(--ink-dash) 55%, transparent 0) top    left / 24px 1.5px repeat-x,
    linear-gradient(90deg, var(--ink-dash) 55%, transparent 0) bottom left / 24px 1.5px repeat-x,
    linear-gradient(0deg,  var(--ink-dash) 55%, transparent 0) top left  / 1.5px 24px repeat-y,
    linear-gradient(0deg,  var(--ink-dash) 55%, transparent 0) top right / 1.5px 24px repeat-y;
}
.sf-handle {
  position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px;
  background: #7a7570; border: 1.5px solid var(--ink-dash);
}
.sf-cursor {
  position: absolute; right: -40px; bottom: -52px; width: 36px; height: auto;
  image-rendering: pixelated; pointer-events: none;
}
@media (max-width: 900px) { .sf-cursor { right: -10px; bottom: -50px; width: 30px; } }
.project { text-decoration: none; display: flex; flex-direction: column; }
/* case study images sit in polaroid frames, each with its own tilt; hovering straightens and lifts it */
.project-media {
  --tilt: -2deg;
  position: relative; margin: 6px 6px 24px;
  padding: 6% 6% 18%;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 5px),
    #f3f2ee;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 22px 44px -18px rgba(29,26,23,.35);
  transform: rotate(var(--tilt));
  transition: transform .35s ease, box-shadow .35s ease;
}
.project { min-width: 0; isolation: isolate; }        /* each card is its own layer */
.project a { color: inherit; text-decoration: none; }
.project-photo { display: block; }
.project-media.tilt-1 { --tilt: 0deg; }
.project-media.tilt-2 { --tilt: 2deg; }
.project-media.tilt-3 { --tilt: -1.2deg; }
.project-media:hover, .project:focus-within .project-media {
  transform: rotate(0deg) translateY(-8px);
  box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 30px 50px -18px rgba(29,26,23,.4);
}
.project-media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #111; }
.tag {
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid var(--ink); border-radius: 999px; margin-bottom: 12px;
}
.project h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0 0 14px; }
/* "Explore project": a small black rounded button, like the other dark buttons ("Let's get in touch") */
.project .project-link {                               /* .project: beats the plain card-link colour */
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-weight: 500; font-size: 14px; line-height: 1.2;
  transition: transform .15s ease, background .15s ease;
}
.project-link .arrow { display: inline-block; transition: transform .2s ease; }
.project .project-link:hover { transform: translateY(-2px); background: var(--accent); }
.project-link:hover .arrow { transform: translateX(4px); }
.project-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* the "Case studies" label, project titles and "Explore project" links do the same jelly wobble as the menu links on hover */
#casestudies .eyebrow, #casestudies .project h3, #casestudies .project-link {
  --r: 0deg; width: fit-content;
}
#casestudies .eyebrow:hover,
#casestudies .project h3:hover { animation: jelly-hit .7s ease-out; }
@media (max-width: 900px) { .projects { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {                            /* phones and tablets: category, title and button centred under the picture */
  .project { align-items: center; text-align: center; }
  .project .tag { align-self: center; }
  .project > .project-photo, .project > .project-media { align-self: stretch; }
}
@media (max-width: 600px) { .projects { grid-template-columns: 1fr; } .project-media { margin-left: 7%; margin-right: 7%; } }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
/* testimonials: handwritten notes on lined notebook paper */
.quote {
  --line: 30px;                                         /* ruled-line spacing = text line height */
  --pad: 34px;
  position: relative; margin: 0;
  padding: var(--pad) 26px calc(var(--pad) + 4px) 66px;
  font-size: 21px; line-height: var(--line); color: #26324f;
  background:
    /* three punched holes */
    radial-gradient(circle at 22px 14%, var(--paper) 0 7px, rgba(0,0,0,.14) 7.5px, transparent 8.5px),
    radial-gradient(circle at 22px 50%, var(--paper) 0 7px, rgba(0,0,0,.14) 7.5px, transparent 8.5px),
    radial-gradient(circle at 22px 86%, var(--paper) 0 7px, rgba(0,0,0,.14) 7.5px, transparent 8.5px),
    /* red margin line */
    linear-gradient(to right, transparent 46px, #e07b86 46px, #e07b86 47.5px, transparent 47.5px),
    /* blue ruled lines, lined up under each line of text */
    linear-gradient(to bottom, transparent calc(var(--line) - 1px), #b8cfe6 calc(var(--line) - 1px)) 0 var(--pad) / 100% var(--line) repeat-y,
    #fdfaf4;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 18px 34px -18px rgba(29,26,23,.3);
  transition: transform .3s ease;
}
/* light-pink tint on hover */
.quote::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: #ffc4d2; opacity: 0; mix-blend-mode: multiply; transition: opacity .25s ease;
}
.quote:hover::after, .quote:focus-visible::after { opacity: .16; }   /* barely-there blush */
.quotes .quote:hover { transform: translateY(-3px); }   /* beats the fade-in rule */
.quote:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.quote::before {
  content: "“"; display: block; height: calc(var(--line) * 2); line-height: calc(var(--line) * 2.2);
  font-family: "Gaegu", cursive; font-size: 64px; color: var(--accent); margin: 0;   /* same quote mark on every card */
}
.quote blockquote { margin: 0 0 var(--line); }
.quote figcaption { font-size: .9em; }
.quote figcaption strong { display: block; }
.quote figcaption span { display: block; color: #5d6782; }
.quote.hand-1 { font-family: "Annie Use Your Telescope", cursive; font-size: 22px;
  -webkit-text-stroke: .55px currentColor; letter-spacing: .025em; }   /* no bold in this font: thicker strokes, a hair more spacing */
.quote.hand-2 { font-family: "Gloria Hallelujah", cursive; font-size: 17px; }
.quote.hand-3 { font-family: "Gaegu", cursive; font-size: 22px; }

/* pixel-style "click to send some love" tag that follows the cursor over a testimonial */
.love-tip, .love-tag {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px 5px; background: #fff; color: #1d1a17;
  font: 400 12px/1 "Silkscreen", monospace; letter-spacing: .02em; white-space: nowrap;
  /* stepped pixel border with notched corners + a pixel drop shadow */
  box-shadow:
    0 -3px 0 #111, 0 3px 0 #111, -3px 0 0 #111, 3px 0 0 #111,
    3px 6px 0 rgba(0,0,0,.14), 6px 3px 0 rgba(0,0,0,.14), 6px 6px 0 rgba(0,0,0,.14);
  opacity: 0; transition: opacity .15s steps(2);
}
.love-tip.show { opacity: 1; }
.love-tip svg, .love-tag svg { display: block; shape-rendering: crispEdges; }
/* phones and tablets: the same tag sits on every card's top-right corner */
.love-tag {
  display: none; position: absolute; left: auto; right: 14px; z-index: 1; opacity: 1;
  top: calc((var(--pad) + var(--line) * 2) / 2); transform: translateY(-50%);   /* centred in the space above the handwriting: same room above and below */
  -webkit-text-stroke: 0;                                  /* not the thicker handwriting outline of the first card */
}
@media (max-width: 600px) { .love-tag { font-size: 10.5px; gap: 6px; padding: 5px 7px 4px; } }   /* phones: a bit smaller, clear of the quote mark */
@media (max-width: 900px) { .love-tag { display: flex; } }   /* phones and tablets: no cursor to follow */

/* pixel hearts that fly out of a clicked testimonial */
.hearts-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.heart { position: absolute; left: 0; top: 0; shape-rendering: crispEdges; filter: drop-shadow(2px 2px 0 rgba(217, 114, 140, .18)); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; max-width: 640px; } }

/* ---------- Contact ---------- */
.contact { background: var(--accent); color: var(--accent-ink); text-align: center; }
.contact .h2 { font-size: clamp(40px, 7vw, 84px); margin-bottom: 8px; }
.contact .sub { font-family: var(--sans); font-weight: 700; font-style: italic; letter-spacing: -0.03em; font-size: clamp(22px, 3vw, 32px); margin: 0 0 40px; }
.email-row { display: inline-flex; align-items: center; justify-content: center; gap: 68px; flex-wrap: wrap; }   /* room for the letter */

/* pixel envelope: click to open it and pull out a pixel letter */
.envelope { position: relative; width: 72px; height: 52px; padding: 0; border: 0; background: none; flex: none; }
.envelope svg { position: absolute; left: 0; display: block; }
.env-front, .env-flap-closed { top: 0; }
.env-front { z-index: 3; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.18)); }
.env-flap-closed { z-index: 4; }
.env-flap-open { z-index: 1; bottom: 100%; visibility: hidden; }
.env-letter {
  position: absolute; z-index: 2; left: 50%; bottom: 14px; width: max-content;   /* centred: it comes straight out of the envelope */
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 14px 10px; background: #fff; color: #1d1a17;
  font: 400 12px/1.5 "Silkscreen", monospace; text-align: center; text-transform: uppercase;
  box-shadow: 0 -3px 0 #111, 0 3px 0 #111, -3px 0 0 #111, 3px 0 0 #111;
  transform: translate(-50%, 0) scale(.3); transform-origin: 50% 100%; opacity: 0;
  transition: transform .55s steps(6), opacity .1s steps(1) .5s;
  pointer-events: none;
}
.env-heart { width: 18px; height: 16px; background: no-repeat center / contain; }
/* pixel speech bubble to the right of the envelope */
.env-bubble, .clap-bubble, .sm-sound-bubble {
  position: absolute; z-index: 5; left: calc(100% + 20px); top: 2px;
  padding: 6px 9px 5px; background: #fff; color: #1d1a17;
  font: 400 12px/1 "Silkscreen", monospace; text-transform: uppercase; white-space: nowrap;
  box-shadow:
    0 -3px 0 #111, 0 3px 0 #111, -3px 0 0 #111, 3px 0 0 #111,
    3px 6px 0 rgba(0,0,0,.18), 6px 3px 0 rgba(0,0,0,.18), 6px 6px 0 rgba(0,0,0,.18);
  animation: bubble-hop 2.4s steps(1) infinite;
  transition: opacity .15s steps(2);
}
/* stepped tail pointing left at the envelope (drawn in 3px "pixels") */
.env-bubble::before, .clap-bubble::before, .sm-sound-bubble::before {
  content: ""; position: absolute; left: 0; top: calc(50% - 1.5px); width: 3px; height: 3px;
  box-shadow:
    -9px 0 #111,
    -6px -3px #111, -6px 0 #fff, -6px 3px #111,
    -3px -3px #fff, -3px 0 #fff, -3px 3px #fff;
}
@keyframes bubble-hop {
  0%, 70%, 100% { transform: translateY(0); }
  76%           { transform: translateY(-4px); }
  82%           { transform: translateY(0); }
  88%           { transform: translateY(-2px); }
}
.envelope.open .env-bubble { opacity: 0; }
/* same bubble on the clapperboard, to its right, tail pointing back at it */
.clap-bubble { left: calc(100% + 16px); top: 26%; animation-delay: -1.2s; }
.envelope.open .env-flap-closed { visibility: hidden; }
.envelope.open .env-flap-open { visibility: visible; }
.envelope.open .env-letter {
  transform: translate(-50%, -30px) scale(1); opacity: 1;
  transition: transform .6s steps(7) .12s, opacity .1s steps(1) .12s;
}
.envelope:not(.open):hover .env-flap-closed { transform: translateY(-1px); }
.envelope:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
/* phones: envelope sits above the email; opening it makes room so the letter never covers anything */
@media (max-width: 600px) {
  .email-row { flex-direction: column-reverse; gap: 18px; }   /* room for the letter appears at once: a stepped grow left stray lines behind on phones */
  .email-row:has(.envelope.open) { padding-top: 96px; }
  .env-letter { left: 50%; transform: translate(-50%, 0) scale(.3); transform-origin: 50% 100%; }
  .envelope.open .env-letter { transform: translate(-50%, -30px) scale(1); }
}
.email {
  display: inline-block; font-weight: 700; letter-spacing: .06em;
  font-size: clamp(20px, 4vw, 40px); text-decoration: none;
  word-break: break-all;
}
.email:hover { opacity: .85; }
.contact .form-note { margin: 36px auto 0; max-width: 520px; }
.contact .form-note a { font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #a59c90; font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--paper); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .env-bubble, .clap-bubble, .sm-sound-bubble, .env-letter, .clapper, .blob, .polaroid, .star svg, .focus-icon .arrows, .svc-media, .eyes-pair, .eyes-pair .lids, .svc-caption .ch, .sm-bts, .sm-check svg, .sm-note, .sm-sprite, .sm-sprite g, .cs-whale img, .sl-tilt, .sl-sticker svg { animation: none !important; }
  .svc-caption .ch { clip-path: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Page: stop-motion ---------- */
/* heading and intro are "written on" the ruled lines: line spacing = ruled-line spacing (--lh); site.js lines them up */
.sm-hero h1 { margin-bottom: 28px; line-height: calc(var(--lh) * 3); }
@media (min-width: 861px) { .sm-hero h1 { font-size: clamp(80px, 7.4vw, 96px); } }
@media (max-width: 860px) { .sm-hero h1 { line-height: calc(var(--lh) * 2); } }
.sm-hero h1 .dot { font-size: .8em; margin-left: .07em; }   /* this page only: a bigger dot with a little gap after "Motion" */
.sm-hero .hero-lede { font-size: clamp(18px, 1.7vw, 21px); line-height: var(--lh); }
.sm-hero .hero-lede b { font-weight: 700; }
/* Intro section sits on lined notebook paper, like the testimonial cards: blue ruled lines, and (on the right)
   a red margin line and three punched holes, plus a faint wrinkled-paper texture */
.sm-hero {
  --lh: 34px;                                        /* ruled-line spacing */
  --rl: clamp(30px, 4.5vw, 64px);                    /* red line: distance from the right edge */
  --hx: calc(100% - var(--rl) * .48);                /* punched holes: centred between the line and the edge */
  --hr: clamp(7px, .8vw, 10px);                      /* hole size */
  background:
    radial-gradient(circle at var(--hx) 14%, var(--paper) 0 var(--hr), rgba(0,0,0,.14) calc(var(--hr) + .5px), transparent calc(var(--hr) + 1.5px)),
    radial-gradient(circle at var(--hx) 50%, var(--paper) 0 var(--hr), rgba(0,0,0,.14) calc(var(--hr) + .5px), transparent calc(var(--hr) + 1.5px)),
    radial-gradient(circle at var(--hx) 86%, var(--paper) 0 var(--hr), rgba(0,0,0,.14) calc(var(--hr) + .5px), transparent calc(var(--hr) + 1.5px)),
    linear-gradient(to left, transparent var(--rl), #e07b86 var(--rl), #e07b86 calc(var(--rl) + 1.5px), transparent calc(var(--rl) + 1.5px)),
    linear-gradient(to bottom, transparent calc(var(--lh) - 1px), #b8cfe6 calc(var(--lh) - 1px)) 0 var(--ly, 0px) / 100% var(--lh),   /* --ly set by site.js */
    #fdfaf4;
}
.sm-hero::before {                                   /* wrinkled-paper texture over the lines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("media/paper.webp") center / cover no-repeat;
  mix-blend-mode: multiply; opacity: .75;
}
.sm-hero .wrap { padding-right: max(var(--gutter), calc(var(--rl) + 24px)); }
.sm-hero { padding-bottom: calc(clamp(64px, 9vw, 110px) + 34px); }   /* a little more lined paper below the content */   /* keep everything clear of the red line */
@media (min-width: 861px) { .sm-hero .reel { justify-self: center; margin-right: 0; } }
.sm-hero .star { filter: drop-shadow(0 2px 2px rgba(40, 44, 50, .35)); }   /* chrome outline stars: soft grey shadow, no gold foil */
.sm-hero .star.st1 { --s: 21%; } .sm-hero .star.st2 { --s: 14%; } .sm-hero .star.st3 { --s: 16%; } .sm-hero .star.st4 { --s: 20%; } .sm-hero .star.st5 { --s: 15%; }   /* outlines look lighter: a bit bigger */   /* polaroid centred in its half */
/* "In a world of AI…": handwritten (Lips & Brain testimonial hand, "I create" caption ink) on a torn scrap of the
   wrinkled paper used behind the rest of the page */
.sm-note {
  position: relative;
  display: inline-block; max-width: 470px; margin: 22px 0 40px;   /* a little lower, so the section feels balanced */
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 0 .6px rgba(29,26,23,.35)) drop-shadow(0 5px 6px rgba(29,26,23,.16));   /* torn edge + lift */
}
.sm-human {
  display: block; padding: 24px 30px 24px 28px;
  font-family: "Gloria Hallelujah", cursive; font-weight: 400; color: #1e2a5e;
  font-size: clamp(18px, 1.6vw, 21px); line-height: 34px;
  background: url("media/paper.webp") 30% 40% / 900px auto, var(--paper);
  background-blend-mode: multiply;
  clip-path: polygon(0.0% 1.3%, 2.9% 0.5%, 5.9% 1.0%, 8.8% 0.3%, 11.8% 0.8%, 14.7% 0.4%, 17.6% 4.4%, 20.6% 4.0%, 23.5% 1.7%, 26.5% 0.2%, 29.4% 2.2%, 32.4% 1.3%, 35.3% 4.5%, 38.2% 0.1%, 41.2% 1.4%, 44.1% 3.0%, 47.1% 4.1%, 50.0% 2.1%, 52.9% 1.1%, 55.9% 3.7%, 58.8% 5.1%, 61.8% 0.8%, 64.7% 1.0%, 67.6% 0.3%, 70.6% 5.4%, 73.5% 6.1%, 76.5% 4.9%, 79.4% 4.1%, 82.4% 5.9%, 85.3% 3.3%, 88.2% 0.4%, 91.2% 4.5%, 94.1% 5.8%, 97.1% 2.7%, 100.0% 4.1%, 99.8% 25.0%, 99.9% 50.0%, 99.9% 75.0%, 100.0% 99.5%, 97.1% 97.3%, 94.1% 99.4%, 91.2% 96.2%, 88.2% 94.3%, 85.3% 98.1%, 82.4% 97.5%, 79.4% 99.6%, 76.5% 99.0%, 73.5% 95.9%, 70.6% 100.0%, 67.6% 97.4%, 64.7% 93.3%, 61.8% 96.4%, 58.8% 98.2%, 55.9% 94.5%, 52.9% 94.4%, 50.0% 98.7%, 47.1% 99.6%, 44.1% 98.9%, 41.2% 99.7%, 38.2% 99.3%, 35.3% 99.8%, 32.4% 99.5%, 29.4% 97.6%, 26.5% 99.1%, 23.5% 93.0%, 20.6% 99.8%, 17.6% 97.6%, 14.7% 100.0%, 11.8% 93.3%, 8.8% 99.0%, 5.9% 99.8%, 2.9% 93.2%, 0.0% 93.2%, 0.4% 75.0%, 0.2% 50.0%, 0.9% 25.0%);
}
/* silver paperclip holding the scrap's top-right corner */
.sm-paperclip {
  position: absolute; z-index: 1; right: 30px; top: -26px; width: 27px; height: auto;
  transform: rotate(10deg); filter: drop-shadow(1px 2px 1px rgba(29,26,23,.28));
}
.sm-note:hover { animation: note-wiggle .6s steps(4); }          /* a little stop-motion wiggle on hover */
@keyframes note-wiggle {
  0%, 100% { transform: rotate(-1.5deg); }
  25%      { transform: rotate(.5deg) translateY(-3px); }
  50%      { transform: rotate(-3deg) translateY(-1px); }
  75%      { transform: rotate(-.5deg) translateY(-2px); }
}

/* Best suited for: four points with pixel tick-boxes, behind-the-scenes photo in a polaroid */
.sm-suited { background: #d4d0c8; }               /* light grey of old computer windows and buttons */
.sm-suited-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.sm-fits { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 44px; }
.sm-fit { position: relative; padding-left: 46px; }
/* empty pixel tick-boxes; click to tick (and again to untick) */
.sm-check { position: absolute; left: -6px; top: -6px; padding: 6px; border: 0; background: none; line-height: 0; }
.sm-check svg { display: block; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .18)); }
.sm-check:hover svg { transform: translateY(-2px); }
.sm-check .sm-tick { visibility: hidden; }
.sm-check[aria-checked="true"] .sm-tick { visibility: visible; }
.sm-check.pop svg { animation: check-pop .4s steps(4); }
@keyframes check-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.3); } 70% { transform: scale(.9); } }
.sm-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sm-fit h3 { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; }
.sm-fit p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.sm-bts {                                            /* same polaroid + handwritten hover caption as the homepage "I create" cards */
  --tilt: -2.5deg;
  padding: 6% 6% 0;
  container-type: inline-size;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.018) 0 2px, transparent 2px 5px),
    #f3f2ee;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 22px 44px -18px rgba(29,26,23,.35);
  transform: rotate(var(--tilt));
  animation: svc-float 6s ease-in-out infinite;
}
.sm-bts img { width: 100%; height: auto; aspect-ratio: 964 / 1333; object-fit: cover; background: #111; }
.sm-bts-wrap { order: -1; width: 100%; max-width: 420px; justify-self: start; margin-left: 10px; }   /* photo on the left, text on the right */

/* Latest projects: one big phone playing the videos, pixel arrows either side, pixel counter + buttons below */
.sm-projects .h2 { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
/* pixel pictures scattered on the paper around the phone, one kind per video (placed by site.js in empty space only) */
.sm-projects { position: relative; }
.sm-projects > .wrap { position: relative; z-index: 1; }
.sm-sprites { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sm-sprite {
  position: absolute; display: block; shape-rendering: crispEdges; overflow: visible;   /* the bob lifts it above its box: don't clip */
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.12));
  animation: eyes-in .3s steps(3) both;
}
.sm-sprite.out { animation: eyes-out .2s steps(2) forwards; }
.sm-sprite g { animation: sprite-bob 2.4s steps(1) infinite; animation-delay: inherit; }
@keyframes sprite-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }   /* one pixel up and down, stop-motion style */
.sm-player {
  --pw: min(400px, calc(100vw - 2 * var(--gutter) - 124px), calc((100svh - 160px) * .5));   /* phone width: fits the screen, sideways and tall */
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4vw, 56px);
}
.sm-phone-col { display: flex; flex-direction: column; align-items: center; gap: 26px; }
/* the phone: dark rounded body, light metal edge, side buttons, dynamic island */
.sm-phone {
  position: relative; width: var(--pw); padding: calc(var(--pw) * .035);
  background: #1d1a17; border-radius: calc(var(--pw) * .15);
  box-shadow:
    inset 0 0 0 2px #3a3631,
    0 0 0 3px #cfc8bd, 0 0 0 4px #a59c90,
    0 30px 60px -22px rgba(29,26,23,.55);
}
.sm-phone::before, .sm-phone::after {                     /* side buttons */
  content: ""; position: absolute; width: 4px; border-radius: 2px; background: #a59c90;
}
.sm-phone::before { left: -7px; top: 20%; height: 12%; box-shadow: 0 calc(var(--pw) * .2) 0 #a59c90; }
.sm-phone::after  { right: -7px; top: 26%; height: 16%; }
.sm-screen {
  position: relative; overflow: hidden; background: #000;
  aspect-ratio: 9 / 18.5; border-radius: calc(var(--pw) * .118);
}
.sm-screen video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.sm-island {
  position: absolute; left: 50%; top: 2.2%; width: 30%; height: 4.4%; transform: translateX(-50%);
  background: #000; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

/* pixel buttons and counter: white box, stepped black border, pixel drop shadow (same look as the speech bubbles) */
.sm-px {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 0; border: 0; background: #fff; color: #1d1a17;
  box-shadow:
    0 -3px 0 #111, 0 3px 0 #111, -3px 0 0 #111, 3px 0 0 #111,
    3px 6px 0 rgba(0,0,0,.18), 6px 3px 0 rgba(0,0,0,.18), 6px 6px 0 rgba(0,0,0,.18);
}
.sm-px svg { display: block; shape-rendering: crispEdges; }
button.sm-px { transition: transform .12s steps(2); }
button.sm-px:hover:not(:disabled) { transform: translateY(-3px); }

button.sm-px:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 -3px 0 #111, 0 3px 0 #111, -3px 0 0 #111, 3px 0 0 #111; }
button.sm-px:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.sm-px:disabled { opacity: .28; cursor: inherit; }        /* end of the list: arrow greyed out, no hand cursor */
.sm-arrow { width: 52px; height: 52px; }
/* the arrows line up with the middle of the phone, not of phone + buttons below: move them up by half of
   what sits under the phone (26px gap + 44px buttons; on phones also the 46px "SOUND" bubble space) */
.sm-player { --below: 70px; }
.sm-arrow { translate: 0 calc(var(--below) / -2); }
.sm-ctl { width: 44px; height: 44px; }
.sm-count {
  min-width: 76px; height: 44px; padding: 0 12px;
  font: 400 18px/1 "Silkscreen", monospace; letter-spacing: .04em;
}
.sm-controls { display: flex; align-items: center; gap: 22px; }
/* pixel "Sound" speech bubble beside the sound button (same bubble as "Open me!" by the envelope) */
.sm-sound-wrap { position: relative; display: inline-flex; }
.sm-sound-bubble { top: calc(50% - 12px); animation-delay: -.6s; pointer-events: none; }
/* big pixel play button in the middle of the screen while the video is paused */
.sm-bigplay {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
  translate: -50% -50%;
}
.sm-player.playing .sm-bigplay { opacity: 0; pointer-events: none; }

@media (max-width: 860px) {
  .sm-suited-grid { grid-template-columns: 1fr; }
  .sm-bts-wrap { justify-self: center; margin-left: 0; width: min(78%, 360px); }   /* photo above the text */
}
@media (max-width: 600px) {
  .sm-fits { grid-template-columns: 1fr; gap: 30px; }
  .sm-player { --pw: min(400px, calc(100vw - 2 * var(--gutter) - 104px)); gap: 10px; }   /* phones: arrows tucked in closer so the phone can be bigger */
  .sm-arrow { width: 40px; height: 40px; }
  .sm-hero { --lh: 30px; }
  .sm-human { font-size: 17px; line-height: 30px; padding: 20px 22px; }
  /* phones: no room beside it, so the bubble sits under the sound button with its tail pointing up */
  .sm-sound-bubble { left: 50%; top: calc(100% + 20px); translate: -50% 0; }
  .sm-sound-bubble::before {
    left: calc(50% - 1.5px); top: 0;
    box-shadow:
      0 -9px #111,
      -3px -6px #111, 0 -6px #fff, 3px -6px #111,
      -3px -3px #fff, 0 -3px #fff, 3px -3px #fff;
  }
  .sm-phone-col { padding-bottom: 46px; }
  .sm-player { --below: 116px; }
  .sm-controls { gap: 18px; }
  .sm-sprites { display: none; }                  /* phones: no pixel pictures beside the phone (too busy) */
}

/* ---------- Page: digital-animation ---------- */
.da-suited .sm-bts img { aspect-ratio: 1100 / 1032; }   /* the laptop photo is wider than the stop-motion one */

/* ---------- Page: casestudies-digital-hvalavinir ---------- */
/* intro: same hero as the homepage; the title's second half in brand blue on its own line */
.cs-hero .tag { display: inline-block; margin-bottom: 22px; }
.cs-hero h1 { max-width: none; margin-bottom: 28px; }
.cs-hero h1 em { display: block; font-size: .56em; line-height: 1.1; margin-top: .12em; }
.cs-hero .hero-lede { font-size: clamp(18px, 1.7vw, 21px); margin-bottom: 32px; }
.cs-hero .hero-lede b, .cs-text b, .cs-step p b, .cs-mission-text b { font-weight: 700; }
.cs-reel { width: min(100%, 520px); transform: rotate(4deg); }
.cs-reel .polaroid { padding-bottom: 18%; }
.cs-reel .polaroid img { width: 100%; height: auto; aspect-ratio: 1680 / 1221; object-fit: cover; background: #111; }
@media (max-width: 860px) { .cs-reel { width: min(86%, 440px); transform: rotate(4deg); } }

/* the whale cut-out between the intro and the story gently floats up and down */
.cs-whale { overflow-x: clip; padding: 10px 0 0; margin-top: -30px; }
.cs-whale img {
  width: min(78%, 900px); height: auto; margin: 0 auto;
  filter: drop-shadow(0 10px 12px rgba(29,26,23,.18));
  animation: whale-float 6s ease-in-out infinite;
}
@keyframes whale-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
/* the campaign: text on the left, the animated "tourism" graphic in a polaroid on the right */
.cs-story { padding-top: clamp(40px, 5vw, 64px); }
.cs-story-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.cs-text p { margin: 0 0 20px; font-size: clamp(18px, 1.6vw, 20px); }
.cs-story-media { justify-self: center; width: min(100%, 400px); }
.cs-story-media .svc-media { --tilt: 2.5deg; padding-bottom: 14%; }
.cs-story-media video { aspect-ratio: 1080 / 1356; }

/* mission: one statement, centred, in the same size as the body text around it */
.cs-mission { text-align: center; padding-top: clamp(32px, 4vw, 56px); }
.cs-mission-text {
  max-width: 760px; margin: 0 auto;
  font-size: clamp(18px, 1.6vw, 20px); line-height: 1.5;
}
.cs-mission-text b { color: var(--accent); }

/* creative process: three steps, pictures in tilted polaroids (like the homepage "I create" cards) */
.cs-process .h2 { margin-bottom: clamp(40px, 5vw, 64px); }
.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.cs-step .svc-media { padding-bottom: 14%; margin-bottom: 30px; }
.cs-step .svc-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #111; }
.cs-step .cs-plate img { object-fit: contain; padding: 14% 8%; background: #fdfaf4; }   /* the plate drawing has no background of its own */
.cs-step:nth-child(2) { margin-top: 48px; }                                         /* a gentle zigzag */
.cs-num { display: block; font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.cs-step h3 { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
.cs-step p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; }
@media (max-width: 860px) {
  .cs-story-grid { grid-template-columns: 1fr; }
  .cs-story-media { width: min(78%, 360px); }
  .cs-steps { grid-template-columns: 1fr; gap: 56px; }
  .cs-step { width: 100%; max-width: 520px; justify-self: center; }
  .cs-step:nth-child(2) { margin-top: 0; }
  .cs-step .svc-media { width: 86%; margin-left: auto; margin-right: auto; }
}

/* the film in the phone: only one video, so no arrows or counter */
.cs-film .sm-arrow, .cs-film .sm-count { display: none; }
.cs-film .sm-arrow { translate: none; }

/* outcome: text + the two Instagram screenshots, then the numbers on notebook paper */
.cs-outcome { padding-top: clamp(32px, 4vw, 56px); }
.cs-outcome-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.cs-shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; }
.cs-shot {                                             /* plain screenshots: rounded corners and a soft shadow */
  width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 22px 44px -18px rgba(29,26,23,.35);
}
.cs-stats { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cs-stat {
  --line: 30px; --pad: 26px;
  display: flex; flex-direction: column; gap: 0;
  padding: var(--pad) 24px calc(var(--pad) + 4px) 62px;
  background:                                          /* same lined notebook paper as the testimonial cards */
    radial-gradient(circle at 22px 20%, var(--paper) 0 7px, rgba(0,0,0,.14) 7.5px, transparent 8.5px),
    radial-gradient(circle at 22px 80%, var(--paper) 0 7px, rgba(0,0,0,.14) 7.5px, transparent 8.5px),
    linear-gradient(to right, transparent 46px, #e07b86 46px, #e07b86 47.5px, transparent 47.5px),
    linear-gradient(to bottom, transparent calc(var(--line) - 1px), #b8cfe6 calc(var(--line) - 1px)) 0 var(--pad) / 100% var(--line) repeat-y,
    #fdfaf4;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 18px 34px -18px rgba(29,26,23,.3);
}
.cs-stat b {
  font-size: clamp(44px, 5vw, 60px); line-height: calc(var(--line) * 2); font-weight: 700;
  letter-spacing: -0.045em; color: var(--accent);
}
.cs-stat span { font-family: "Annie Use Your Telescope", cursive; color: #1e2a5e; font-size: 22px; line-height: var(--line);
  -webkit-text-stroke: .5px currentColor; letter-spacing: .025em; }
.cs-stat:nth-child(1) { rotate: -1deg; } .cs-stat:nth-child(2) { rotate: .8deg; } .cs-stat:nth-child(3) { rotate: -.5deg; }
/* closing line on a scrapbook strip, like the homepage hero words */
.cs-closing { display: flex; justify-content: center; margin: clamp(56px, 7vw, 88px) 0 0; }
.cs-closing .blob { --r: -1.5deg; }
.cs-closing .cut { font-size: clamp(22px, 2.6vw, 32px); }
@media (max-width: 860px) {
  .cs-outcome-grid { grid-template-columns: 1fr; }
  .cs-shots { width: min(100%, 620px); justify-self: center; }
}
@media (max-width: 900px) { .cs-stats { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } }
@media (max-width: 600px) { .cs-closing .cut { white-space: normal; text-align: center; } .cs-closing .blob { flex-wrap: nowrap; } }

/* case studies: same cards as the homepage; the card for this page is darkened with "you are here" and isn't a link */
.cs-more .h2 { text-align: center; margin-bottom: 48px; }
.here-pic { position: relative; }                       /* the picture itself, so the dark layer covers exactly the picture */
.here-pic::after {                                       /* darken the picture */
  content: ""; position: absolute; inset: 0; background: rgba(20, 24, 32, .55);
}
.you-are-here {
  position: absolute; z-index: 1; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 400 clamp(16px, 1.8vw, 22px)/1 "Silkscreen", monospace; text-transform: uppercase; color: #fff;
  letter-spacing: .04em; text-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.project-current .project-media:hover { transform: rotate(var(--tilt)); box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 22px 44px -18px rgba(29,26,23,.35); }   /* not a link: no lift */
#casestudies .project-current h3:hover { animation: none; }                                                                                              /* and no wobble */

/* ---------- Page: casestudies-stopmotion-lego ---------- */
/* built like the Hvalavinir page; only what's different for Lego is here */
.lg-reel { width: min(100%, 480px); }
.lg-reel .polaroid img { aspect-ratio: 1; }                      /* the 3-in-1 picture is square */
@media (max-width: 860px) { .lg-reel { width: min(86%, 420px); } }
.cs-hero .hero-lede:has(+ .hero-lede) { margin-bottom: 16px; }   /* two intro paragraphs: closer together */
.lg-mission-more { max-width: 760px; margin: 24px auto 0; font-size: clamp(18px, 1.6vw, 20px); }
/* creative process: steps one under another, big plain pictures (no polaroid), picture and text swap sides each step */
.lg-process .cs-steps { grid-template-columns: 1fr; gap: clamp(56px, 7vw, 96px); }
.lg-process .cs-step { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.lg-process .cs-step:nth-child(2) { margin-top: 0; }
.lg-process .cs-step:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.lg-process .cs-step:nth-child(even) .lg-step-img { order: 2; }
.lg-step-img {                                         /* plain picture: rounded corners and a soft shadow, like the screenshots */
  width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 22px 44px -18px rgba(29,26,23,.35);
}
@media (max-width: 860px) {
  .lg-process .cs-step, .lg-process .cs-step:nth-child(even) { grid-template-columns: 1fr; max-width: 720px; }   /* picture above its text */
  .lg-process .cs-step:nth-child(even) .lg-step-img { order: 0; }
}
.lg-outcome .cs-text { max-width: 820px; }
.lg-outcome { padding-top: clamp(56px, 7.5vw, 104px); padding-bottom: 0; }                               /* the text leads straight into the tablet below it */

/* the film on a tablet held sideways (the film is horizontal): same dark body, metal edge and pixel buttons as the
   phone player, with the camera in the top bezel and the power button on the top edge */
.cs-film .sm-player { --tw: min(860px, calc(100vw - 2 * var(--gutter) - 124px), calc((100svh - 220px) / .6)); }
.sm-tablet {
  position: relative; width: var(--tw); padding: calc(var(--tw) * .035);
  background: #1d1a17; border-radius: calc(var(--tw) * .045);
  box-shadow:
    inset 0 0 0 2px #3a3631,
    0 0 0 3px #cfc8bd, 0 0 0 4px #a59c90,
    0 30px 60px -22px rgba(29,26,23,.55);
}
.sm-tablet::before {                                     /* power button on the top edge */
  content: ""; position: absolute; top: -7px; right: 12%; width: 8%; height: 4px; border-radius: 2px; background: #a59c90;
}
.sm-tablet::after {                                      /* front camera */
  content: ""; position: absolute; left: 50%; top: calc(var(--tw) * .0175); width: 6px; height: 6px;
  translate: -50% -50%; border-radius: 50%; background: #3a3631; box-shadow: inset 0 0 0 1.5px #111;
}
.sm-tablet .sm-screen { aspect-ratio: 16 / 9; border-radius: calc(var(--tw) * .012); }
@media (max-width: 600px) {
  .cs-film .sm-player { --tw: calc(100vw - 2 * var(--gutter) - 8px); }
}

/* ---------- Page: casestudies-stopmotion-barilla ---------- */
/* built like the Hvalavinir page (polaroid steps, phone player) with the Lego page's outcome-above-the-film order */
/* mission: the statement on the left, the heart-shaped pasta in a tilted polaroid on the right */
.br-mission { text-align: left; padding-top: clamp(56px, 7vw, 96px); }
.br-mission-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.br-mission .cs-mission-text { margin: 0; }
.br-heart { justify-self: center; width: min(100%, 360px); }
.br-heart .svc-media { --tilt: -3deg; padding-bottom: 14%; margin: 0; }
.br-heart .svc-media img { width: 100%; height: auto; aspect-ratio: 540 / 480; object-fit: cover; background: #1d3577; }
@media (max-width: 860px) {
  .br-mission { text-align: center; }
  .br-mission-grid { grid-template-columns: 1fr; }
  .br-heart { width: min(70%, 320px); }
}
.br-steps .svc-media img { aspect-ratio: 6 / 7; }                 /* the three photos are nearly this shape */
/* outcome: just the text, leading straight into the phone below it */
.br-outcome .cs-text { max-width: 820px; }
.br-outcome { padding-top: clamp(56px, 7.5vw, 104px); padding-bottom: 0; }

/* ---------- Page: content-for-social-media ---------- */
/* intro: a longer heading than the service pages, so a bit smaller, still two ruled lines per text line */
.sl-hero h1 { max-width: 12ch; line-height: calc(var(--lh) * 2); }
@media (min-width: 861px) { .sl-hero h1 { font-size: clamp(54px, 5.6vw, 72px); } }
.sl-hero h1 em { white-space: nowrap; }
/* the phone takes the place of the polaroid: same tilt and float (7° + −3°); it loops on its own, sound button below */
.sl-hero .sm-player { --pw: min(350px, 40vw, calc((100svh - 210px) * .48)); justify-self: center; }
.sl-hero .sm-screen video { cursor: inherit; }   /* not clickable here: no pixel hand */
.sl-tilt { position: relative; transform: rotate(4deg); animation: sl-phone-float 6s ease-in-out infinite; }
@keyframes sl-phone-float {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50%      { transform: rotate(5.5deg) translateY(-14px); }
}
/* scrapbook stickers around the phone (white die-cut edge drawn by the #sl-cut filter), little stepped wiggle */
.sl-sticker { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(29,26,23,.28)); }
.sl-sticker svg {
  display: block; width: 100%; height: auto; overflow: visible;
  transform: rotate(var(--r, 0deg));
  animation: star-wiggle 1.2s steps(1) infinite; animation-delay: inherit;
}
.sl-plane  { --r: -10deg; width: 52%; top: -9%;  left: -26%; animation-delay: -.4s; }
.sl-coffee { --r: 8deg;   width: 34%; top: 50%;  right: -24%; animation-delay: -.9s; }
.sl-tram   { --r: -6deg;  width: 46%; bottom: 3%; left: -28%; animation-delay: -.2s; }

/* about: the photo (3:4) is shown whole beside the text */
.sl-about .portrait { aspect-ratio: 1256 / 1630; }             /* a sliver trimmed off the bottom (dark line on the photo's edge) */
.sl-about .portrait img { object-position: 50% 0; }
.sl-about .about-text a { color: var(--accent); font-weight: 700; text-decoration: none; }   /* @1moresunday → Instagram */
.sl-about .about-text p { text-wrap: pretty; }   /* no single word left alone on the last line */
.sl-about .about-text a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the videos section: sky blue of old pixel games behind the phone and its pixel pictures */
.sl-projects { background: #5c94fc; }

/* What can we create? two formats on paper cards with pixel numbers, on the old-computer grey */
.sl-create { background: #d4d0c8; }
.sl-create .h2 { text-align: center; margin-bottom: clamp(48px, 6vw, 72px); }
.sl-offers {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1040px;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 56px);
}
.sl-offer {
  position: relative; padding: 46px clamp(24px, 3vw, 38px) 34px;
  background: #fdfaf4; border-radius: 3px;
  box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 18px 34px -18px rgba(29,26,23,.3);
}
.sl-offer:nth-child(1) { rotate: -.8deg; } .sl-offer:nth-child(2) { rotate: .6deg; }
.sl-num {
  position: absolute; left: 28px; top: -22px; width: 44px; height: 44px;
  font: 400 22px/1 "Silkscreen", monospace;
}
.sl-offer h3 { font-size: clamp(21px, 2vw, 24px); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; }
.sl-offer p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.sl-offer p:last-child { margin-bottom: 0; }
.sl-offer a { color: var(--accent); font-weight: 700; text-decoration: none; }   /* @1moresunday → Instagram, like in the About text */
.sl-offer a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* closing line on a wide strip of lined notebook paper
   (blue rules under each line of writing, red margin line and two punched holes on the left) */
.sl-create .cs-closing .cut {
  white-space: normal; text-align: center; width: 100%; color: #1e2a5e;   /* handwriting ink */
  font-size: clamp(17px, 1.8vw, 23px);
  padding: calc(.26em + 2.3em) 54px calc(.18em + 2.3em) 84px;      /* two empty ruled lines above and below the writing */
  background:
    radial-gradient(circle at 30px 24%, #d4d0c8 0 8px, rgba(0,0,0,.2) 8.5px, transparent 9.5px),
    radial-gradient(circle at 30px 76%, #d4d0c8 0 8px, rgba(0,0,0,.2) 8.5px, transparent 9.5px),
    linear-gradient(to right, transparent 62px, #e07b86 62px, #e07b86 63.5px, transparent 63.5px),
    linear-gradient(to bottom, transparent calc(1.15em - 1px), #b8cfe6 calc(1.15em - 1px)) 0 .3em / 100% 1.15em,
    #fdfaf4;
}
.sl-create .cs-closing .blob { flex-wrap: nowrap; max-width: 100%; }
@media (min-width: 601px) { .sl-create .cs-closing .cut { white-space: nowrap; width: auto; } }   /* the strip is just as long as the two lines */
.sl-create .cs-closing .blob:hover { animation: jelly 5.5s ease-in-out infinite; }   /* no bounce on hover: just keeps its gentle wobble */
@media (max-width: 600px) {                          /* phones: margin line and holes closer to the edge, more room for the words */
  .sl-create .cs-closing .cut {
    padding-left: 56px; padding-right: 18px;
    background:
      radial-gradient(circle at 20px 24%, #d4d0c8 0 6px, rgba(0,0,0,.2) 6.5px, transparent 7.5px),
      radial-gradient(circle at 20px 76%, #d4d0c8 0 6px, rgba(0,0,0,.2) 6.5px, transparent 7.5px),
      linear-gradient(to right, transparent 40px, #e07b86 40px, #e07b86 41.5px, transparent 41.5px),
      linear-gradient(to bottom, transparent calc(1.15em - 1px), #b8cfe6 calc(1.15em - 1px)) 0 .3em / 100% 1.15em,
      #fdfaf4;
  }
}

@media (max-width: 860px) {
  .sl-hero .sm-player { --pw: min(320px, 66vw); margin-top: 72px; }   /* room for the airplane above the phone's corner */
  .sl-offers { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 600px) {
  .sl-hero .sm-player { --pw: min(280px, 64vw); }
  .sl-tram { width: 34%; left: -8%; }                /* phones: stickers tucked in so they stay on screen */
  .sl-plane { width: 44%; left: -10%; }
}

/* ---------- Phones only: fixes after checking the site on a phone ---------- */
@media (max-width: 600px) {
  /* service pages: torn note closer to the intro text, bigger polaroid under the button */
  .sm-hero .sm-note { margin-top: 0; }
  .sm-hero .reel { width: min(86%, 340px); }
  /* case studies: description text left-aligned (Mission / The goal, story, Outcome); Creative Process stays centred */
  .cs-mission, .br-mission, .cs-story .cs-text, .cs-outcome .cs-text { text-align: left; }
  .cs-process { text-align: center; }
  /* content for social media: more room between the two "What can we create?" cards */
  .sl-offers { gap: 64px; }
  /* closing strip: three set lines on phones */
  .sl-create .cs-closing .cut { white-space: nowrap; font-size: min(15px, 4vw); }
}

/* ---------- Tablets only (upright iPad, 601–860px): fixes after checking the site on a tablet ---------- */
@media (min-width: 601px) and (max-width: 860px) {
  /* intros (every page): everything above the polaroid / phone centred */
  .hero .hero-text { text-align: center; }
  .hero h1, .hero .hero-lede { margin-left: auto; margin-right: auto; }
  .hero .hero-actions { justify-content: center; }
  .hero .blobs { align-items: center; }
  .hero .blob.b2, .hero .blob.b4 { margin-left: 0; }
  .sm-hero .sm-human { text-align: left; }                    /* the torn note is centred, its handwriting stays left */
  /* bigger showreel / service polaroid */
  .hero:not(.cs-hero):not(.sl-hero) .reel { width: min(62%, 440px); }
  /* "A little about me": photo + clapperboard in the middle */
  #about .portrait-wrap, .sl-about .portrait-wrap { width: 100%; justify-self: center; }
  /* content for social media: more room between the two "What can we create?" cards */
  .sl-offers { gap: 72px; }
  /* case studies: Creative Process and Outcome centred */
  .cs-process, .cs-outcome .cs-text { text-align: center; }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* two project cards per row: the third one sits in the middle */
  .projects > .project:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 24px) / 2); }
  /* Lego: not enough room for the pixel bricks beside the tablet */
  .lg-film .sm-sprites { display: none; }
}

/* Hvalavinir: "Illustrations by Styngvi" credit under the title, a bit more space before the intro text */
.cs-credit { margin: -12px 0 34px; font-style: italic; font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-soft); }

/* ---------- Case studies: more room between Creative Process steps on phones and tablets; centred, narrower text on tablets ---------- */
@media (max-width: 860px) {
  .cs-steps, .lg-process .cs-steps { gap: 96px; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .cs-hero .hero-text, .cs-story .cs-text, .cs-mission, .br-mission, .cs-process, .cs-outcome .cs-text, .cs-stat { text-align: center; }
  .cs-hero .hero-lede, .cs-hero .cs-credit, .cs-story .cs-text, .cs-mission-text, .lg-mission-more, .cs-outcome .cs-text, .cs-step p {
    max-width: 540px; margin-left: auto; margin-right: auto;   /* shorter lines, more space at the sides */
  }
  .cs-story .cs-text, .cs-outcome .cs-text { justify-self: center; }
}

/* ---------- Touch screens (phones, tablets): no hover effects ----------
   On iPhone/iPad a tap on something with a hover effect often only "hovers" it (wobble / lift) and the link doesn't
   open until a second tap. So on screens without a mouse the hover effects are off and one tap always works. */
@media (hover: none) {
  .nav a:hover, .nav-menu a:hover, .nav-drop-btn:hover, #casestudies .eyebrow:hover, #casestudies .project h3:hover, #casestudies .project-link:hover,
  .sm-note:hover { animation: none; }
  .blob:hover { animation: jelly 5.5s ease-in-out infinite; }               /* keeps its gentle idle wobble */
  .btn:hover, .quotes .quote:hover, .project-link:hover, .project-link:hover .arrow, .sm-check:hover svg,
  .envelope:not(.open):hover .env-flap-closed, button.sm-px:hover:not(:disabled) { transform: none; }
  .project .project-link:hover { background: var(--ink); }
  .project-media:hover { transform: rotate(var(--tilt)); box-shadow: 0 2px 4px rgba(29,26,23,.08), 0 22px 44px -18px rgba(29,26,23,.35); }
  .project a, .nav-menu a, .btn, .quote, .envelope { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}