:root {
  --ink:#0d0d0d; --ivory:#f4f0e8; --red:#e85b45; --grey:#a7a39d;
  --gutter:0px; --header:100px; --rule:3px;
  --ease:cubic-bezier(.22,.75,.15,1);
  font-family:Arial,Helvetica,sans-serif; color:var(--ivory); background:var(--ink);
}
* {box-sizing:border-box}
body {margin:0; padding-top:var(--header)}
body:has(dialog[open]) {overflow:hidden}
[hidden] {display:none!important}
a {color:inherit}
button,input {font:inherit}
button {cursor:pointer}
:focus-visible {outline:3px solid var(--red); outline-offset:4px}
html {scroll-behavior:smooth; scroll-padding-top:var(--header)}
.skip {position:fixed; left:20px; top:-80px; padding:12px; background:var(--ivory); color:var(--ink); z-index:30}
.skip:focus {top:16px}
.wordmark {display:block; width:100%; mix-blend-mode:lighten; overflow:hidden}
.home-link {display:block; width:126px; margin:auto}
.header {position:fixed; inset:0 var(--gutter) auto; height:var(--header); z-index:8; display:grid; place-items:center; padding-bottom:10px; background:var(--ink)}
.menu-toggle {position:absolute; right:23px; top:50%; translate:0 -58%; width:46px; height:46px; display:grid; place-content:center; gap:7px; background:transparent; color:inherit; border:0}
.menu-toggle span {width:26px; height:2px; display:block; border-radius:3px; background:currentColor; transition:transform .417s var(--ease)}
.menu-toggle:hover span:first-child {transform:translateY(-2px)}
.menu-toggle:hover span:last-child {transform:translateY(2px)}
.splash {display:none}
.js .splash {position:fixed; inset:0; z-index:20; display:grid; place-content:center; justify-items:center; gap:36px; background:var(--ink); pointer-events:none; animation:splash 2.88s var(--ease) both}
@keyframes splash {0%,75% {opacity:1; visibility:visible} 100% {opacity:0; visibility:hidden}}
.menu {position:fixed; inset:var(--gutter); width:auto; height:auto; max-width:none; max-height:none; padding:0; margin:0; color:var(--ivory); background:var(--ink); border:0; overflow:hidden}
.menu[open] {display:grid; grid-template-rows:var(--header) minmax(0,1fr)}
.menu::backdrop {background:var(--ink)}
.menu-head {position:relative; display:grid; place-items:center; padding-bottom:10px; background:var(--ink); border:0}
.close span:first-child,.close:hover span:first-child {transform:translateY(4.5px) rotate(45deg)}
.close span:last-child,.close:hover span:last-child {transform:translateY(-4.5px) rotate(-45deg)}
.menu nav {display:grid; grid-template-rows:repeat(var(--menu-items,4),1fr); min-height:0; overflow:hidden; background:var(--ivory); color:var(--ink)}
.menu nav a {display:grid; place-items:center; position:relative; border-bottom:var(--rule) solid var(--ink); background:var(--ivory); text-transform:uppercase; text-decoration:none; font-size:clamp(30px,8vh,72px); letter-spacing:.055em; animation:menu-in .57s var(--ease) both; animation-delay:calc(var(--i) * 55ms)}
@keyframes menu-in {from {transform:translateX(calc(-100% + var(--i) * 12%))} to {transform:none}}
.menu nav span {position:relative; isolation:isolate}
.menu nav [aria-current] span::after,.menu nav [aria-current] span::before {content:""; position:absolute; inset:-.08em -.34em; border:2px solid var(--ink); border-radius:49% 46% 52% 47%; transform:rotate(-8deg); z-index:-1}
.menu nav [aria-current] span::after {transform:rotate(7deg)}
.menu nav a:hover,.menu nav a:focus-visible {background:var(--red); font-weight:700}
.menu nav a:hover::before,.menu nav a:hover::after {content:"↝"; position:absolute; left:4%; top:50%; translate:0 -50%}
.menu nav a:hover::after {left:auto; right:4%; transform:scaleX(-1)}
.menu b,.star {color:var(--red)}
.frame {margin-inline:0; border-inline:0}
.panel {position:relative; border-bottom:var(--rule) solid var(--ink)}
.label {font-size:12px; font-weight:800; letter-spacing:.16em; margin:0}
.display {font-size:clamp(62px,13vw,210px); line-height:.77; font-weight:950; letter-spacing:-.095em; margin:0; font-family:"Arial Black",Arial,sans-serif}
.hero {
  --hero-top:clamp(24px,5svh,58px);
  --hero-badge:clamp(105px,12vw,176px);
  --hero-door:clamp(84px,10vw,130px);
  --hero-controls-gap:28px;
  min-height:calc(100svh - var(--header));
  padding-top:var(--hero-top);
  color:var(--ivory);
  background:var(--ink);
  border-bottom-color:var(--ivory);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
}
.hero-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:end;
  width:100%;
  margin-top:auto;
  padding:var(--hero-controls-gap) clamp(18px,4vw,72px) 0;
  column-gap:12px;
}
.hero-label {margin:clamp(36px,7vh,85px) 0 24px; color:var(--grey)}
.hero-title {z-index:1; margin:0; font-family:Impact,"Arial Black",sans-serif; display:grid; gap:.07em; line-height:.83; letter-spacing:-.045em; font-size:clamp(34px,9.2vw,158px); font-weight:900}
.badge {display:block; width:var(--hero-badge); max-width:100%; margin-bottom:18px; overflow:visible}
.badge-ring {transform-box:view-box; transform-origin:120px 120px; animation:spin 22s linear infinite; font-weight:800; font-size:14px; fill:var(--ink)}
.badge-star {transform-box:view-box; transform-origin:120px 120px; animation:badge 3.6s var(--ease) infinite}
@keyframes spin {from {transform:rotate(0deg)} to {transform:rotate(360deg)}}
@keyframes badge {50% {transform:rotate(8deg) scale(.94)}}
.door {width:var(--hero-door); margin-bottom:-4px; text-decoration:none; color:var(--ivory)}
.door svg {display:block}
.shutter {transition:transform .7s var(--ease); clip-path:inset(0)}
.door:hover .shutter,.door:focus-visible .shutter {transform:translateY(-14px)}
.door-star {animation:door 1.7s ease-in-out infinite; transform-origin:center}
@keyframes door {50% {translate:0 -6px}}
.hero-note {justify-self:end; align-self:center; text-align:left; font-weight:800; letter-spacing:.10em; font-size:11px; line-height:1.65; margin:0}
.hero-note .star {font-size:18px; vertical-align:middle}
.welcome,.intro,.service,.clients,.subhero,.editorial,.audiences {padding:clamp(34px,7vw,110px)}
.welcome {min-height:57svh; display:grid; align-content:center; justify-items:center; gap:22px; text-align:center; color:var(--ink); background:var(--red)}
.welcome p {margin:0}
.intro {min-height:64svh; display:grid; justify-items:center; align-content:center; gap:35px; background:var(--ivory); color:var(--ink); text-align:center}
.subhero>p:last-of-type {max-width:42ch; margin:0; font-size:clamp(18px,2.1vw,30px); line-height:1.25}
.service {background:var(--ivory); color:var(--ink); min-height:80svh}
.service.move {background:var(--grey)}
.service .display {margin:35px 0; text-align:center; color:var(--red); -webkit-text-stroke:2px var(--ink); text-shadow:5px 5px var(--ink)}
.editorial p {font-size:clamp(17px,2vw,24px); line-height:1.45}
.service-art {position:relative; min-height:230px; display:grid; place-items:center; isolation:isolate}
.pill {display:inline-block; background:var(--red); color:var(--ink); border:2px solid var(--ink); padding:14px 22px; border-radius:99px; font-weight:800; text-decoration:none; box-shadow:inset 0 -3px #0d0d0d33; transition:border-radius .5s}
.pill:hover {border-radius:0}
.workflow {background:var(--ivory); color:var(--ink)}
.workflow-stage {position:sticky; top:var(--header); min-height:calc(100svh - var(--header)); padding:clamp(30px,6vw,86px); isolation:isolate; overflow:hidden}
.js .workflow {min-height:480svh}
.particles {position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.workflow ol {list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:4%; pointer-events:none}
.workflow li {padding:0 4px; background:var(--ivory)}
.workflow li h3 {margin:12px 0 7px; font-size:clamp(20px,3.2vw,46px); line-height:1}
.workflow li p {line-height:1.4}
.step-number {width:var(--pill-width,100%); display:grid; place-items:center; min-height:58px; border:2px solid var(--ink); border-radius:80px; background:var(--red); font-size:28px; font-weight:900}
.workflow li:nth-child(2) .step-number {background:var(--grey)}
.workflow li:nth-child(3) .step-number {background:var(--ink); color:var(--ivory)}
.crosslinks {display:grid; grid-template-columns:1fr 1fr; background:var(--red); color:var(--ink)}
.crosslinks a {display:grid; gap:18px; padding:clamp(25px,6vw,90px); text-decoration:none; transition:background .25s}
.crosslinks a+a {border-left:var(--rule) solid var(--ink)}
.crosslinks a:hover {background:var(--ivory)}
.crosslinks span {font-size:11px; font-weight:800; letter-spacing:.13em}
.crosslinks strong {font-size:clamp(34px,8vw,110px); letter-spacing:-.08em; line-height:.8}
.clients,.work-list,.editorial {background:var(--ivory); color:var(--ink)}
.clients .display,.audiences .display {font-size:clamp(48px,9vw,134px); margin:18px 0 34px}
.brands {list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid; border-left:1px solid}
.brand {min-height:104px; padding:12px 6px; display:grid; place-content:center; text-align:center; border-right:1px solid; border-bottom:1px solid; font-size:clamp(14px,2vw,26px); font-weight:900; line-height:1; letter-spacing:-.06em}
.brand-1 {font-style:italic}.brand-2 {text-transform:uppercase}.brand-3 {font-family:Georgia,serif}.brand-4 {letter-spacing:.02em}
.ticker {overflow:hidden; background:var(--red); color:var(--ink); padding:16px 0; font-size:clamp(16px,3vw,38px); font-weight:900; white-space:nowrap}
.ticker div {width:max-content; animation:ticker 24s linear infinite}
@keyframes ticker {to {translate:-50%}}
.footer {border-block:var(--rule) solid var(--ivory); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; padding:clamp(24px,5vw,72px)}
.footer .wordmark {width:125px}
.footer p,.footer small {margin:0; color:var(--grey); line-height:1.4}
.footer small {grid-column:1/-1; border-top:1px solid var(--grey); padding-top:16px}
.footer>a:last-of-type {font-weight:800}
.subhero {display:grid; gap:25px; min-height:43svh; align-content:center; border-color:var(--ivory)}
.subhero .display {color:var(--red)}
.contact {min-height:57svh}
.contact .pill {justify-self:start}
.work-list {padding:clamp(16px,4vw,52px); min-height:48svh}
.searchbar {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; background:var(--grey); border:2px solid var(--ink); font-weight:800}
.searchbar div {display:flex; gap:8px; align-items:center}
.searchbar input,.clear {min-height:42px; border:2px solid var(--ink); border-radius:80px; padding:8px 14px; background:var(--ivory); color:var(--ink)}
.searchbar input {min-width:0; width:min(260px,34vw)}
.clear {background:var(--red)}
.results {min-height:1.2em; font-size:14px}
.searchable {grid-template-columns:repeat(3,1fr)}
.searchable .brand {min-height:145px; font-size:clamp(18px,4vw,48px)}
.empty {text-align:center; padding:32px 12px}
.empty .star {display:inline-block; font-size:70px; animation:badge 2s ease infinite}
.editorial {display:grid; justify-items:center; text-align:center}
.editorial h2 {font-size:clamp(36px,7vw,92px); margin:20px 0; letter-spacing:-.075em}
.editorial p {max-width:42ch; margin:8px auto}
.about-mark {display:grid; place-items:center; width:160px; aspect-ratio:1; border:3px solid; border-radius:24px; font-size:115px}
.audiences {background:var(--grey); color:var(--ink)}
.audiences>div {display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.audiences article {border-top:2px solid; line-height:1.4}
.js .reveal {opacity:0; translate:0 32px; transition:opacity .7s var(--ease),translate .7s var(--ease)}
.js .reveal.shown {opacity:1; translate:none}
@media(max-width:767px) {
  :root {--header:85px}
  .home-link {width:105px}
  .menu-toggle {right:10px}
  .hero-label {font-size:9px}
  .hero-note .star {font-size:12px}
    .welcome {min-height:36svh}
  .intro {min-height:48svh}
  .service {min-height:auto}
  .service-art {min-height:155px}
    .js .workflow {min-height:0}
  .workflow-stage {position:relative; top:0; min-height:0}
  .workflow ol,.audiences>div {grid-template-columns:1fr; gap:22px}
  .brands {grid-template-columns:repeat(3,1fr)}
  .brand {min-height:72px}
  .searchable .brand {min-height:95px}
  .searchbar {align-items:flex-start; flex-direction:column}
  .searchbar input {width:min(54vw,260px)}
  .footer {grid-template-columns:1fr 1fr}
  .footer p {font-size:14px}
}
@media(max-width:420px) {.searchable {grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .js .splash {display:none}
  .js .reveal {opacity:1; translate:none}
  .js .workflow {min-height:0}
  .workflow-stage {position:relative; top:0}
}
@media(max-width:767px) {
  .welcome .display,.intro .display,.service .display {font-size:clamp(38px,12.5vw,92px)}
  .subhero .display,.workflow .display {font-size:clamp(42px,12vw,92px)}
  .clients .display,.audiences .display {font-size:clamp(36px,10vw,74px)}
}

/* Expressive type and illustrated motion */
@font-face {
  font-family:"Apex Display";
  src:url("/assets/roboto-flex-display.woff2") format("woff2");
  font-weight:100 1000;
  font-display:swap;
}
:root {--gold:#f7ce8d; --blue:#a8cfdc; --peach:#ffc6a4; --mint:#bad5be}
.sr-only {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.display,.hero-title,.splash-hello,.splash-brand strong,.maze {font-family:"Apex Display",Impact,"Arial Black",sans-serif}
.display {letter-spacing:-.025em; line-height:.88}
.hero-label {margin:clamp(23px,4vh,47px) 0 20px}
.badge-ring {font-size:13px; letter-spacing:1.2px}
.door-label {fill:currentColor; font-size:9px; font-weight:800; letter-spacing:3px}
.shutter,.door:hover .shutter,.door:focus-visible .shutter {transform:translateY(var(--shutter-lift,0px)); transition:none; clip-path:none}
@media (hover:hover) {
  .door:hover .shutter,.door:focus-visible .shutter {transform:translateY(min(-18px,var(--shutter-lift,0px))); transition:transform .25s var(--ease)}
}
.js .splash {display:grid; gap:0; animation:splash 3.2s var(--ease) both}
.splash-hello,.splash-brand {grid-area:1/1; align-self:center; text-align:center}
.splash-hello {display:flex; font-size:clamp(66px,13vw,155px); font-weight:950; letter-spacing:-.025em}
.splash-hello span {display:inline-block; animation:hello-letter 1.28s calc(var(--i) * .058s) var(--ease) both}
.splash-brand {animation:splash-brand 1.95s 1.18s var(--ease) both}
.splash-brand>span {display:block; font-size:clamp(11px,2vw,20px); letter-spacing:.26em; font-weight:800; margin-bottom:8px}
@keyframes hello-letter {
  0% {opacity:0; transform:translateY(26px) scale(.75,1.24)}
  35% {opacity:1; transform:translateY(0) scale(1.05,.83)}
  55% {opacity:1; transform:scale(.94,1.12)}
  75% {opacity:1; transform:none}
  100% {opacity:0; transform:translateY(-24px) scale(.8,1.28)}
}
@keyframes splash-brand {0% {opacity:0;transform:translateY(16px) scale(.9,1.13)} 25% {opacity:1;transform:scale(1.04,.93)} 45%,100% {opacity:1;transform:none}}
@keyframes star-arrive {0% {opacity:0;transform:scale(.1) rotate(-110deg)} 61% {opacity:1;transform:scale(1.32) rotate(18deg)} 100% {opacity:1;transform:none}}
.intro .display,.service .display,.contact .display,.subhero .page-display {
  color:var(--type-fill,var(--peach)); -webkit-text-stroke:2px var(--type-edge,var(--ink));
  paint-order:stroke fill;
  text-shadow:-1px 1px var(--type-edge,var(--ink)),-3px 3px var(--type-edge,var(--ink)),-5px 5px var(--type-edge,var(--ink)),-7px 7px var(--type-edge,var(--ink)),-9px 9px var(--type-edge,var(--ink)),-11px 11px var(--type-edge,var(--ink));
}
.intro .display {line-height:.93; --type-fill:var(--red)}
.service .display {margin:0 0 clamp(36px,6vw,80px); letter-spacing:.015em}
.service.make {--type-fill:var(--blue)}
.service.move {background:#e5e8dc; --type-fill:var(--mint)}
.service-art {min-height:0}
.figure {width:min(100%,370px); overflow:visible}
.figure :is(.orbit-a,.orbit-b,.press-paper,.press-handle,.broadcast-horn,.sound-rays) {transform-box:fill-box; transform-origin:center}
.orbit-a {animation:orbit-shift 5.4s ease-in-out infinite alternate}
.orbit-b {animation:orbit-shift 6.8s ease-in-out infinite alternate-reverse}
.press-paper {animation:float-art 4.2s ease-in-out infinite}
.press-handle {animation:horn 4.2s ease-in-out infinite; transform-origin:left center}
.broadcast-horn {animation:horn 3.1s ease-in-out infinite}
.sound-rays {animation:rays 3.1s ease-in-out infinite}
@keyframes orbit-shift {to {transform:rotate(13deg) scaleY(.85)}}
@keyframes float-art {50% {transform:translateY(-6px)}}
@keyframes horn {50% {transform:rotate(-4deg) translateY(-3px)}}
@keyframes rays {0%,100% {opacity:.55;transform:translate(-3px,3px)} 50% {opacity:1;transform:translate(6px,-3px)}}
.maze {display:block; width:min(94%,850px); margin:0 auto 24px; font-size:132px; font-weight:1000}
.workflow-stage {height:calc(100svh - var(--header)); min-height:0; padding-block:clamp(22px,5vh,55px)}
.workflow ol {gap:3%; margin-inline:auto; max-width:1140px}
.workflow li {will-change:transform,opacity}
.step-number {position:relative; isolation:isolate; width:100%; border:0; background:none!important}
.step-number::before {content:""; position:absolute; z-index:-1; inset:0; border:2px solid var(--ink); border-radius:80px; background:var(--gold); transform:scaleX(var(--pill-scale,1)); box-shadow:inset -2px -3px #0d0d0d26}
.workflow li:nth-child(2) .step-number::before {background:var(--blue)}
.workflow li:nth-child(3) .step-number {color:var(--ink)}
.workflow li:nth-child(3) .step-number::before {background:var(--peach)}
.menu nav [aria-current] span::after,.menu nav [aria-current] span::before {content:none}
.scribble {position:absolute; inset:-.20em -.45em; width:calc(100% + .9em); height:calc(100% + .4em); fill:none; stroke:currentColor; stroke-width:2.4; overflow:visible; transition:transform .36s var(--ease)}
.menu nav [aria-current]:hover .scribble {transform:scale(.86) rotate(-3deg)}
.menu nav a:hover::before,.menu nav a:hover::after {content:""; width:clamp(28px,7vw,92px); aspect-ratio:2; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 48'%3E%3Cpath d='M4 34Q28 4 85 24M64 9l22 15-26 12M7 38q34-22 69-14' fill='none' stroke='%230d0d0d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); animation:arrow-in .27s var(--ease) both}
.menu nav [aria-current]:hover::before,.menu nav [aria-current]:hover::after {content:none}
@keyframes arrow-in {from {opacity:0; margin-inline:13px} to {opacity:1; margin-inline:0}}
.menu[open] .close span:first-child {animation:cross-top .417s var(--ease) both}
.menu[open] .close span:last-child {animation:cross-bottom .417s var(--ease) both}
@keyframes cross-top {from {transform:none} to {transform:translateY(4.5px) rotate(45deg)}}
@keyframes cross-bottom {from {transform:none} to {transform:translateY(-4.5px) rotate(-45deg)}}
.contact {--type-fill:var(--gold); --type-edge:#943e33}
.contact .display {letter-spacing:.018em; font-weight:930}
.footer>a:last-of-type {font-size:clamp(18px,2.2vw,30px); font-weight:900}
.brand {transition:opacity .3s var(--ease),background .3s var(--ease); opacity:.58}
.brand:hover,.brand:focus-within {opacity:1; background:#ebe4d8}
.brand img {display:block; width:min(100%,118px); height:46px; object-fit:contain; transition:filter .3s var(--ease),transform .3s var(--ease)}
.searchable .brand img {width:min(100%,180px); height:68px}
@media(max-width:767px) {
  .workflow-stage {height:auto; min-height:0}
  .maze {width:100%; margin-bottom:18px}
  .service-art {margin-bottom:12px}
  .figure {width:min(80%,270px)}
  .brand img {height:32px}
  .searchable .brand img {height:48px}
}
@media(max-height:620px) and (min-width:768px) {
  .maze {width:min(62%,630px); margin-bottom:14px}
  .step-number {min-height:42px}
}
@media(prefers-reduced-motion:reduce) {
  .js .splash {display:none}
  .workflow-stage {height:auto}
  .badge {transform:none}
}
.service-art:not(.motion-live) .figure * {animation-play-state:paused}
.brand {grid-template-columns:minmax(0,1fr); place-items:center}
.brand img {filter:grayscale(1) contrast(1.38) brightness(.74)}
.brand:is(:hover,:focus-within) img {filter:grayscale(1) contrast(1.65) brightness(.63); transform:scale(1.06)}

.hero-title {
  /* Reserve room for the controls even in short landscape windows. */
  --title-room:calc(100svh - var(--header) - var(--hero-top) - var(--hero-badge) - var(--hero-controls-gap) - 21px);
  display:block;
  width:min(67vw,820px,max(380px,calc(var(--title-room) * 1.62)));
  margin:0 auto;
}
.motion-heading {position:relative; isolation:isolate}
.motion-stage {display:block; width:100%; aspect-ratio:1256/350}
.motion-stage canvas {display:block; width:100%; height:100%}
.motion-stage {contain:layout paint}
.motion-label {position:absolute; inset:0; display:grid; place-items:center; text-align:center}
.motion-ready .motion-label {width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.hero-title .motion-stage {aspect-ratio:1256/775}
.hero-title .motion-label {font-size:clamp(26px,5vw,80px)}
.welcome .motion-heading {width:min(100%,1100px); color:var(--ivory)}
.welcome .motion-stage {aspect-ratio:1920/344}
.intro .motion-heading {width:min(100%,990px)}
.intro .motion-stage {aspect-ratio:1400/700}
.make .motion-stage,.move .motion-stage {aspect-ratio:1400/400}
.service .motion-heading {width:min(100%,990px); margin-inline:auto}
.hero-note {list-style:none; padding:0; text-transform:uppercase}
.hero-note li {display:flex; align-items:center; gap:.55em}
.hero-note .star {line-height:1}
.badge {transform:translate3d(var(--badge-x,0px),var(--badge-y,0px),0) rotate(var(--badge-tilt,0deg)); transition:none; will-change:transform}
.badge-star {animation-duration:2.8s}
@keyframes badge {0%,100% {transform:rotate(0deg) scale(1)} 35% {transform:rotate(-9deg) scale(1.08)} 70% {transform:rotate(8deg) scale(.91)}}

.js:not(.show-splash) .splash {display:none}
.splash-lockup {width:clamp(175px,39vw,365px); margin:0 auto}
.splash-lockup .wordmark {width:100%}
.splash-lockup .splash-star {width:41px; transform-box:fill-box; transform-origin:center; animation:star-arrive .85s 1.86s var(--ease) both}
@media(prefers-reduced-motion:no-preference) {
  .splash-dock.show-splash .splash {animation:none}
  .splash-dock.show-splash .splash-brand {animation-duration:1.55s}
  .splash-dock.show-splash .header .wordmark {visibility:hidden}
}

.welcome p {font-size:16px; line-height:1.4}
.intro-caption {font-size:18px; max-width:66ch; line-height:1.65}
.step-number {height:58px; min-height:0}
.step-number::before {
  inset:0 auto 0 50%; translate:-50% 0; box-sizing:border-box;
  width:calc(58px + (100% - 58px) * var(--pill-progress,1));
  transform:none; border-radius:999px;
}
.crosslinks strong {display:flex; align-items:center; gap:.16em}
.crosslinks svg {width:.61em; flex:none; transform-origin:bottom left; transition:none}
.crosslinks a:is(:hover,:focus-visible) svg {transform:scale(1.35) translate(.045em,-.05em)}
.footer>a:last-of-type {font-size:clamp(16px,1.7vw,23px)}
.contact-close {position:absolute; display:grid; place-items:center; inset:clamp(16px,3vw,36px) clamp(16px,3vw,36px) auto auto; width:48px; aspect-ratio:1; color:var(--ivory); border:2px solid currentColor; border-radius:50%; transition:background .25s,color .25s}
.contact-close svg {width:27px}
.contact-close:hover {color:var(--ink); background:var(--ivory)}
.js body[data-page="contact"] {animation:contact-in .56s var(--ease) backwards}
.show-splash body[data-page="contact"] {animation-delay:2.53s}
.js body[data-page="contact"].contact-leaving {animation:contact-out .34s cubic-bezier(.55,.06,.68,.45) both}
@keyframes contact-in {from {translate:0 100dvh} to {translate:none}}
@keyframes contact-out {from {translate:none} to {translate:0 105dvh}}
@media(max-width:767px) {
  .hero {
    --hero-top:clamp(28px,6svh,56px);
    --hero-badge:clamp(105px,34vw,180px);
    --hero-door:clamp(74px,17vw,99px);
  }
  .hero-title {width:calc(100% - 24px)}
  .hero-controls {row-gap:24px; column-gap:8px; padding-inline:12px}
  .hero-controls .badge {grid-column:1 / -1; justify-self:center; margin-bottom:0}
  .hero-controls .door {grid-column:2}
  .hero-note {grid-column:3; font-size:clamp(7px,1.7vw,10px); letter-spacing:.07em}
  .crosslinks strong {font-size:clamp(26px,7vw,55px)}
}
@media(max-height:620px) and (min-width:768px) {
  .step-number {height:42px}
  .step-number::before {width:calc(42px + (100% - 42px) * var(--pill-progress,1))}
}
@media(prefers-reduced-motion:reduce) {
  .badge {transform:none}
}

/* Splash typography and a single, uninterrupted logo flight. */
@font-face {
  font-family:"Poppins";
  src:url("/assets/poppins-bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:block;
}
@font-face {
  font-family:"Apex Splash";
  src:url("/assets/poppins-splash.woff2") format("woff2");
  font-weight:700;
  font-display:swap;
}
.splash-hello,.splash-brand>span {font-family:"Apex Splash",sans-serif; font-weight:700}
.menu .close:focus {outline:none}
.menu .close:focus-visible {outline:none}

@media(prefers-reduced-motion:no-preference) {
  .splash-dock.logo-flying .header {z-index:21; background:transparent}
  .splash-dock.logo-flying .header .wordmark {visibility:hidden}
  .splash-dock.logo-flying .header .menu-toggle,.logo-flying .splash-lockup {visibility:hidden}
}

html {scrollbar-gutter:auto}
html.splash-dock,html.menu-open {overflow:hidden}
.menu.is-closing {pointer-events:none}
.menu.is-closing,.menu.is-closing nav,.menu.is-closing::backdrop {background:transparent}
.menu.is-closing {border-color:transparent}


/* Shared description and action typography across the animated sections. */
.welcome .section-copy,.intro .section-copy,.service-copy .section-copy,.workflow .section-copy {
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
  font-weight:800;
  line-height:1.65;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.service-copy .section-copy {margin:0; max-width:66ch}
.service-copy .section-action {
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* Services follow the centred editorial rhythm of the help section. */
.service {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  align-content:center;
  gap:35px;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.service .motion-heading {margin:0 auto}
.service-eyebrow,.service-copy {position:relative; z-index:1}
.service-copy {display:grid; justify-items:center; gap:28px; max-width:760px; margin-inline:auto}
.service.move .motion-heading {width:min(100%,1440px); margin-inline:auto; justify-self:center}
.service .service-accent {
  position:absolute;
  inset:auto auto 28px clamp(16px,4vw,64px);
  width:clamp(100px,14vw,170px);
  min-height:0;
  pointer-events:none;
  z-index:0;
}
.service-accent .figure {width:100%}
.service.move .service-accent {left:auto; right:clamp(16px,4vw,64px)}
@media(max-width:900px) {
  .service .service-accent {position:relative; inset:auto; width:100px; justify-self:start; margin-top:8px}
  .service.move .service-accent {inset:auto; justify-self:end}
}


/* The title clears the stage before the workflow cards arrive. */
.workflow-stage {padding-inline:clamp(12px,1.5vw,28px)}
.maze {
  width:100%;
  height:auto;
  max-height:calc(100svh - var(--header) - 64px);
  object-fit:contain;
  margin:0 auto;
}
@media(min-width:768px) and (min-height:621px) {
  .workflow ol {
    position:absolute;
    z-index:1;
    inset:50% clamp(24px,6vw,86px) auto;
    transform:translateY(-50%);
  }
}
@media(max-width:767px), (max-height:620px) {
  .maze {max-height:none; margin-bottom:24px}
}

.workflow .maze {transform:translate3d(0,var(--workflow-title-y,0px),0); will-change:transform}
.workflow li {background:transparent}

/* Small versions of the same outlined lettering used by the display titles. */
.workflow li .step-title {
  --workflow-title-fill:var(--gold);
  display:flex;
  align-items:center;
  width:100%;
  min-height:1.1em;
  margin:0 0 24px;
  padding:0;
  border:0;
  background:none;
  font-size:clamp(40px,4.6vw,70px);
  line-height:1.1;
}
.workflow li:nth-child(2) .step-title {--workflow-title-fill:var(--blue)}
.workflow li:nth-child(3) .step-title {--workflow-title-fill:var(--peach)}
.step-word {display:flex; align-items:center; white-space:nowrap}
.step-letter {
  display:block;
  flex:none;
  overflow:hidden;
  max-width:calc(var(--letter-progress,1) * 1em);
  opacity:var(--letter-progress,1);
  transform:translateY(calc((1 - var(--letter-progress,1)) * 5px));
}
.step-letter svg {display:block; max-width:none; height:1em}
.step-letter-face {fill:var(--workflow-title-fill)}
.workflow .step-copy {opacity:var(--title-progress,1)}
.workflow .step-copy strong,.workflow .step-copy p {font:inherit; letter-spacing:inherit; text-transform:inherit}
.workflow .step-copy strong {display:block; min-height:3.3em}
.workflow .step-copy p {margin:14px 0 0}
@media(min-width:768px) and (prefers-reduced-motion:no-preference) {
  .js .workflow {min-height:360svh}
}
@media(prefers-reduced-motion:reduce) {
  .workflow .maze {will-change:auto}
  .workflow ol {position:static; margin-top:24px; transform:none}
}

.clients .label {display:flex; align-items:center; gap:.65em; text-align:left}
.clients .label .star {display:block; font-size:18px; line-height:1}
.clients .display {text-align:left}
.brand[data-name="Dharma Productions"] img {filter:brightness(0)}
body[data-page="home"] .footer {border-top:0}

/* Shared page-title treatment from Let's Talk. */
.subhero .page-display {
  --type-fill:var(--gold);
  --type-edge:#943e33;
  letter-spacing:.018em;
  font-weight:930;
}
.footer {border-bottom:0; grid-template-columns:auto minmax(0,1fr) auto auto}
.footer-socials {display:flex; align-items:center; gap:14px}
.footer-socials button {
  display:grid; place-items:center; width:34px; height:34px; padding:5px;
  background:transparent; border:0; color:var(--ivory); opacity:1;
}
.footer-socials svg {display:block; width:22px; height:22px; fill:currentColor}
.contact-close {border:0; border-radius:0; background:transparent}
.contact-close:hover {color:var(--red); background:transparent}
@media(max-width:767px) {
  .footer {grid-template-columns:1fr 1fr}
  .footer-contact {justify-self:end}
}

/* Equal side columns keep the social group on the true centre line. */
.footer {grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.footer-brand {display:flex; align-items:center; gap:24px}
.footer-brand>a {flex:none}
.footer-socials {justify-self:center; justify-content:center}
.footer-contact {justify-self:end}
.contact-email {color:inherit; text-decoration:none}
.contact-email:hover {text-decoration:underline; text-underline-offset:.15em}
.project-form-page {position:relative; background:var(--ivory); color:var(--ink); min-height:calc(100svh - var(--header)); padding:clamp(48px,6vw,90px) clamp(24px,6vw,90px)}
.project-form-wrap {max-width:1000px; margin:auto; font-family:"Poppins",Arial,sans-serif}
.project-form-wrap h1 {font-size:clamp(26px,3.2vw,42px); line-height:1.25; margin:0 0 48px; font-weight:700; letter-spacing:-.025em}
.project-form {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 64px}
.form-field {display:grid; align-content:start; gap:8px; min-width:0}
.form-field label {font-size:12px; font-weight:700; line-height:1.5}
.form-field input,.form-field textarea {width:100%; min-width:0; min-height:40px; padding:0 0 10px; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); font:700 17px/1.5 "Poppins",Arial,sans-serif}
.form-field input::placeholder,.form-field textarea::placeholder {color:#858585; opacity:1}
.form-field input:focus,.form-field textarea:focus {outline:0; border-bottom-color:var(--red); box-shadow:0 1px 0 var(--red)}
.form-field textarea {resize:vertical; min-height:62px}
.form-field-wide,.form-actions {grid-column:1/-1}
.form-actions {display:grid; justify-items:center; gap:12px}
.form-actions button {background:var(--ink); color:var(--ivory); border:0; border-radius:999px; padding:12px 40px; font:700 16px/1.3 "Poppins",Arial,sans-serif; transition:background .2s}
.form-actions button:hover {background:var(--red)}
.form-actions p {margin:0; font:12px/1.5 Arial,Helvetica,sans-serif; text-align:center; color:#625e58}
.form-actions .form-status:empty {display:none}
.form-close {position:absolute; top:16px; right:16px; display:grid; place-items:center; width:44px; height:44px; color:var(--ink)}
.form-close svg {width:28px}
@media(max-width:1000px) {
  .footer-brand {align-items:flex-start; flex-direction:column; gap:12px}
}
@media(max-width:767px) {
  .footer {grid-template-columns:1fr 1fr}
  .footer-brand {grid-column:1/-1; flex-direction:row; align-items:center}
  .footer-socials {grid-column:1/-1; justify-self:center; margin:8px 0}
  .footer-contact {grid-column:1/-1; justify-self:center}
  .project-form {grid-template-columns:1fr; gap:24px}
  .project-form-wrap h1 {margin-bottom:32px}
}

/* Roomy contact rhythm and the shared hand-drawn hover gesture. */
.contact {gap:clamp(52px,7vw,92px); padding-block:clamp(72px,9vw,130px)}
.contact-email {position:relative; display:inline-block; isolation:isolate}
.contact-email>span {position:relative; z-index:1}
.contact-email .scribble {inset:-.65em -.75em; width:calc(100% + 1.5em); height:calc(100% + 1.3em); stroke:var(--red); pointer-events:none}
.contact-email:hover {text-decoration:none}
.menu nav [aria-current]:is(:hover,:focus-visible) .scribble,
.contact-email:is(:hover,:focus-visible) .scribble {transform:scale(.62) rotate(-5deg)}
.footer-contact {border:2px solid var(--ivory); border-radius:999px; padding:12px 22px; text-decoration:none; white-space:nowrap; transition:background .25s,color .25s}
.footer-contact:hover {background:var(--ivory); color:var(--ink)}
.brand:is(:hover,:focus-within) img {filter:none; transform:scale(1.06)}
/* These two official source marks are white; retain a readable dark mark. */
.brand[data-name="Dharma Productions"]:is(:hover,:focus-within) img {filter:brightness(0)}
.workflow .maze {opacity:var(--workflow-title-opacity,1)}
@media(max-width:767px) {
 .footer-socials {justify-self:start; justify-content:flex-start}
 .footer-contact {justify-self:start}
 .contact {gap:60px; padding-block:70px}
 .contact-email .scribble {inset:-.55em -.55em; width:calc(100% + 1.1em); height:calc(100% + 1.1em)}
}

/* The project form grows from its CTA; no seam between its panel and footer. */
.footer-contact:is(:hover,:focus-visible) {background:var(--red);border-color:var(--red);color:var(--ink)}
body[data-page="contact-form"] .project-form-page,
.form-overlay .project-form-page {border-bottom:0}
body[data-page="contact-form"] .footer,
.form-overlay .footer {border-top:0}
.form-overlay {position:fixed;inset:0;z-index:40;background:var(--ivory);overflow:auto;overscroll-behavior:contain}
.form-overlay-content {min-height:100%}
.form-overlay .footer {background:var(--ink);color:var(--ivory)}
.form-overlay .project-form-page {min-height:100svh;padding-top:clamp(72px,8vw,110px)}

.form-close:is(:focus,:focus-visible) {outline:none;box-shadow:none}
.form-close:hover {color:var(--red)}

.move .motion-stage svg {display:block;width:100%;height:100%}

/* Meme marketing: a readable service page in the existing Apex identity. */
.menu nav a[href="/meme-marketing/"] {font-size:clamp(30px,min(8vh,15vw),72px);letter-spacing:.055em;line-height:1}
.menu nav a[href="/meme-marketing/"] span {max-width:calc(100vw - 52px);text-align:center}
.meme-hero,.meme-section {padding:clamp(34px,7vw,110px);color:var(--ink);background:var(--ivory)}
.meme-hero {display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;min-height:calc(100svh - var(--header))}
.meme-hero .label {font-size:11px;line-height:1.8}
.meme-hero h1 {--type-fill:var(--gold);--type-edge:#943e33;font-size:clamp(50px,8vw,122px);line-height:1.02;font-weight:930;letter-spacing:.005em;margin:28px 0}
.meme-hero p:not(.label),.meme-section p:not(.label) {font:400 18px/1.65 Arial,Helvetica,sans-serif;max-width:65ch}
.meme-hero p.meme-deck {font-weight:800;font-size:clamp(23px,2.8vw,36px);line-height:1.15;margin:0 0 20px;letter-spacing:-.025em}
.meme-hero .pill {margin-top:18px}
.meme-art {position:relative;min-height:460px;max-width:470px;width:100%;margin:auto}
.meme-note {position:absolute;border:3px solid var(--ink);border-radius:15px;padding:30px;width:90%;min-height:270px;box-shadow:-8px 9px var(--ink)}
.meme-note .label {font-size:10px;margin:0 0 24px;letter-spacing:.12em}
.meme-note strong {font-size:clamp(32px,4vw,58px);line-height:1.05;letter-spacing:-.055em;display:block;font-weight:900}
.meme-note-back {background:var(--mint);right:0;top:0;transform:rotate(8deg)}
.meme-note-front {background:var(--red);left:0;top:145px;transform:rotate(-5deg);transition:transform .4s var(--ease)}
.meme-art:hover .meme-note-front {transform:rotate(-2deg) translateY(-5px)}
.meme-note-star {position:absolute;right:22px;bottom:22px;font-size:55px}
.meme-note-bottom {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:25px;font-size:10px;font-weight:800;line-height:1.5;letter-spacing:.07em}
.meme-note-bottom>span:last-child {font-size:48px;line-height:1}
.meme-art-caption {position:absolute;bottom:0;left:10px;font-size:9px;letter-spacing:.11em;font-weight:800}
.meme-section h2 {font:850 clamp(34px,4.5vw,66px)/1.08 "Apex Display",Arial,sans-serif;letter-spacing:-.025em;margin:25px 0 40px}
.meme-split {display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,7vw,110px)}
.meme-split h2 {margin-top:0}
.meme-split p:first-child {margin-top:0}
.meme-position {background:var(--red)}
.meme-position .star {color:var(--ink)}
.meme-service-list {border-top:2px solid var(--ink)}
.meme-service-list article {display:grid;grid-template-columns:45px 1fr 1.4fr;gap:24px;align-items:start;padding:30px 0;border-bottom:2px solid var(--ink)}
.meme-service-list h3 {font-size:clamp(22px,2.3vw,32px);letter-spacing:-.03em;line-height:1.15;margin:0}
.meme-service-list p {margin:0}
.meme-process {background:var(--blue)}
.meme-process ol {list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:0;margin:0}
.meme-process li {border-top:2px solid var(--ink);padding-top:24px}
.meme-process h3 {font:850 clamp(32px,4vw,55px)/1 "Apex Display",Arial,sans-serif;margin:0 0 22px;letter-spacing:-.02em}
.meme-brief {background:var(--ink);color:var(--ivory)}
.meme-text-link {font-size:17px;font-weight:800;text-underline-offset:5px}
.meme-text-link:hover {color:var(--red)}
.meme-questions {border-top:2px solid var(--ink)}
.meme-questions details {border-bottom:2px solid var(--ink);padding:24px 0}
.meme-questions summary {display:flex;justify-content:space-between;gap:24px;cursor:pointer;font-size:clamp(18px,2vw,24px);font-weight:800;line-height:1.4;list-style:none}
.meme-questions summary::-webkit-details-marker {display:none}
.meme-questions summary::after {content:'+';flex:none;font-size:29px;line-height:1}
.meme-questions details[open] summary::after {content:'−'}
.meme-questions details p {margin:20px 0 0}
.meme-cta {text-align:center;background:var(--red);display:grid;justify-items:center;gap:24px}
.meme-cta h2,.meme-cta p {margin:0}
.meme-cta .pill {background:var(--ivory)}
.meme-email {font-size:16px;text-underline-offset:5px}
body[data-page="meme-marketing"] .footer {border-top:0}
@media(max-width:767px) {
 .meme-hero,.meme-split {grid-template-columns:minmax(0,1fr)}
 .meme-hero {gap:45px}
 .meme-art {max-width:360px;min-height:440px;margin-top:8px}
 .meme-note {padding:24px}
 .meme-note-front {top:135px}
 .meme-note strong {font-size:clamp(30px,9vw,44px)}
 .meme-section h2 {margin-bottom:30px}
 .meme-service-list article {grid-template-columns:30px minmax(0,1fr);gap:16px}
 .meme-service-list article p {grid-column:2}
 .meme-process ol {grid-template-columns:1fr;gap:25px}
 .meme-split {gap:15px}
 .meme-questions details {padding:22px 0}
}

.meme-hero h1 {color:var(--type-fill);-webkit-text-stroke:2px var(--type-edge);paint-order:stroke fill;text-shadow:-1px 1px var(--type-edge),-3px 3px var(--type-edge),-5px 5px var(--type-edge),-7px 7px var(--type-edge),-9px 9px var(--type-edge)}