@font-face {
  font-family: Anywhat;
  src: url(anywhat-display.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
:root {
  --edge: 24px;
  --gap: 24px;
  --display: clamp(64px, 10vw, 144px);
  --small-display: 52px;
  --pill: #e4e4e2;
  --muted: #686866;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0 var(--edge) var(--edge); color: #000; background: #fff; font: 400 18px/1.3 Helvetica, Arial, sans-serif; letter-spacing: -.01em; }
p, h1, h2, h3, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid #171717; outline-offset: 4px; }
.skip { position: fixed; top: 4px; left: 4px; z-index: 3; background: #fff; padding: 8px; transform: translateY(-150%); }
.skip:focus { transform: none; }
[id] { scroll-margin-top: 110px; }
h2, h3, .display {
  font: 500 var(--small-display)/.92 Anywhat, sans-serif;
  font-variation-settings: "slnt" 0;
  text-transform: uppercase;
  letter-spacing: normal;
}
.display { font-size: var(--display); line-height: .9; overflow-wrap: anywhere; }
.display em { font-style: normal; font-variation-settings: "slnt" -10; }
.pill {
  display: inline-block; padding: 6px 12px 7px; border-radius: 8px;
  background: var(--pill); text-decoration: none; white-space: nowrap;
  font-family: Helvetica, Arial, sans-serif;
}
button, input, select, textarea, summary { font-family: Helvetica, Arial, sans-serif; }
.pill:hover { background: #d6d6d4; }
.active, .active:hover { background: #333; color: #fff; }
.site-header {
  position: sticky; top: 0; z-index: 20; height: 102px; padding: 24px 10px 0;
  display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.desktop-nav { display: flex; gap: 6px; padding: 10px; margin-left: -10px; }
.site-header > .pill { margin-top: 10px; }
.site-header .pill {
  background: rgb(228 228 226 / 55%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header .pill:hover { background: rgb(214 214 212 / 75%); }
.site-header .pill.active { background: rgb(0 0 0 / 80%); color: #fff; }
.mobile-nav { display: none; }
main:not(.legal) { padding-top: 20px; }
.work { margin-top: 216px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 72px var(--gap); }
.case.full { grid-column: 1 / -1; }
.case-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.case-link { display: block; text-decoration: none; }
.case-link:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; }
.case-media { position: relative; min-height: clamp(420px, 54.167vw, 780px); border-radius: 8px; overflow: hidden; background: #e9e9e7; }
.case.half .case-media { min-height: clamp(460px, 61.111vw, 880px); }
#case-dopamin .case-media { min-height: clamp(420px, 48.611vw, 700px); }
.case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.updates { margin-top: 120px; display: grid; grid-template-columns: minmax(110px, 220px) minmax(0, 1fr); gap: var(--gap); }
.update-track { display: flex; gap: var(--gap); overflow: auto; scrollbar-width: none; }
.update { flex: 0 0 340px; align-self: start; background: #f2f2f0; border-radius: 8px; padding: 14px 14px 16px; }
.update > div { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.update .pill { background: #fff; }
.studio, .services, .index { margin-top: 200px; }
.studio p { max-width: calc((100% - var(--gap)) / 2); margin: 40px 0 20px; }
.services { display: grid; gap: var(--gap); grid-template-columns: repeat(3,minmax(0,1fr)); }
.services article { border-top: 1px solid; padding-top: 14px; }
.services h2 { margin-bottom: 16px; overflow-wrap: anywhere; }
.index header { display: flex; justify-content: space-between; align-items: end; padding-bottom: 16px; }
.index li > a { display: grid; text-decoration: none; grid-template-columns: minmax(70px,220px) minmax(0,1fr) minmax(100px,340px); gap: var(--gap); padding: 10px 0; border-top: 1px solid #d9d9d7; }
.index li a:hover span:nth-child(2) { text-decoration: underline; }
.index:not(.index-expanded) li:nth-child(n+7) { display: none; }
.index li span:first-child, .index li span:last-child, .site-footer > p { color: var(--muted); }
.contact { margin: 240px 0 120px; }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.site-footer nav { display: flex; gap: 8px; flex-wrap: wrap; }
.inner-page { padding-bottom: 64px; }
.inner-page > .display, .inner-page > header { margin-top: 40px; }
.inner-page > .index, .inner-page > .studio, .inner-page > .services { margin: 40px 0; }
.project-copy { max-width: 56rem; }
.project-subheading { margin-top: 28px; font-size: 36px; }
.project-copy p { margin: 20px 0; white-space: pre-line; }
.project-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.project-facts dt { color: var(--muted); }
.project-facts dd { margin: 4px 0 0; white-space: pre-line; }
.project-gallery { display: grid; gap: 24px; margin-top: 32px; }
.project-gallery img, .project-gallery video { display: block; width: 100%; max-height: 85vh; object-fit: contain; border-radius: 8px; }
.legal { max-width: 45rem; margin: 24px auto; }
.legal h1, .legal h2 { font: inherit; font-weight: 700; margin: 24px 0 8px; text-transform: none; }

@media (max-width: 760px) {
  :root { --edge: 14px; --display: 52px; }
  .site-header { height: 82px; padding: 14px 0 0; }
  .desktop-nav, .site-header > .pill { display: none; }
  .mobile-nav { display: flex; width: 100%; justify-content: space-between; align-items: start; }
  .menu { position: relative; }
  summary.pill { cursor: pointer; list-style: none; }
  summary.pill::-webkit-details-marker { display: none; }
  .menu nav { position: absolute; right: 0; top: calc(100% + 8px); display: grid; gap: 6px; }
  main:not(.legal) { padding-top: 14px; }
  .display { line-height: .92; }
  .work { margin-top: 72px; grid-template-columns: 1fr; gap: 48px; }
  .case-title { gap: 8px; margin-bottom: 10px; }
  .case .case-media, .case.half .case-media, #case-dopamin .case-media { min-height: 460px; }
  .updates { display: block; margin-top: 96px; }
  .updates > h2 { margin-bottom: 10px; }
  .update-track { display: grid; gap: 10px; overflow: visible; }
  .update { padding: 12px 12px 14px; }
  .update > div { gap: 10px; margin-bottom: 10px; }
  .update:last-child { display: none; }
  .studio, .services, .index { margin-top: 120px; }
  .studio p { max-width: none; margin: 24px 0; }
  .services { grid-template-columns: 1fr; gap: 32px; }
  .services article { padding-top: 12px; }
  .services h2 { margin-bottom: 12px; }
  .services li { display: inline; }
  .services li + li::before { content: ", "; }
  .index header { padding-bottom: 12px; }
  .index li > a { grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; padding: 9px 0; }
  .index li span:last-child { text-align: right; }
  .index:not(.index-expanded) li:nth-child(n+6) { display: none; }
  .contact { margin: 140px 0 80px; }
  .contact a { word-break: normal; }
}

/* V3 */
.brand-link { display:inline-flex; align-items:center; border-radius:8px; background:#1c1c1c; padding:0 5px; }
.brand-link span { display:block; position:relative; width:100px; height:36px; overflow:hidden; }
.brand-link img { position:absolute; max-width:none; left:-29px; top:-57px; }
.v3-hero-break { display:none; }
@media (min-width:1100px) { .v3-hero-break { display:inline; } }
.site-header { height:150px; padding:24px 0 0; }
.desktop-nav { margin:0; padding:0; }
.site-header > .pill { margin:0; }
.v3-home .display { overflow-wrap:normal; }
.v3-hero-info { display:grid; grid-template-columns:minmax(0,769px) 184px; justify-content:space-between; gap:24px; margin:56px 0 72px; }
.v3-showreel { height:clamp(480px,52.78vw,760px); background:#e9e9e7; border-radius:8px; }
.v3-section { margin-top:180px; }
.v3-section-title { border-top:1px solid #000; padding-top:12px; margin:0 0 56px; font:inherit; text-transform:none; }
.v3-cases { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:120px var(--gap); }
.v3-case { min-width:0; }
.v3-case .case-media { min-height:0; height:clamp(400px,44.45vw,640px); }
.v3-case.case-1,.v3-case.case-2 { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,2.05fr) minmax(0,1fr); align-items:end; gap:var(--gap); }
.v3-case.case-2 { grid-template-columns:minmax(0,1fr) minmax(0,2.05fr); }
.v3-case.case-2 > :first-child { grid-column:2; grid-row:1; }
.v3-case.case-2 .v3-caption { grid-column:1; grid-row:1; }
.v3-case.case-3 .case-media { height:clamp(420px,54.17vw,780px); }
.v3-case.case-4 .case-media { height:clamp(340px,38.89vw,560px); }
.v3-caption { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:16px; }
.case-1 .v3-caption,.case-2 .v3-caption { align-items:start; flex-direction:column; gap:10px; }
.case-number,.v3-principles article > span,.v3-founder > p,.v3-services > p,.v3-services article p { color:var(--muted); }
.v3-principles article { display:grid; grid-template-columns:1fr 2.07fr 1fr; gap:var(--gap); padding:16px 0 28px; border-top:1px solid #d9d9d7; }
.v3-founder { display:grid; grid-template-columns:1fr 3.15fr; gap:var(--gap); margin-top:56px; }
.v3-founder h3 { margin-bottom:12px; }
.v3-founder h3 em { font-style:normal; font-variation-settings:"slnt" -10; }
.v3-founder div p { max-width:566px; }
.v3-services { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.v3-services article p { margin:16px 0; }
.v3-contact { margin-top:360px; }
.contact-layout { display:grid; grid-template-columns:1fr 3.15fr; gap:var(--gap); margin-top:56px; }
.contact-meta p + p { margin-top:22px; }
.contact-form { display:grid; gap:36px; }
.contact-form .form-line { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; min-width:0; padding:0; margin:0; border:0; }
.contact-form .form-line label,.contact-form legend { font:500 18px/1.35 Helvetica, Arial, sans-serif; }
.contact-form fieldset { display:flex; align-items:center; }
.contact-form fieldset legend { float:left; margin-right:14px; padding:0; }
.contact-form .form-line input { width:min(100%,250px); padding:0 0 3px; border:0; border-bottom:1px solid #aaa; border-radius:0; font:inherit; text-transform:none; color:#000; }
.contact-form .form-line input[name=company] { width:min(100%,330px); }
.contact-form .form-line input[name=email] { width:min(100%,520px); }
.topic-pills { display:flex; flex-wrap:wrap; gap:8px; }
.contact-form .topic-pills label { font:inherit; text-transform:none; position:relative; }
.topic-pills input { position:absolute; opacity:0; }
.topic-pills span,.contact-form button { display:inline-block; border-radius:8px; background:var(--pill); padding:10px 16px; cursor:pointer; }
.topic-pills input:checked + span,.contact-form button { background:#000; color:#fff; }
.topic-pills input:focus-visible + span { outline:2px solid #000; outline-offset:3px; }
.contact-form textarea { min-height:220px; padding:14px 16px; border:0; border-radius:8px; background:#f0f0ee; font:inherit; resize:vertical; }
.contact-form button { justify-self:start; border:0; font:inherit; }
.contact-form button:disabled { opacity:.65; cursor:wait; }
.form-privacy { display:flex; align-items:center; gap:8px; }
.contact-result:empty { display:none; }
.v3-footer { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:var(--gap); border-top:1px solid #000; padding-top:12px; margin-top:180px; }
.v3-footer nav { display:grid; gap:2px; }
.cookie-link { background:none; border:0; padding:0; color:inherit; font:inherit; text-align:left; text-decoration:underline; cursor:pointer; }
.cookie-notice { position:fixed; z-index:5; left:var(--edge); bottom:var(--edge); display:flex; align-items:flex-end; gap:16px; width:min(480px,calc(100% - 2 * var(--edge))); padding:16px; border:1px solid #d9d9d7; border-radius:12px; background:#fff; box-shadow:0 4px 24px #0002; font-size:15px; }
.cookie-notice[hidden] { display:none; }
.cookie-notice p { margin:4px 0; }
.cookie-notice button { border:0; font:inherit; cursor:pointer; }
.v3-legal { max-width:none; margin:0; padding-top:24px; }
.legal-top { border-top:1px solid #000; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; padding-top:12px; }
.legal-top nav { display:flex; gap:6px; }
.v3-legal h1 { margin:52px 0 80px; }
.legal-rows section { display:grid; grid-template-columns:1fr 3.15fr; gap:var(--gap); padding:14px 0 24px; border-top:1px solid #d9d9d7; }
.legal-rows h2 { margin:0; font:inherit; color:var(--muted); text-transform:none; }
.legal-rows section > div { max-width:760px; }
.legal-rows p + p { margin-top:12px; }
.leftovers-feed { columns:3 240px; column-gap:24px; margin-top:32px; }
.leftovers-feed article { break-inside:avoid; margin-bottom:24px; }
.leftovers-feed img,.leftovers-feed video { display:block; width:100%; height:auto; margin-bottom:12px; border-radius:8px; }
@media (max-width:760px) {
  .site-header { height:96px; padding:16px 0 0; }
  .v3-hero-info { display:grid; grid-template-columns:1fr; gap:12px; margin:clamp(116px,28vw,180px) 0 40px; }
  .v3-hero-info ul { display:none; }
  .v3-showreel { height:480px; }
  .v3-section,.v3-contact { margin-top:112px; }
  .v3-section-title { margin-bottom:32px; }
  .v3-cases { grid-template-columns:1fr; gap:64px; }
  .v3-case.case-1,.v3-case.case-2 { display:block; }
  .v3-case.case-1 .case-media,.v3-case.case-2 .case-media,.v3-case.case-3 .case-media,.v3-case.case-4 .case-media { min-height:0; height:440px; }
  .v3-case.case-2 .case-media,.v3-case.case-4 .case-media { height:340px; }
  .v3-caption,.case-1 .v3-caption,.case-2 .v3-caption { flex-direction:row; align-items:baseline; gap:6px 12px; }
  .v3-caption .pill { margin-right:100%; }
  .v3-principles article,.v3-founder,.v3-services,.contact-layout,.legal-rows section { grid-template-columns:1fr; gap:12px; }
  .v3-principles article > span,.v3-services > p { display:none; }
  .v3-founder { margin-top:32px; }
  .v3-services article + article { margin-top:14px; }
  .v3-services article p { margin:9px 0; }
  .contact-layout { margin-top:32px; }
  .contact-meta { order:2; margin-top:28px; }
  .contact-form { gap:24px; }
  .contact-form .form-line label { display:block; width:100%; }
  .contact-form .form-line input { display:block; }
  .contact-form fieldset legend { float:none; margin-bottom:8px; }
  .contact-form textarea { min-height:180px; }
  .v3-footer { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:112px; }
  .v3-legal h1 { margin:40px 0 52px; }
  .menu nav { position:fixed; inset:64px var(--edge) auto; padding:20px; border-radius:12px; background:rgb(228 228 226 / 82%); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
  .menu nav > div { display:grid; grid-template-columns:40px 1fr; align-items:baseline; border-bottom:1px solid #0002; padding:8px 0; }
  .menu nav > div .pill { padding:0; background:none; color:#000; font:500 26px/1.18 Helvetica, Arial, sans-serif; }
  .menu nav > div span { color:var(--muted); }
  .menu-email { display:block; margin:12px 0; }
  .menu summary span + span,.menu[open] summary span:first-child { display:none; }
  .menu[open] summary span + span { display:inline; }
}
.v3-footer > div,.contact-meta .social-links { display:grid; }
.menu .social-links { display:flex; gap:12px; margin-bottom:10px; }
.v3-legal h1::after { content:"."; }
.case-dialog { padding:0; border:1px solid #d9d9d7; border-radius:12px; width:min(1200px,calc(100% - 32px)); max-width:none; max-height:calc(100% - 32px); box-shadow:0 16px 60px #0003; }
.case-dialog::backdrop { background:#fff8; backdrop-filter:blur(8px); }
.case-dialog-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:0; z-index:1; border-bottom:1px solid #d9d9d7; padding:8px 14px; background:#fff; color:var(--muted); }
.case-dialog-bar button { width:32px; height:32px; border:0; border-radius:50%; background:#e9e9e7; cursor:pointer; color:#000; font:inherit; }
.case-dialog-content { padding:clamp(16px,3vw,34px); }
.case-dialog-content .display { margin-bottom:20px; }

/* Navigation and Leftovers */
@media (min-width:761px) {
  .site-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; }
  .desktop-brand { justify-self:start; }
  .site-header > .pill { justify-self:end; }
  .desktop-nav .pill,.site-header > .pill { font:500 16px/1.35 Helvetica, Arial, sans-serif; }
  .desktop-nav .pill.active { font-weight:400; font-style:italic; }
}
.leftovers-top { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid #000; padding-top:12px; }
.leftovers-switch { display:flex; gap:3px; padding:3px; border-radius:10px; background:#e4e4e2; }
.leftovers-switch button,.leftovers-filters button,.leftovers-dialog button { font:inherit; border:0; cursor:pointer; }
.leftovers-switch button:not(.active) { background:transparent; }
.leftovers-intro { display:grid; grid-template-columns:1fr minmax(200px,24%); gap:24px; align-items:end; margin:56px 0 42px; }
.leftovers-intro p { color:var(--muted); max-width:235px; }
.leftovers-filters { display:flex; gap:6px; }
.leftovers-feed { column-count:4; column-gap:18px; margin-top:24px; }
.leftovers-feed article { margin:0 0 18px; }
.leftovers-feed article[hidden] { display:none; }
.leftovers-feed a { display:block; position:relative; overflow:hidden; border-radius:8px; background:#e9e9e7; }
.leftovers-feed img { margin:0; }
.media-duration { position:absolute; top:10px; right:10px; padding:4px 9px; border-radius:7px; color:#fff; background:#111d; font-size:15px; }
/* Story viewer */
.leftovers-dialog {
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0; overflow:hidden; color:#fff; background:#111;
}
.leftovers-dialog::backdrop { background:#080808; }
.leftovers-dialog-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:12px var(--edge); }
.leftovers-dialog-top > button { justify-self:end; }
.story-brand { display:block; position:relative; width:100px; height:36px; overflow:hidden; border-radius:8px; background:#1c1c1c; }
.story-brand img { position:absolute; left:-29px; top:-57px; }
.leftovers-dialog .leftovers-switch { background:#4a4a4a; }
.leftovers-dialog button { color:#fff; background:#282828; }
.leftovers-dialog button:disabled { opacity:.4; cursor:default; }
.story-layout { position:relative; width:fit-content; margin:6px auto 0; }
.story-card { position:relative; width:min(448px,calc((100dvh - 108px) * .5625),calc(100vw - 110px)); aspect-ratio:9 / 16; overflow:hidden; border-radius:12px; background:#1c1c1c; touch-action:none; }
.leftovers-viewer { position:absolute; inset:0; display:grid; align-items:center; }
.leftovers-viewer img,.leftovers-viewer video { display:block; width:100%; height:auto; max-width:none; max-height:none; }
.story-tap { position:absolute; inset:0 auto 0 0; width:42%; padding:0; background:transparent!important; }
.story-tap-next { inset:0 0 0 auto; }
.story-chrome { position:absolute; inset:0; display:flex; flex-direction:column; padding:12px; pointer-events:none; }
.story-progress { width:100%; height:3px; appearance:none; border:0; border-radius:9px; background:#fff5; color:#fff; }
.story-progress::-webkit-progress-bar { background:#fff5; border-radius:9px; }
.story-progress::-webkit-progress-value { background:#fff; border-radius:9px; }
.story-progress::-moz-progress-bar { background:#fff; border-radius:9px; }
.story-controls { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; margin-top:8px; }
.story-controls button { pointer-events:auto; background:#111d; font-size:.82rem; }
.story-title { align-self:flex-start; margin-top:auto; padding:5px 8px; border-radius:5px; background:#111d; font-size:.85rem; }
.leftovers-dialog-actions { position:absolute; top:50%; left:calc(100% + 12px); display:grid; gap:6px; transform:translateY(-50%); }
.story-hint { margin:8px var(--edge); text-align:center; color:#b8b8b8; font-size:.8rem; }
.leftovers-feed a > video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; pointer-events:none; }
.leftovers-feed a > video.playing { opacity:1; }
.leftovers-switch button:focus,.leftovers-filters button:focus,.leftovers-dialog button:focus { outline:0; }
.leftovers-switch button:focus-visible,.leftovers-filters button:focus-visible { box-shadow:inset 0 0 0 2px #838c78; }
.leftovers-dialog button:focus-visible { box-shadow:inset 0 0 0 2px #fff9; }
.contact-form .form-line label { display:flex; align-items:baseline; gap:12px; min-width:0; }
.contact-form .form-line label > span { flex:none; }
.contact-form .form-line input { width:100%; min-width:0; font:400 18px/1.35 Helvetica, Arial, sans-serif; }
.contact-form .identity-line { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.contact-form .identity-line input[name=company] { width:100%; }
.contact-form .email-line label { width:min(100%,700px); }
.contact-form .email-line input[name=email] { width:100%; }
@media (max-width:1020px) {
  .contact-form .identity-line { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .desktop-brand { display:none; }
  .menu nav > div { display:block; padding:9px 0; }
  .menu nav > div .pill,.menu nav > div .pill:hover,.menu nav > div .pill.active { display:block; width:fit-content; color:#000; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .menu nav > div .pill.active { margin-left:clamp(20px,13vw,58px); font-style:italic; font-weight:400; }
  .menu nav > div:last-of-type { border-bottom:0; }
  .menu summary.pill { font:500 16px/1.35 Helvetica, Arial, sans-serif; }
  .menu .menu-email { margin:24px 0 2px; text-decoration:none; }
  .menu .social-links { color:var(--muted); gap:8px; }
  .menu .social-links a { text-decoration:none; }
  .menu nav > .pill { display:block; text-align:center; background:#000; color:#fff; }
  .leftovers-intro { grid-template-columns:1fr; gap:14px; margin:42px 0 26px; }
  .leftovers-feed { column-count:2; column-gap:10px; margin-top:16px; }
  .leftovers-feed article { margin-bottom:10px; }
  .media-duration { top:6px; right:6px; padding:2px 6px; font-size:12px; }
  .story-card { width:min(100vw,calc((100dvh - 96px) * .5625)); border-radius:8px; }
  .leftovers-dialog-actions { display:none; }
  .leftovers-dialog-top { gap:4px; padding-inline:10px; font-size:.84rem; }
  .story-brand { width:84px; }
  .story-brand img { left:-32px; }
  .contact-form .form-line label { display:grid; gap:6px; }
  .contact-form .form-line input { font-size:18px; }
}
@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth; }
  .pill,.brand-link,.cookie-link { transition:background-color .2s ease,color .2s ease,opacity .2s ease; }
  .case-media img,.leftovers-feed img { transition:transform .42s cubic-bezier(.22,1,.36,1); }
  .case-link:hover img,.leftovers-feed a:hover img { transform:scale(1.025); }
  .case-dialog[open],.leftovers-dialog[open] .story-card,.cookie-notice:not([hidden]) { animation:studio-enter .28s cubic-bezier(.22,1,.36,1) both; }
  .contact-form input,.contact-form textarea,.topic-pills span { transition:border-color .2s ease,background-color .2s ease,color .2s ease; }
  @keyframes studio-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
}

@media (min-width:1100px) {
  .v3-home > h1[data-type-intro] { font-size:clamp(140px,13.5vw,236px); }
}
.pixel-media { position:relative; min-width:0; }
.pixel-layer {
  position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; border-radius:inherit;
  background:repeating-conic-gradient(#dededb 0 25%,#e9e9e7 0 50%) 0 0 / 22px 22px;
  image-rendering:pixelated; object-fit:contain; transition:opacity .15s linear;
}
.pixel-layer.pixel-sampled { background:transparent; }
.pixel-layer.pixel-sharp { opacity:0; }
.case-media .pixel-layer { object-fit:cover; }
.leftovers-feed .media-duration { z-index:2; }

.leftovers-feed article { position:relative; }
.tile-fullscreen {
  position:absolute; z-index:3; right:9px; bottom:9px; min-width:34px; min-height:34px;
  padding:4px 7px; border:0; border-radius:7px; background:#111d; color:#fff; cursor:pointer;
  font:400 19px/1 Helvetica, Arial, sans-serif;
}
.tile-fullscreen:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
@media (min-width:761px) {
  .leftovers-dialog-top { min-height:72px; }
  .story-layout { margin-top:8px; }
  .story-card { width:min(448px,calc((100dvh - 104px) * .5625),calc(100vw - 110px)); }
  .story-hint { position:absolute; left:0; bottom:13px; text-align:left; }
}
.leftovers-viewer { display:flex; align-items:center; justify-content:center; }
.leftovers-viewer > * { width:100%; }

.leftovers-dialog.media-fullscreen .story-card { width:100%; height:100%; aspect-ratio:auto; border-radius:0; background:#111; }

.leftovers-dialog.media-fullscreen .leftovers-dialog-actions,.leftovers-dialog.media-fullscreen .story-hint { display:none; }
@media (max-width:760px) {
  .tile-fullscreen { right:6px; bottom:6px; }
}

:root {
  --leftovers-switch-top: calc(70px + env(safe-area-inset-top, 0px));
  --story-top: calc(var(--leftovers-switch-top) + 48px);
}
.leftovers-top .leftovers-switch,.leftovers-dialog .leftovers-switch {
  position:fixed; top:var(--leftovers-switch-top); left:50%; transform:translateX(-50%);
  z-index:4; width:max-content; padding:4px; gap:4px; border:1px solid #d6d6d4;
  background:#e4e4e2; color:#171717; font:400 16px/1.25 Helvetica, Arial, sans-serif;
}
.leftovers-switch .pill { display:block; flex:0 0 74px; width:74px; padding:6px 0; line-height:20px; text-align:center; border-radius:6px; }
.leftovers-switch .pill:not(.active),.leftovers-dialog .leftovers-switch button:not(.active) { color:#171717; background:transparent; }
.leftovers-filters .pill:not(.active) { color:#171717; }
.leftovers-switch .pill.active,.leftovers-filters .pill.active { color:#fff; background:#202020; }
.leftovers-switch .pill:not(.active):hover,.leftovers-filters .pill:not(.active):hover { background:#d6d6d4; }
.leftovers-switch .pill,.leftovers-filters .pill,.leftovers-feed a,.leftovers-feed button,.leftovers-dialog button {
  -webkit-tap-highlight-color:transparent;
}
.leftovers-switch .pill,.leftovers-filters .pill { appearance:none; }
.leftovers-switch button:focus-visible,.leftovers-filters button:focus-visible { box-shadow:inset 0 0 0 2px #777; }
body:has(.menu[open]) .leftovers-top .leftovers-switch { visibility:hidden; }
.leftovers-dialog-top { display:block; height:var(--story-top); padding:12px var(--edge) 0; }
.leftovers-dialog .story-layout { margin-top:0; }
.story-card { width:min(448px,calc((100dvh - var(--story-top) - 18px) * .5625),calc(100vw - 110px)); }
.story-controls { flex-wrap:nowrap; gap:5px; }
.story-controls button,.leftovers-dialog-actions button,.tile-fullscreen { display:inline-grid; place-items:center; padding:0; width:35px; height:35px; }
.media-icon { display:block; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.media-duration { display:flex; align-items:center; gap:4px; }
.media-duration .media-icon { width:12px; height:12px; fill:currentColor; }
[data-story-play][data-state="pause"] .icon-play,[data-story-play][data-state="play"] .icon-pause,
[data-story-sound][data-state="sound"] .icon-muted,[data-story-sound][data-state="muted"] .icon-sound,
[data-story-fullscreen][aria-pressed="false"] .icon-collapse,[data-story-fullscreen][aria-pressed="true"] .icon-expand { display:none; }
.story-controls button[hidden] { display:none; }

@media (max-width:760px) {
  :root { --leftovers-switch-top: calc(64px + env(safe-area-inset-top, 0px)); }
  .leftovers-feed { column-count:2; column-width:auto; }
  .story-card { width:min(100vw,calc((100dvh - var(--story-top) - 30px) * .5625)); }
  .story-controls button { width:36px; height:36px; }
}

@media (prefers-reduced-motion:no-preference) {
  .menu[open] nav { transform-origin:top center; animation:menu-open .32s cubic-bezier(.2,.72,.22,1) both; }
  @keyframes menu-open { from { opacity:0; transform:translateY(-12px) scaleY(.96); } to { opacity:1; transform:none; } }
}
.story-controls .zoom-control { display:none; }
.leftovers-dialog.media-fullscreen .leftovers-dialog-top,
.leftovers-dialog.media-fullscreen .story-tap,
.leftovers-dialog.media-fullscreen .story-progress { display:none; }
.leftovers-dialog.media-fullscreen .story-layout { width:100%; height:100%; margin:0; }
.leftovers-dialog.media-fullscreen .leftovers-viewer { overflow:hidden; background:#000; touch-action:none; user-select:none; }
.leftovers-dialog.media-fullscreen .leftovers-viewer img,.leftovers-dialog.media-fullscreen .leftovers-viewer video {
  width:100%; height:100%; object-fit:contain; pointer-events:none; transform-origin:center;
}
.leftovers-dialog.media-fullscreen .leftovers-viewer.is-zoomed { cursor:grab; }
.leftovers-dialog.media-fullscreen .leftovers-viewer.is-zoomed:active { cursor:grabbing; }
.leftovers-dialog.media-fullscreen .story-chrome {
  padding:calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.leftovers-dialog.media-fullscreen .story-controls .zoom-control { display:inline-grid; }

/* Language controls share the menu's type and stay visible on mobile. */
.desktop-actions,.mobile-actions,.language-switch { display:flex; align-items:center; gap:6px; }
.desktop-actions { justify-self:end; }
.language-switch { gap:2px; }
.site-header .language-switch .pill,.desktop-actions > .pill {
  font:400 16px/1.35 Helvetica, Arial, sans-serif;
}
.site-header .language-switch .pill { padding-inline:7px; }
a.pill.active,.site-header .language-switch .pill.active {
  font-weight:400; font-style:italic;
}

@media (max-width:760px) {
  .desktop-actions { display:none; }
  .v3-home > h1[data-type-intro] { font-size:clamp(58px,16vw,94px); }
}

@media (min-width:761px) {
  .leftovers-dialog:not(.media-fullscreen) .leftovers-dialog-top {
    position:absolute; inset:0 0 auto; height:auto; z-index:4; pointer-events:none;
  }
  .leftovers-dialog .leftovers-switch { pointer-events:auto; }
  .leftovers-dialog:not(.media-fullscreen) .story-chrome { padding-top:var(--story-top); }
  .leftovers-dialog:not(.media-fullscreen) .story-card {
    --story-height:100dvh;
    width:min(calc(var(--story-height) * var(--media-ratio, .5625)),calc(100vw - 110px));
    height:var(--story-height);
    aspect-ratio:auto;
  }
  .leftovers-dialog:not(.media-fullscreen) .leftovers-viewer :is(img,video) {
    width:100%; height:100%; object-fit:contain;
  }
}

@media (min-width:761px) and (max-width:1060px) {
  .site-header { display:flex; justify-content:space-between; gap:6px; }
  .desktop-nav .pill,.desktop-actions > .pill { font-size:14px; padding-inline:7px; }
  .site-header .language-switch .pill { font-size:14px; padding-inline:5px; }
}