@font-face {
  font-family: "PP Neue Montreal";
  src: url("/public/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --paper: #f5f3ef;
  --paper-deep: #e9e7e2;
  --ink: #202629;
  --muted: #74797b;
  --line: rgba(32, 38, 41, 0.18);
  --line-soft: rgba(32, 38, 41, 0.1);
  --accent: #bb7254;
  --accent-soft: #e3b39d;
  --blue: var(--paper-deep);
  --blue-deep: var(--ink);
  --orange: var(--accent-soft);
  --orange-deep: var(--accent);
  --lime: var(--paper-deep);
  --purple: var(--paper-deep);
  --white: #fffdf9;
  --display: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: weight style;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; overflow-x: clip; overflow-y: auto; }

body { min-width: 320px; min-height: 100%; margin: 0; background: var(--paper); overflow-x: clip; overflow-y: auto; font-size: 18px; line-height: 1.45; }

body, button, a { cursor: default; }
a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { border: 0; color: inherit; font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); background: var(--ink); color: var(--paper); border-radius: 6px; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; min-height: 78px; padding: 18px clamp(22px, 5vw, 72px); border-bottom: 1px solid var(--line); background: rgba(244, 241, 234, .94); backdrop-filter: blur(16px); }
.page-progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; overflow: hidden; pointer-events: none; }
.page-progress span { display: block; width: 100%; height: 100%; background: var(--orange-deep); transform: scaleX(0); transform-origin: left; transition: transform .18s ease-out; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-family: var(--mono); font-size: .68rem; letter-spacing: .03em; white-space: nowrap; }
.wordmark em { font-family: var(--body); font-style: normal; color: var(--muted); }
.wordmark-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: .95rem; }
.main-nav { display: flex; align-items: center; gap: 23px; font-size: .78rem; }
.nav-link { position: relative; padding: 7px 0; color: var(--muted); }
.nav-link::after { position: absolute; right: 0; bottom: 1px; left: 0; height: 1px; transform: scaleX(0); transform-origin: right; background: var(--ink); content: ""; transition: transform .25s ease; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-contact { justify-self: end; padding: 9px 13px; border: 1px solid var(--ink); border-radius: 20px; font-size: .74rem; transition: background .2s ease, color .2s ease; }
.header-contact span { margin-left: 8px; }
.header-contact:hover { background: var(--ink); color: var(--paper); }

.section-pad { padding-right: clamp(22px, 5vw, 72px); padding-left: clamp(22px, 5vw, 72px); }
.eyebrow { margin: 0; color: var(--muted); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; }
.eyebrow-dot { display: flex; align-items: center; gap: 9px; }
.eyebrow-dot::before { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-deep); content: ""; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.section-heading p { margin: 0; }

.hero { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr); gap: clamp(40px, 8vw, 150px); min-height: min(680px, calc(100vh - 78px)); padding-top: clamp(74px, 10vw, 132px); padding-bottom: clamp(66px, 9vw, 120px); align-items: center; }
.hero-copy { max-width: 870px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; }
.hero h1 { max-width: 900px; margin: 22px 0 44px; font-size: clamp(3.25rem, 7vw, 6.8rem); line-height: .98; }
.hero h1 span { color: var(--orange-deep); }
.hero-bottomline { display: flex; align-items: flex-end; gap: 40px; }
.hero-intro { max-width: 465px; margin-bottom: 0; color: #45535a; font-size: clamp(1.05rem, 1.4vw, 1.23rem); line-height: 1.45; }
.round-link { display: grid; flex: 0 0 auto; place-items: center; width: 94px; height: 94px; padding: 12px; border: 1px solid var(--ink); border-radius: 50%; font-size: .66rem; line-height: 1.15; text-align: center; transition: background .25s ease, transform .25s ease; }
.round-link strong { margin-top: 5px; font-size: 1.2rem; font-weight: 400; }
.round-link:hover { background: var(--orange); transform: rotate(8deg); }
.hero-object { position: relative; min-height: 470px; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: 12px 14px 0 rgba(29, 43, 51, .11); }
.hero-object-chrome, .hero-object-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 16px; font-family: var(--mono); font-size: .61rem; letter-spacing: .05em; text-transform: uppercase; }
.hero-object-chrome { border-bottom: 1px solid rgba(244, 241, 234, .25); color: #aeb9ba; }
.hero-project-window { overflow: hidden; }
.hero-project-track { display: flex; width: 300%; transition: transform .62s cubic-bezier(.2, .8, .2, 1); }
.hero-project-panel { flex: 0 0 33.333333%; min-width: 0; padding: 14px 16px 12px; }
.hero-panel-media { position: relative; overflow: hidden; aspect-ratio: 1.03 / 1; background: var(--paper-deep); }
.hero-panel-media img { width: 100%; height: 100%; object-fit: cover; }
.panel-metro .hero-panel-media img { filter: grayscale(.15); mix-blend-mode: multiply; }
.panel-carrot .hero-panel-media { background: var(--paper-deep); }.panel-carrot .hero-panel-media img { object-fit: cover; }
.hero-media-note { position: absolute; top: 12px; left: 12px; padding: 5px 7px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: .55rem; letter-spacing: .05em; }
.hero-media-metric { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; min-width: 105px; padding: 10px; background: var(--orange); color: var(--ink); font-family: var(--display); font-size: 1.9rem; font-weight: 500; line-height: .95; letter-spacing: -.02em; }
.hero-media-metric small { margin-top: 7px; font-family: var(--mono); font-size: .55rem; font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.hero-panel-copy { padding: 19px 2px 3px; }.hero-panel-copy h2 { margin: 10px 0 7px; color: var(--paper); font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: .98; }.hero-panel-copy p:last-child { max-width: 340px; margin: 0; color: #b9c5c4; font-size: .82rem; line-height: 1.4; }
.panel-carrot .hero-panel-copy h2 { color: var(--orange); }.panel-snoots .hero-panel-copy h2 { color: var(--lime); }
.hero-snoots-canvas { display: grid; place-items: center; aspect-ratio: 1.03 / 1; background: var(--lime); }
.hero-object-footer { min-height: 55px; border-top: 1px solid rgba(244, 241, 234, .25); color: #aeb9ba; }.hero-object-tabs { display: flex; gap: 6px; }.hero-object-tab { padding: 6px 8px; background: transparent; color: #aeb9ba; font-family: var(--mono); font-size: .58rem; }.hero-object-tab:hover, .hero-object-tab.is-active { color: var(--paper); background: rgba(244, 241, 234, .14); }.hero-object-next { padding: 6px 0 6px 10px; background: transparent; color: var(--orange); font-family: var(--mono); font-size: .6rem; text-transform: uppercase; }.hero-object-next span { margin-left: 5px; font-size: 1rem; transition: transform .2s ease; }.hero-object-next:hover span { display: inline-block; transform: translateX(3px); }



.intro-strip { display: grid; grid-template-columns: minmax(110px, .25fr) minmax(0, 1.3fr) minmax(230px, .7fr); gap: 40px; padding-top: 68px; padding-bottom: 88px; border-top: 1px solid var(--line); }
.intro-statement { max-width: 750px; margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3.1vw, 3.1rem); line-height: 1.12; letter-spacing: -.02em; }
.capability-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 9px; }
.capability-list span, .about-traits span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: .74rem; }

.work-section { padding-top: 34px; padding-bottom: 110px; }
.featured-projects { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; padding-top: 28px; }
.project-card { display: block; overflow: hidden; border: 1px solid var(--line); background: var(--white); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.project-card:hover { transform: translateY(-8px); box-shadow: 0 20px 45px rgba(29, 43, 51, .14); }
.project-card-top { display: flex; justify-content: space-between; gap: 15px; padding: 18px 19px 0; color: var(--muted); font-family: var(--mono); font-size: .66rem; }
.badge { display: inline-flex; align-items: center; min-height: 22px; width: fit-content; padding: 4px 8px; border-radius: 20px; font-family: var(--mono); font-size: .6rem; letter-spacing: .03em; text-transform: uppercase; }
.badge-light { background: rgba(255, 253, 249, .65); color: var(--ink); }
.badge-dark { background: var(--ink); color: var(--paper); }
.project-card-art { position: relative; margin: 16px 18px 0; overflow: hidden; aspect-ratio: 1.56 / 1; background: var(--paper-deep); }
.project-card-art img { width: 100%; height: 100%; object-fit: cover; }
.metro-card-art img { object-position: center; filter: grayscale(.15); mix-blend-mode: multiply; }
.metro-card-overlay { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; max-width: 125px; padding: 10px; background: var(--ink); color: var(--paper); }
.metro-card-overlay span { font-family: var(--display); font-size: 1.7rem; letter-spacing: -.02em; }
.metro-card-overlay small { font-family: var(--mono); font-size: .56rem; line-height: 1.3; }
.carrot-card-art { background: #d49a5d; }
.carrot-card-art img { object-fit: cover; image-rendering: auto; }
.carrot-card-sticker { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: var(--lime); color: var(--ink); font-family: var(--display); font-size: 1.4rem; line-height: .85; text-align: center; transform: rotate(12deg); }
.carrot-card-sticker span { margin-top: 5px; font-family: var(--mono); font-size: .53rem; line-height: 1; text-transform: uppercase; }
.project-card-copy { position: relative; padding: 24px 20px 28px; }
.project-card-copy h2 { margin-bottom: 10px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.project-card-copy p { max-width: 430px; margin-bottom: 0; color: #566167; font-size: .92rem; line-height: 1.45; }
.card-arrow { position: absolute; right: 20px; bottom: 25px; font-size: 1.6rem; transition: transform .2s ease; }
.project-card:hover .card-arrow { transform: translate(4px, -4px); }
.project-blue { background: var(--paper-deep); }
.project-orange { background: var(--accent-soft); }
.snoots-card { display: grid; grid-template-columns: .26fr 1fr .8fr; gap: 25px; min-height: 230px; margin-top: 20px; padding: 25px; overflow: hidden; border: 1px solid var(--ink); background: var(--lime); }
.snoots-index { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.snoots-index > span:first-child { font-family: var(--mono); font-size: .68rem; }
.snoots-main { align-self: center; }
.snoots-main h2 { margin: 7px 0 8px; font-size: clamp(2.2rem, 4vw, 3.6rem); }
.snoots-main > p:not(.eyebrow) { max-width: 430px; margin-bottom: 20px; font-size: 1rem; line-height: 1.4; }
.snoots-meta { display: flex; flex-wrap: wrap; gap: 8px 17px; color: var(--muted); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }
.snoots-visual { position: relative; display: grid; place-items: center; min-height: 190px; border: 1px solid rgba(29,43,51,.5); background: rgba(255,253,249,.22); transform: rotate(3deg); }
.snoots-visual-word { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -.06em; line-height: .85; }
.snoots-label { position: absolute; right: 10px; bottom: 10px; font-family: var(--mono); font-size: .55rem; transform: rotate(-3deg); }

.process-teaser { padding-top: 30px; padding-bottom: 110px; border-top: 1px solid var(--line); }
.process-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; padding-top: 34px; }
.process-big { padding: 18px 0 25px; border-bottom: 1px solid var(--line); }
.process-number { color: var(--orange-deep); font-family: var(--mono); font-size: .72rem; }
.process-big h2 { max-width: 570px; margin: 55px 0 18px; font-size: clamp(2.8rem, 6vw, 6.2rem); line-height: .95; }
.process-big p { max-width: 430px; margin-bottom: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.process-steps { border-top: 1px solid var(--line); }
.process-steps > div { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.process-steps span { color: var(--orange-deep); font-family: var(--mono); font-size: .7rem; }
.process-steps strong { font-family: var(--display); font-size: 1.15rem; letter-spacing: -.02em; }
.process-steps p { grid-column: 2; margin: 3px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.4; }
.creative-invite { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; padding-top: 72px; padding-bottom: 76px; background: var(--ink); color: var(--paper); }
.creative-invite h2 { max-width: 550px; margin: 18px 0 0; font-size: clamp(2.1rem, 4.5vw, 4.6rem); line-height: .98; }
.link-light { color: var(--paper); border-bottom-color: rgba(244,241,234,.6) !important; }

.arrow-link { display: inline-flex; align-items: center; gap: 14px; width: fit-content; padding-bottom: 7px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: .71rem; text-transform: uppercase; }
.arrow-link .arrow { font-size: 1.2rem; transition: transform .2s ease; }
.arrow-link:hover .arrow { transform: translate(3px, -3px); }

.case-hero { padding-top: 55px; padding-bottom: 50px; }
.case-metro { background: var(--paper-deep); }.case-carrot { background: var(--accent-soft); }
.case-kicker { display: flex; gap: 9px; align-items: center; color: #4b606e; font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }
.case-kicker a { border-bottom: 1px solid currentColor; }
.case-title-wrap { max-width: 1000px; padding-top: 92px; }
.case-title-wrap h1 { max-width: 920px; margin: 18px 0 28px; font-size: clamp(3.1rem, 6.4vw, 6.6rem); line-height: .95; }
.case-deck { max-width: 690px; margin: 0; color: #41545f; font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.45; }
.case-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 105px; padding-top: 16px; border-top: 1px solid rgba(29,43,51,.45); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }
.case-meta span { display: flex; flex-direction: column; gap: 7px; color: #53636d; line-height: 1.45; }.case-meta strong { color: var(--ink); font-weight: 500; }
.case-body { min-width: 0; overflow: visible; }
.case-opening { max-width: 1240px; margin: 0 auto; padding: 88px clamp(22px, 5vw, 72px) 115px; }
.case-lede { max-width: 820px; margin: 0; font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3.8rem); line-height: 1.02; }
.evidence-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 75px; padding-top: 15px; border-top: 1px solid var(--line); }
.evidence-row div { display: flex; flex-direction: column; gap: 5px; }.evidence-row strong { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 3.1rem); letter-spacing: -.02em; }.evidence-row span { max-width: 120px; color: var(--muted); font-family: var(--mono); font-size: .7rem; line-height: 1.35; text-transform: uppercase; }
.case-section { display: grid; grid-template-columns: minmax(120px, .23fr) minmax(0, .77fr); gap: 45px; max-width: 1240px; margin: 0 auto; padding: 95px clamp(22px, 5vw, 72px); border-top: 1px solid var(--line); }
.case-section-label { display: flex; flex-direction: column; gap: 9px; color: var(--muted); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }.case-section-label span { color: var(--orange-deep); }.case-section-label p { margin: 0; }
.case-section-content { max-width: 770px; }.case-section-content h2 { margin-bottom: 22px; font-size: clamp(2.4rem, 4vw, 4.3rem); line-height: 1.02; }.case-section-content > p { max-width: 680px; color: #57636a; font-size: 1.08rem; line-height: 1.6; }
.finding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }.finding { min-height: 172px; padding: 20px; border: 1px solid var(--line); background: rgba(255,253,249,.45); }.finding span { display: block; color: var(--orange-deep); font-family: var(--display); font-size: 2.3rem; letter-spacing: -.02em; }.finding p { max-width: 230px; margin: 30px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.45; }.finding-primary { background: var(--ink); color: var(--paper); }.finding-primary p { color: #c7cecd; }.finding-quote { background: var(--orange); }.finding-quote span { color: var(--ink); font-size: 3.5rem; line-height: .6; }.finding-quote p { margin-top: 18px; color: var(--ink); font-family: var(--display); font-size: 1.2rem; letter-spacing: -.02em; }
.artifact-band { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(30px, 7vw, 100px); align-items: center; max-width: 1440px; margin: 0 auto; padding: 80px clamp(22px, 9vw, 140px); background: var(--paper-deep); }.artifact-band-ia { grid-template-columns: 1.35fr .65fr; background: var(--blue); }.artifact-band-ia .artifact-frame { order: -1; }.artifact-caption h3 { max-width: 330px; margin: 18px 0 14px; font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: .98; }.artifact-caption p:last-child { max-width: 350px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }.artifact-frame { margin: 0; padding: 12px; background: var(--white); box-shadow: 10px 12px 0 rgba(29,43,51,.1); }.artifact-frame img { width: 100%; max-height: 590px; object-fit: contain; object-position: center; }.artifact-frame figcaption, .game-frame figcaption, .game-gallery figcaption { padding: 9px 3px 0; color: var(--muted); font-family: var(--mono); font-size: .6rem; text-transform: uppercase; }
.priority-stack { margin-top: 38px; border-top: 1px solid var(--line); }.priority { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 17px 0; border-bottom: 1px solid var(--line); }.priority > span { display: inline-flex; justify-content: center; padding: 5px 6px; background: var(--paper-deep); font-family: var(--mono); font-size: .7rem; }.priority strong { display: block; margin-bottom: 3px; font-family: var(--display); font-size: 1.15rem; letter-spacing: -.02em; }.priority p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.45; }.p0 > span { background: var(--accent-soft); }.p1 > span, .p2 > span, .p3 > span { background: var(--paper-deep); }
.prototype-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 35px; }.prototype-card { min-height: 240px; padding: 23px; border: 1px solid var(--line); background: var(--orange); }.prototype-card-dark { background: var(--ink); color: var(--paper); }.prototype-tag { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; }.prototype-card h3 { margin: 58px 0 10px; font-size: 1.65rem; }.prototype-card p { color: #5a514c; font-size: .95rem; line-height: 1.45; }.prototype-card-dark p { color: #c7cecd; }.proto-line { display: flex; gap: 5px; margin-top: 24px; }.proto-line i { display: block; height: 5px; flex: 1; background: var(--orange-deep); }.prototype-card-dark .proto-line i { background: var(--blue); }
.ownership-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 35px; }.ownership-grid > div { padding-top: 15px; border-top: 1px solid var(--line); }.ownership-grid ul { margin: 15px 0 0; padding: 0; list-style: none; }.ownership-grid li { position: relative; margin: 0 0 12px; padding-left: 19px; color: var(--muted); font-size: .95rem; line-height: 1.5; }.ownership-grid li::before { position: absolute; top: .56em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-deep); content: ""; }
.outcome-block { max-width: 1240px; margin: 0 auto; padding: 95px clamp(22px, 5vw, 72px) 120px; }.case-outcome { background: var(--ink); color: var(--paper); }.case-outcome .eyebrow { color: #a9b4b6; }.case-outcome h2 { max-width: 720px; margin: 17px 0 20px; font-size: clamp(2.7rem, 5vw, 5.7rem); line-height: .95; }.case-outcome > p:not(.eyebrow) { max-width: 610px; color: #c5cdcd; font-size: 1rem; line-height: 1.5; }.outcome-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 36px; }.case-outcome .arrow-link { border-color: #a9b4b6; color: var(--paper); }.carrot-outcome { background: var(--orange); color: var(--ink); }.carrot-outcome .eyebrow { color: #6c4e40; }.carrot-outcome > p:not(.eyebrow) { color: #5e514b; }.carrot-outcome .arrow-link { border-color: var(--ink); }

.game-showcase { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 80px clamp(22px, 5vw, 72px); background: var(--paper-deep); }.game-showcase-copy h2 { margin: 17px 0 16px; font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.02; }.game-showcase-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1rem; line-height: 1.55; }.game-frame { margin: 0; padding: 10px; background: var(--ink); }.game-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }.game-frame figcaption { color: #9da6a6; }.control-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 30px; }.control-row span { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); font-family: var(--mono); font-size: .7rem; }.control-row small { color: var(--muted); font-family: var(--body); font-size: .8rem; }.playtest-quote { display: grid; grid-template-columns: 40px 1fr; gap: 16px; margin-top: 32px; padding: 20px; background: var(--orange); }.playtest-quote span { font-family: var(--display); font-size: 3.2rem; line-height: .7; }.playtest-quote p { margin: 0; font-family: var(--display); font-size: 1.35rem; letter-spacing: -.02em; }
.iteration-table { margin-top: 34px; border-top: 1px solid var(--line); }.iteration-table > div { display: grid; grid-template-columns: .65fr 1.3fr .9fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }.iteration-table .iteration-head { padding: 11px 0; color: var(--muted); font-family: var(--mono); font-size: .7rem; text-transform: uppercase; }.iteration-table strong { font-family: var(--display); font-size: 1.05rem; letter-spacing: -.02em; }.iteration-table p, .iteration-table small { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.45; }.iteration-table small { display: block; color: var(--orange-deep); font-family: var(--mono); font-size: .7rem; }.game-gallery { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; max-width: 1440px; margin: 0 auto; padding: 70px clamp(22px, 8vw, 120px); background: #c5824f; }.game-gallery figure { margin: 0; padding: 10px; background: var(--ink); }.game-gallery figure:first-child { transform: translateY(24px); }.game-gallery img { width: 100%; aspect-ratio: 1.5 / 1; object-fit: cover; }.game-gallery figcaption { color: #aab3b2; }

.creative-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); gap: 40px; align-items: center; min-height: 490px; padding-top: 85px; padding-bottom: 86px; background: var(--purple); }.creative-hero h1, .about-hero h1 { max-width: 900px; margin: 22px 0 28px; font-size: clamp(3.25rem, 6.8vw, 6.8rem); line-height: .95; }.creative-hero .hero-intro, .about-hero .hero-intro { max-width: 560px; }.creative-hero-panel { display: flex; flex-direction: column; justify-content: space-between; width: min(100%, 340px); min-height: 300px; margin: 0 auto; padding: 20px; border: 1px solid var(--ink); background: var(--paper); transform: rotate(2deg); }.creative-panel-kicker, .creative-panel-foot { font-family: var(--mono); font-size: .63rem; letter-spacing: .04em; text-transform: uppercase; }.creative-panel-kicker { color: var(--muted); }.creative-hero-panel strong { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -.05em; line-height: .84; }.creative-hero-panel em { color: var(--accent); font-style: normal; }.creative-panel-lines { display: flex; align-items: flex-end; gap: 7px; height: 74px; }.creative-panel-lines i { display: block; flex: 1; height: 35%; background: var(--ink); }.creative-panel-lines i:nth-child(2) { height: 68%; }.creative-panel-lines i:nth-child(3) { height: 47%; }.creative-panel-lines i:nth-child(4) { height: 88%; }.creative-panel-foot { color: var(--muted); }
.creative-content { padding-top: 75px; padding-bottom: 90px; }.filter-controls { display: flex; gap: 5px; }.filter-button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }.filter-button:hover, .filter-button.is-active { background: var(--ink); color: var(--paper); }.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 28px; }.video-card { border: 1px solid var(--line); }.video-card-purple { background: var(--purple); }.video-card-blue { background: var(--blue); }.video-preview { position: relative; margin: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); }.video-trigger { position: relative; width: 100%; height: 100%; padding: 0; color: var(--paper); text-align: left; }.video-trigger img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .4s ease, opacity .4s ease; }.video-trigger:hover img { transform: scale(1.04); opacity: .55; }.play-button { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(29,43,51,.8); transform: translate(-50%, -50%); font-size: 1.15rem; }.video-trigger small { position: absolute; right: 14px; bottom: 12px; font-family: var(--mono); font-size: .6rem; text-transform: uppercase; }.video-frame { width: 100%; height: 100%; }.video-frame iframe { width: 100%; height: 100%; border: 0; }.video-copy { display: grid; grid-template-columns: 1fr 1.05fr; gap: 25px; padding: 16px 20px 25px; }.video-copy h2 { margin: 10px 0 0; font-size: clamp(1.9rem, 3vw, 3rem); }.video-copy p { margin: 1.8em 0 0; color: #57636a; font-size: .85rem; line-height: 1.45; }.coding-game-card { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; padding: 18px; background: var(--orange); }.coding-game-art { position: relative; overflow: hidden; background: var(--ink); }.coding-game-art img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }.coding-game-art span { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--lime); font-size: 1.4rem; }.coding-game-copy { align-self: center; padding: 25px; }.coding-game-copy h2 { margin: 17px 0 12px; font-size: clamp(2.3rem, 4vw, 4rem); }.coding-game-copy > p:not(.eyebrow) { max-width: 390px; color: #5d514b; font-size: .95rem; line-height: 1.5; }.creative-note { padding-top: 76px; padding-bottom: 95px; border-top: 1px solid var(--line); }
.is-filtered-out { display: none; }

.about-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) .7fr; gap: 50px; align-items: center; min-height: 530px; padding-top: 86px; padding-bottom: 80px; background: var(--lime); }.about-facts-card { display: flex; flex-direction: column; justify-content: space-between; width: min(100%, 340px); min-height: 260px; margin: 0 auto; padding: 22px; border: 1px solid var(--ink); background: var(--paper); transform: rotate(-2deg); }.about-facts-kicker, .about-facts-footer { font-family: var(--mono); font-size: .63rem; letter-spacing: .04em; text-transform: uppercase; }.about-facts-kicker { color: var(--muted); }.about-facts-card strong { font-family: var(--display); font-size: clamp(4rem, 8vw, 7rem); font-weight: 500; letter-spacing: -.07em; line-height: .8; }.about-facts-footer { padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }.about-content { padding-top: 92px; padding-bottom: 105px; }.about-columns { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; }.about-main h2 { max-width: 760px; margin: 22px 0 32px; font-size: clamp(2.7rem, 5vw, 5.5rem); line-height: 1.02; }.about-traits { display: flex; flex-wrap: wrap; gap: 7px; }.about-aside { padding-top: 2px; }.about-aside dl { margin: 22px 0 0; border-top: 1px solid var(--line); }.about-aside dl div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }.about-aside dt { color: var(--muted); font-family: var(--mono); font-size: .7rem; text-transform: uppercase; }.about-aside dd { margin: 0; font-size: .95rem; line-height: 1.5; }.timeline-section { padding-top: 35px; padding-bottom: 105px; border-top: 1px solid var(--line); }.timeline { max-width: 970px; margin-left: auto; padding-top: 12px; }.timeline-item { display: grid; grid-template-columns: 145px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }.timeline-item > span { color: var(--orange-deep); font-family: var(--mono); font-size: .7rem; text-transform: uppercase; }.timeline-item h3 { margin: 0 0 7px; font-size: 1.35rem; letter-spacing: -.02em; }.timeline-item p { max-width: 670px; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }.snoots-detail { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; align-items: center; padding-top: 80px; padding-bottom: 80px; background: var(--blue); }.snoots-detail h2 { max-width: 500px; margin: 18px 0 14px; font-size: clamp(2.5rem, 4.5vw, 4.6rem); line-height: 1.02; }.snoots-detail p:not(.eyebrow) { max-width: 470px; color: #52616a; font-size: 1rem; line-height: 1.55; }.snoots-loop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; border: 1px solid var(--ink); background: rgba(255,253,249,.27); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; }.snoots-loop span { padding: 10px 11px; background: var(--paper); }.snoots-loop i { font-style: normal; font-size: 1.2rem; }.contact-block { padding-top: 95px; padding-bottom: 110px; background: var(--ink); color: var(--paper); }.contact-block .eyebrow { color: #a9b4b6; }.contact-block h2 { max-width: 850px; margin: 18px 0 35px; font-size: clamp(3rem, 7vw, 7rem); line-height: .98; }.contact-email { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--paper); font-family: var(--mono); font-size: clamp(.9rem, 1.5vw, 1rem); }.contact-email span { font-size: 1.2rem; }.contact-links { display: flex; gap: 22px; margin-top: 35px; color: #c4cdcd; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; }.contact-links a:hover { color: var(--orange); }

.site-footer { display: flex; justify-content: space-between; gap: 40px; padding: 58px clamp(22px, 5vw, 72px) 65px; background: var(--paper-deep); }.site-footer h2 { margin: 12px 0 0; font-size: clamp(2rem, 4vw, 4rem); line-height: .95; }.footer-right { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 35px; }.footer-email { padding-bottom: 7px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: .72rem; }.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; color: var(--muted); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }.footer-links a:hover { color: var(--ink); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); }.reveal-delay { transition-delay: .15s; }.reveal.is-visible { opacity: 1; transform: none; }
.route-enter #app { animation: route-enter .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes route-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Keep the interface quiet so the project media carries the visual variety. */
.panel-carrot .hero-panel-media,
.game-gallery { background: var(--paper-deep); }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }.main-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding-top: 4px; }.header-contact { grid-column: 2; grid-row: 1; }
  .hero { grid-template-columns: 1fr; min-height: auto; }.hero-object { width: min(100%, 560px); min-height: 470px; margin-left: auto; }
  .intro-strip { grid-template-columns: 1fr 2fr; }.intro-strip .capability-list { grid-column: 2; }
  .featured-projects { grid-template-columns: 1fr 1fr; }.project-card-art { aspect-ratio: 1.25 / 1; }
  .process-grid { gap: 45px; }.case-title-wrap { padding-top: 70px; }.case-meta { margin-top: 70px; }
  .artifact-band, .artifact-band-ia { grid-template-columns: 1fr; }.artifact-band-ia .artifact-frame { order: 0; }.artifact-caption { order: -1; }
  .game-showcase { grid-template-columns: 1fr; gap: 35px; }.game-showcase-copy { max-width: 640px; }.game-gallery { grid-template-columns: 1fr 1fr; }.game-gallery figure:first-child { grid-row: span 2; transform: none; }.game-gallery figure:first-child img { height: 100%; }
  .about-columns { gap: 55px; }.snoots-detail { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 620px) {
  .site-header { gap: 15px; padding-top: 14px; padding-bottom: 13px; }.wordmark { font-size: .59rem; }.wordmark-mark { width: 24px; height: 24px; font-size: .8rem; }.header-contact { padding: 7px 9px; font-size: .64rem; }.main-nav { gap: 15px; font-size: .7rem; }
  .hero { padding-top: 60px; padding-bottom: 70px; }.hero h1 { margin-bottom: 32px; font-size: clamp(2.75rem, 12vw, 4.25rem); line-height: .98; }.hero-bottomline { align-items: flex-start; gap: 20px; }.hero-intro { font-size: 1rem; }.round-link { width: 78px; height: 78px; font-size: .56rem; }.hero-object { min-height: 430px; }.hero-object-footer { align-items: flex-start; }.hero-object-tabs { flex-wrap: wrap; gap: 3px; }.hero-object-next { margin-left: auto; }.hero-media-metric { font-size: 1.65rem; }
  .intro-strip { display: block; padding-top: 52px; padding-bottom: 65px; }.intro-statement { margin: 18px 0 28px; font-size: 2rem; }.capability-list { grid-column: auto !important; }
  .work-section { padding-bottom: 75px; }.featured-projects { grid-template-columns: 1fr; }.project-card-art { aspect-ratio: 1.45 / 1; }.snoots-card { grid-template-columns: 1fr; gap: 20px; }.snoots-index { flex-direction: row; align-items: center; }.snoots-visual { min-height: 175px; }
  .process-teaser { padding-bottom: 75px; }.process-grid { display: block; }.process-big h2 { margin-top: 36px; font-size: 3.25rem; }.process-steps { margin-top: 35px; }.creative-invite { display: block; }.creative-invite .arrow-link { margin-top: 35px; }
  .case-hero { padding-top: 34px; padding-bottom: 35px; }.case-title-wrap { padding-top: 55px; }.case-title-wrap h1 { font-size: clamp(2.8rem, 12vw, 4.5rem); line-height: .98; }.case-deck { font-size: 1rem; }.case-meta { grid-template-columns: 1fr; gap: 15px; margin-top: 55px; }.case-opening { padding-top: 60px; padding-bottom: 75px; }.case-lede { font-size: 2rem; }.evidence-row { grid-template-columns: 1fr 1fr; gap: 25px 14px; margin-top: 50px; }.evidence-row strong { font-size: 2.15rem; }.case-section { display: block; padding-top: 65px; padding-bottom: 70px; }.case-section-label { flex-direction: row; gap: 10px; margin-bottom: 25px; }.case-section-content h2 { font-size: 2.65rem; }.finding-grid, .prototype-grid, .ownership-grid { grid-template-columns: 1fr; }.finding { min-height: 145px; }.artifact-band { padding-top: 55px; padding-bottom: 60px; }.artifact-frame { padding: 7px; }.priority { grid-template-columns: 44px 1fr; }.prototype-card h3 { margin-top: 40px; }.outcome-block { padding-top: 65px; padding-bottom: 80px; }.game-showcase { padding-top: 55px; padding-bottom: 55px; }.iteration-table > div { grid-template-columns: 1fr; gap: 6px; }.iteration-table .iteration-head { display: none; }.iteration-table > div:not(.iteration-head) { padding: 20px 0; }.game-gallery { display: grid; grid-template-columns: 1fr; padding-top: 55px; padding-bottom: 55px; }.game-gallery figure:first-child { grid-row: auto; }.game-gallery figure:first-child img { height: auto; }
  .creative-hero, .about-hero { display: block; min-height: auto; padding-top: 64px; padding-bottom: 62px; }.creative-hero h1, .about-hero h1 { font-size: clamp(2.9rem, 12vw, 4.5rem); line-height: .98; }.creative-hero-panel, .about-facts-card { width: min(100%, 290px); margin: 55px auto 0; }.creative-content { padding-top: 55px; }.creative-content .section-heading { display: block; }.filter-controls { margin-top: 15px; }.video-grid { grid-template-columns: 1fr; }.video-copy { display: block; }.video-copy p { margin-top: 19px; }.coding-game-card { grid-template-columns: 1fr; }.coding-game-copy { padding: 16px 8px 11px; }.creative-note { padding-top: 55px; padding-bottom: 70px; }
  .about-content { padding-top: 65px; padding-bottom: 75px; }.about-columns { grid-template-columns: 1fr; gap: 48px; }.about-main h2 { font-size: 3rem; }.timeline-section { padding-bottom: 75px; }.timeline-item { grid-template-columns: 1fr; gap: 9px; }.snoots-detail { padding-top: 60px; padding-bottom: 65px; }.snoots-loop { gap: 7px; padding: 25px 12px; font-size: .59rem; }.snoots-loop span { padding: 8px 6px; }.contact-block { padding-top: 68px; padding-bottom: 80px; }.contact-block h2 { font-size: 3.4rem; }.site-footer { display: block; padding-top: 45px; padding-bottom: 50px; }.footer-right { align-items: flex-start; margin-top: 38px; }.footer-links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}