@font-face{font-family:Anton;src:url('assets/fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk[wght].ttf') format('truetype');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/IBMPlexMono-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
.splash{position:relative;isolation:isolate}
[data-layout=center] .splash{min-height:calc(88svh - var(--header-height))}
[data-layout=center] .identity{padding-bottom:32px}
[data-layout=center] .services{padding-top:72px}
@media(max-width:760px){
  [data-layout=center] .splash{min-height:calc(92svh - var(--header-height))}
  [data-layout=center] .services{padding-top:48px}
}
.identity,.details{position:relative;z-index:1}
.identity{pointer-events:none}
[data-motion=on] .identity>.totem{visibility:hidden}
.details{background:linear-gradient(0deg,var(--ink),#090909c9)}
.motion-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;mask-image:linear-gradient(180deg,transparent,#000 15%,#000 75%,transparent)}
@media(max-width:760px){.motion-stage{left:-20px;right:-20px}}
.totem-motion{position:absolute;width:clamp(680px,78vw,1150px);aspect-ratio:1;left:50%;top:44%;transform:translate(-50%,-50%);opacity:.2}
.totem-motion img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.motion-base{filter:brightness(0) saturate(100%) invert(44%) sepia(51%) saturate(1809%) hue-rotate(330deg) brightness(92%) contrast(90%)}
.motion-slice{opacity:0;pointer-events:none}
.motion-scan{opacity:.85;animation:scan-pass 4.8s linear infinite;clip-path:inset(10% 0 80% 0)}
.slice-one{background:var(--ink);animation:print-slice 4.8s steps(1,end) infinite}
.slice-two{animation:print-offset 4.8s steps(1,end) infinite}
@keyframes scan-pass{0%{clip-path:inset(10% 0 80% 0)}70%,100%{clip-path:inset(100% 0 0 0)}}
@keyframes print-slice{0%{opacity:1;clip-path:inset(28% 0 62% 0);transform:translateX(18px)}4%{opacity:1;clip-path:inset(43% 0 48% 0);transform:translateX(-22px)}9%{opacity:1;clip-path:inset(59% 0 35% 0);transform:translateX(12px)}15%{opacity:1;clip-path:inset(36% 0 53% 0);transform:translateX(-14px)}21%,52%{opacity:0;transform:none;clip-path:inset(0)}53%{opacity:1;clip-path:inset(67% 0 24% 0);transform:translateX(-18px)}59%{opacity:1;clip-path:inset(18% 0 72% 0);transform:translateX(22px)}65%{opacity:1;clip-path:inset(48% 0 47% 0);transform:translateX(-12px)}73%,100%{opacity:0;transform:none;clip-path:inset(0)}}
@keyframes print-offset{0%{opacity:.5;transform:translate(6px,-2px)}4%{opacity:.32;transform:translate(-5px,1px)}9%{opacity:.4;transform:translate(4px,0)}15%{opacity:.22;transform:translate(-3px,1px)}21%,52%{opacity:0;transform:none}53%{opacity:.45;transform:translate(-6px,0)}59%{opacity:.3;transform:translate(5px,-1px)}65%{opacity:.22;transform:translate(-3px,0)}73%,100%{opacity:0;transform:none}}
.motion-paused .totem-motion,.motion-paused .motion-scan,.motion-paused .motion-slice{animation-play-state:paused}
.motion-paused .motion-slice{visibility:hidden}
[data-motion=off] .motion-stage{display:none}
@media(prefers-reduced-motion:reduce){.totem-motion{animation:none!important}.motion-slice,.motion-scan{animation:none!important;display:none}}
[data-variant=poster] h1{font-family:Anton,Impact,sans-serif;font-size:clamp(64px,10vw,154px);font-weight:400;letter-spacing:-.025em;word-spacing:.02em;line-height:1.03}
[data-variant=poster] .nav-brand{font-family:Anton,Impact,sans-serif;font-size:23px;font-weight:400;letter-spacing:0}
[data-variant=poster] .main-nav a{text-transform:uppercase;font-size:12px;letter-spacing:.08em}
[data-variant=grotesk] h1{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:clamp(56px,8.1vw,124px);letter-spacing:-.065em}
[data-variant=grotesk] .nav-brand{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.06em}
[data-variant=grotesk] .main-nav a{font-family:'Space Grotesk',Arial,sans-serif;font-size:15px}
[data-variant=mono] h1{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:clamp(48px,7.2vw,110px);letter-spacing:-.06em;word-spacing:-.12em}
[data-variant=mono] .nav-brand{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:17px;letter-spacing:-.05em}
[data-variant=mono] .main-nav a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:-.02em}
[data-variant=mono] .descriptor{font-family:'IBM Plex Mono',monospace;letter-spacing:.18em}
.study-controls{position:fixed;z-index:25;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;padding:6px;background:#171513f5;border:1px solid #51483e;border-radius:3px;box-shadow:0 8px 32px #0008;gap:4px;max-width:calc(100% - 24px);font-family:Geist,Arial,sans-serif}
.study-variants{display:flex;gap:4px}
.study-controls button,.study-controls>a{border:0;background:none;color:var(--muted);text-decoration:none;font:inherit;font-size:12px;white-space:nowrap;padding:12px 14px;min-height:42px;cursor:pointer}
.study-controls button[aria-pressed=true][data-choice]{background:var(--paper);color:var(--ink)}
.study-controls button:hover,.study-controls>a:hover{color:var(--paper)}
.study-controls button[aria-pressed=true][data-choice]:hover{color:var(--ink)}
.study-controls button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.study-controls button span{font-size:10px;opacity:.55;margin-right:7px}
.study-controls .motion-toggle{border-left:1px solid #51483e;margin-left:4px;color:var(--paper)}
.site-footer{padding-bottom:100px}
@media(min-width:761px){[data-variant=grotesk] .header-inner{display:grid;grid-template-columns:1fr 1fr 2fr 1fr 1fr;gap:24px}[data-variant=grotesk] .main-nav{display:contents}[data-variant=grotesk] .nav-brand{grid-column:3;grid-row:1;justify-content:center}[data-variant=grotesk] .main-nav a{grid-row:1;justify-content:center}[data-variant=grotesk] .main-nav a:nth-child(1){grid-column:1;justify-content:flex-start}[data-variant=grotesk] .main-nav a:nth-child(2){grid-column:2;justify-content:flex-start}[data-variant=grotesk] .main-nav a:nth-child(3){grid-column:4;justify-content:flex-end}[data-variant=grotesk] .main-nav a:nth-child(4){grid-column:5;justify-content:flex-end}[data-variant=mono] .main-nav{gap:24px}[data-variant=mono] .main-nav a:before{content:'/';color:var(--red);margin-right:8px}}
@media(max-width:760px){.totem-motion{width:650px;opacity:.07;top:36%}[data-variant=poster] h1{font-size:clamp(42px,13vw,90px)}[data-variant=poster] .nav-brand{font-size:20px}[data-variant=grotesk] h1{font-size:clamp(34px,9.7vw,72px)}[data-variant=grotesk] .nav-brand{font-size:18px}[data-variant=mono] h1{font-size:clamp(30px,8.5vw,62px)}[data-variant=mono] .nav-brand{font-size:14px}.main-nav a{font-size:20px!important}.study-controls{flex-wrap:wrap;justify-content:center;width:max-content;bottom:10px;gap:0;padding:4px}.study-variants{width:100%;justify-content:center;border-bottom:1px solid #51483e;padding-bottom:4px}.study-controls button,.study-controls>a{font-size:11px;padding:8px 9px;min-height:38px}.study-controls button span{display:none}.study-controls .motion-toggle{border:0;margin:0}.details{padding-bottom:118px}}
@media(max-width:760px){.totem-motion{opacity:.12}}

/* Each direction carries the same type hierarchy through the full page. */
[data-variant=poster]{--display-family:Anton,Impact,sans-serif;--display-weight:400;--display-tracking:-.01em;--display-case:uppercase}
[data-variant=grotesk]{--display-family:'Space Grotesk',Arial,sans-serif;--display-weight:600;--display-tracking:-.045em;--display-case:none}
[data-variant=mono]{--display-family:'IBM Plex Mono',monospace;--display-weight:600;--display-tracking:-.04em;--display-case:none}
.content-section h2,.process-list h3,.service-list dt,.approach-copy .lead,.write-link{font-family:var(--display-family);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:var(--display-case)}
.email,.direct-email{font-family:var(--display-family);font-weight:var(--display-weight);letter-spacing:var(--display-tracking)}
.step,.site-footer>span:first-child{font-family:var(--display-family);font-weight:var(--display-weight)}
[data-variant=poster] .content-section h2{font-size:clamp(40px,5.2vw,76px);line-height:1.08}
[data-variant=poster] .service-list dt{font-size:clamp(27px,2.8vw,40px);line-height:1.15}
[data-variant=poster] .process-list h3{font-size:clamp(48px,5.5vw,80px);line-height:1}
[data-variant=poster] .approach-copy .lead{font-size:clamp(32px,3.6vw,50px);line-height:1.15}
[data-variant=poster] .get-in-touch h2{font-size:clamp(60px,8.2vw,120px);line-height:1.04}
[data-variant=poster] .write-link{font-size:28px}
[data-variant=poster] .email{font-size:25px;letter-spacing:0}
[data-variant=poster] .site-footer>span:first-child{font-size:17px;text-transform:uppercase;line-height:1}
[data-variant=grotesk] .contact-copy .lead{font-family:'Space Grotesk',Arial,sans-serif;font-weight:500}
[data-variant=mono] .service-list dt{font-size:clamp(20px,2.05vw,28px);line-height:1.35}
[data-variant=mono] .content-section h2{font-size:clamp(30px,3.8vw,54px);line-height:1.15}
[data-variant=mono] .process-list h3{font-size:clamp(34px,3.9vw,56px);line-height:1.15}
[data-variant=mono] .approach-copy .lead{font-size:clamp(24px,2.6vw,36px);line-height:1.3}
[data-variant=mono] .get-in-touch h2{font-size:clamp(46px,6.5vw,92px);line-height:1.08}
[data-variant=mono] .direct-email{font-size:clamp(19px,2.1vw,31px)}
@media(max-width:760px){[data-variant=poster] .content-section h2{font-size:42px}[data-variant=poster] .service-list dt{font-size:29px}[data-variant=poster] .process-list h3{font-size:50px}[data-variant=poster] .get-in-touch h2{font-size:clamp(43px,11vw,72px)}[data-variant=poster] .approach-copy .lead{font-size:32px}[data-variant=mono] .service-list dt{font-size:20px}[data-variant=mono] .process-list h3{font-size:34px}[data-variant=mono] .get-in-touch h2{font-size:clamp(33px,9vw,58px)}[data-variant=mono] .email{font-size:clamp(16px,4.8vw,21px);gap:12px}[data-variant=mono] .direct-email{font-size:clamp(17px,5.4vw,26px)}}

.hero-copy{display:contents}
.nav-brand{gap:12px}
.nav-totem{display:block;flex-shrink:0;width:44px;height:44px;object-fit:contain;filter:brightness(0) saturate(100%) invert(44%) sepia(51%) saturate(1809%) hue-rotate(330deg) brightness(92%) contrast(90%)}
.study-controls{display:grid;grid-template-columns:1fr auto auto}
.study-layouts{grid-column:1/-1;display:flex;justify-content:center;gap:4px;padding-bottom:5px;border-bottom:1px solid #51483e}
.study-controls button[aria-pressed=true][data-layout-choice]{background:var(--paper);color:var(--ink)}
.study-variants button{font-size:16px;padding:12px 18px;min-height:48px}
.study-variants button span{font-size:12px;opacity:.75;margin-right:8px}
.details{padding-bottom:140px}
@media(min-width:761px){
  [data-layout=left] .splash,[data-layout=right] .splash{min-height:0}
  [data-layout=left] .identity,[data-layout=right] .identity{display:grid;flex:none;grid-template-columns:44% 50%;gap:6%;text-align:left;align-items:center;padding:48px 0 56px}
  [data-layout=left] .hero-copy,[data-layout=right] .hero-copy{display:block;min-width:0}
  [data-layout=left] .identity>.totem,[data-layout=right] .identity>.totem{width:100%;max-width:420px;margin:0;justify-self:center}
  [data-layout=left] h1 span,[data-layout=right] h1 span{display:block}
  [data-layout=left] h1,[data-layout=right] h1{font-size:clamp(68px,8.5vw,138px);line-height:1.02;letter-spacing:-.025em}
  [data-variant=grotesk][data-layout=left] h1,[data-variant=grotesk][data-layout=right] h1{font-size:clamp(58px,7.3vw,116px);letter-spacing:-.055em}
  [data-variant=mono][data-layout=left] h1,[data-variant=mono][data-layout=right] h1{font-size:clamp(48px,6.1vw,98px);letter-spacing:-.055em}
  [data-layout=left] .descriptor,[data-layout=right] .descriptor{margin-top:26px}
  [data-layout=left] .intro,[data-layout=right] .intro{margin-top:32px;max-width:440px}
  [data-layout=left] .totem-motion{left:23%;top:43%;width:clamp(340px,38vw,600px)}
  [data-layout=left] .details,[data-layout=right] .details{padding-bottom:32px}
  [data-layout=right] .identity{grid-template-columns:54% 40%}
  [data-layout=right] .hero-copy{grid-column:1;grid-row:1}
  [data-layout=right] .identity>.totem{grid-column:2;grid-row:1}
  [data-layout=right] .totem-motion{left:79%;top:43%;width:clamp(340px,38vw,600px)}
  [data-layout=masthead] .identity{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:24px 64px;text-align:left;align-items:center;padding:64px 0 72px}
  [data-layout=masthead] h1{grid-column:1/-1;grid-row:1;justify-self:start}
  [data-layout=masthead] .descriptor{grid-column:1/-1;grid-row:2;margin:0}
  [data-layout=masthead] .identity>.totem{grid-column:1;grid-row:3;justify-self:center;width:clamp(220px,24vw,360px);margin:0}
  [data-layout=masthead] .intro{grid-column:2;grid-row:3;justify-self:start;font-size:clamp(22px,2.4vw,34px);margin:0}
  [data-layout=masthead] .totem-motion{left:23%;top:59%;width:clamp(400px,42vw,650px)}
}
@media(max-width:760px){
  .nav-brand{gap:9px}
  .nav-totem{width:34px;height:34px}
  .study-controls{display:flex;width:calc(100% - 24px);max-width:420px}
  .study-variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}
  .study-variants button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;white-space:normal;font-size:14px;line-height:1.2;padding:10px 6px;min-height:64px}
  .study-variants button span{display:block;font-size:11px;margin:0}
  .study-layouts{width:100%;gap:0;padding-bottom:4px}
  .study-layouts button{font-size:10px;padding:8px 9px;min-height:36px}
  .details{padding-bottom:165px}
  [data-layout=left] .splash,[data-layout=right] .splash{min-height:0}
  [data-layout=left] .identity,[data-layout=right] .identity{display:grid;flex:none;grid-template-columns:1fr;gap:20px;justify-items:start;text-align:left;padding:24px 0 32px}
  [data-layout=left] .hero-copy,[data-layout=right] .hero-copy{display:block;min-width:0}
  [data-layout=left] .identity>.totem,[data-layout=right] .identity>.totem{width:170px;margin:0;justify-self:center}
  [data-layout=left] .details,[data-layout=right] .details{padding-bottom:32px}
  [data-layout=left] .hero-copy{grid-row:2}
  [data-layout=left] .identity>.totem{grid-row:1}
  [data-layout=right] .hero-copy{grid-row:1}
  [data-layout=right] .identity>.totem{grid-row:2}
  [data-layout=left] .totem-motion{left:50%;top:22%;width:340px}
  [data-layout=right] .totem-motion{left:50%;top:49%;width:340px}
  [data-layout=left] .descriptor,[data-layout=right] .descriptor{margin-top:18px}
  [data-layout=left] .intro,[data-layout=right] .intro{margin-top:24px;font-size:18px}
  [data-layout=masthead] .identity{display:grid;grid-template-columns:1fr;gap:18px;text-align:left;justify-items:start;padding:38px 0 44px}
  [data-layout=masthead] h1{grid-row:1}
  [data-layout=masthead] .descriptor{grid-row:2;margin:0}
  [data-layout=masthead] .identity>.totem{grid-row:3;width:200px;margin:8px 0;justify-self:center}
  [data-layout=masthead] .intro{grid-row:4;margin:0;font-size:18px}
  [data-layout=masthead] .totem-motion{left:50%;top:36%;width:360px}
}

/* A small brand mark centered independently of the footer labels. */
.site-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px}
.site-footer>span:last-child{justify-self:end;text-align:right}
.footer-totem{display:block;width:34px;height:34px;object-fit:contain;filter:brightness(0) saturate(100%) invert(44%) sepia(51%) saturate(1809%) hue-rotate(330deg) brightness(92%) contrast(90%)}
@media(max-width:760px){.footer-totem{width:28px;height:28px}.site-footer{column-gap:12px}}
