IAC
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
:root {
--ink: #0d0c0a;
--paper: #f0ece3;
--gold: #5c9464;
--rust: #2d6b3a;
--slate: #2a2d35;
--ghost: rgba(240,236,227,0.04);
--line: rgba(240,236,227,0.1);
}
body {
background: var(--ink);
color: var(--paper);
font-family: 'Courier Prime', monospace;
cursor: none;
overflow-x: hidden;
}
/* CURSOR */
.cursor {
position: fixed;
width: 8px; height: 8px;
background: var(--gold);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.2s, height 0.2s;
mix-blend-mode: difference;
}
.cursor.expand { width: 36px; height: 36px; background: rgba(92,148,100,0.2); }
/* ===== HERO ===== */
#hero {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: radial-gradient(ellipse 90% 70% at 50% 56%,
rgba(18, 56, 24, 0.78) 0%,
rgba(10, 32, 14, 0.50) 42%,
rgba(13, 12, 10, 0) 100%);
}
#heroCanvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.hero-center {
position: relative;
z-index: 10;
text-align: center;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-sub {
font-family: 'Courier Prime', monospace;
font-size: 11px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
opacity: 0;
animation: revealUp 1.6s ease 1.8s forwards;
margin-top: 10px;
}
@keyframes revealUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.scroll-signal {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
opacity: 0;
animation: fadeIn 1s ease 3.2s forwards;
}
.scroll-signal span { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,236,227,0.3); }
.scroll-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.3} 50%{opacity:1} }
@keyframes fadeIn { to { opacity:1 } }
/* ===== DEEP CONTENT ===== */
#deep { background: var(--ink); }
/* STATEMENT */
.statement-block {
min-height: 100vh;
display: flex;
align-items: center;
padding: 120px 80px;
border-top: 1px solid var(--line);
}
.statement-grid {
display: grid;
grid-template-columns: 100px 1fr;
gap: 80px;
max-width: 1300px;
margin: 0 auto;
width: 100%;
}
.statement-index { font-size: 10px; letter-spacing: 0.2em; color: var(--gold); opacity: 0.5; padding-top: 6px; }
.statement-body h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(34px, 4.5vw, 66px);
line-height: 1.1;
margin-bottom: 48px;
color: var(--paper);
}
.statement-body h2 em { font-style: italic; color: var(--gold); }
.statement-body p { font-size: 14px; line-height: 2.1; color: rgba(240,236,227,0.5); max-width: 600px; margin-bottom: 20px; }
.statement-body p strong { color: var(--paper); font-weight: 400; }
/* SECTION LABEL */
.sec-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.55;
padding: 80px 80px 56px;
border-top: 1px solid var(--line);
}
/* MOSAIC */
.mosaic {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2px;
padding: 0 2px 2px;
}
.cell {
background: rgba(240,236,227,0.03);
overflow: hidden;
position: relative;
cursor: none;
transition: background 0.4s;
}
.cell:hover { background: rgba(92,148,100,0.05); }
.cell:hover .c-surface { opacity: 0.08; }
.cell:hover .c-reveal { opacity: 1; transform: none; }
.cell-a { grid-column: 1/8; grid-row: 1; min-height: 460px; border-left: 2px solid var(--gold); }
.cell-d { grid-column: 8/13; grid-row: 1; min-height: 460px; }
.cell-e { grid-column: 1/5; grid-row: 2; min-height: 340px; border-left: 2px solid rgba(45,107,58,0.6); }
.cell-f { grid-column: 5/9; grid-row: 2; min-height: 340px; }
.cell-g { grid-column: 9/13; grid-row: 2; min-height: 340px; }
.cell-h { grid-column: 1/13; grid-row: 3; min-height: 280px; }
.c-surface {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.5s;
}
.c-reveal {
position: absolute; inset: 0;
padding: 40px;
display: flex; flex-direction: column; justify-content: space-between;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.c-tag { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.c-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(20px,2.4vw,36px); line-height: 1.15; color: var(--paper); margin: 14px 0 12px; }
.c-text { font-size: 12px; line-height: 1.9; color: rgba(240,236,227,0.48); max-width: 440px; }
.c-mark { font-size: 9px; letter-spacing: 0.14em; color: rgba(240,236,227,0.18); align-self: flex-end; }
/* MARQUEE */
.marquee-wrap {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
white-space: nowrap;
margin: 80px 0;
}
.marquee-inner {
display: inline-flex;
animation: marquee 32s linear infinite;
}
.marquee-phrase {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(16px,2.2vw,26px);
font-style: italic;
font-weight: 300;
color: rgba(240,236,227,0.18);
padding: 28px 56px;
border-right: 1px solid var(--line);
flex-shrink: 0;
transition: color 0.3s;
}
.marquee-phrase:hover { color: var(--gold); }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
/* DISCIPLINES */
.disciplines { padding: 60px 80px 120px; max-width: 1300px; margin: 0 auto; }
.disc-row {
display: grid;
grid-template-columns: 72px 1fr 1fr;
gap: 40px;
padding: 32px 0;
border-bottom: 1px solid var(--line);
align-items: start;
position: relative;
overflow: hidden;
}
.disc-row::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0; height: 1px;
background: var(--gold);
transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
.disc-row:hover::after { width: 100%; }
.disc-num { font-size: 10px; letter-spacing: 0.15em; color: var(--gold); opacity: 0.45; padding-top: 4px; }
.disc-name { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(20px,2.4vw,32px); line-height: 1.1; color: var(--paper); }
.disc-desc { font-size: 12px; line-height: 1.95; color: rgba(240,236,227,0.38); padding-top: 5px; }
/* TEAM */
.team-section { border-top: 1px solid var(--line); padding: 100px 80px; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 64px; }
.team-card {
border: 1px solid var(--line);
padding: 56px 48px;
transition: background 0.3s;
}
.team-card:hover { background: rgba(92,148,100,0.04); }
.team-card + .team-card { border-left: none; }
.team-role { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); opacity: 0.6; margin-bottom: 20px; }
.team-name { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(26px,3vw,42px); line-height: 1.05; color: var(--paper); margin-bottom: 16px; }
.team-bio { font-size: 12px; line-height: 1.95; color: rgba(240,236,227,0.42); max-width: 400px; margin-bottom: 32px; }
.team-link { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(92,148,100,0.28); padding-bottom: 2px; transition: opacity 0.2s; }
.team-link:hover { opacity: 0.7; }
/* CLOSE / CONTACT */
.close-block {
min-height: 90vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
padding: 120px 80px;
border-top: 1px solid var(--line);
position: relative; overflow: hidden;
}
.close-bg {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.close-bg-word {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(120px,18vw,300px);
font-weight: 300;
color: rgba(240,236,227,0.02);
letter-spacing: 0.1em;
white-space: nowrap;
}
.close-eyebrow { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); opacity: 0.7; margin-bottom: 40px; position: relative; z-index: 2; }
.close-headline { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(38px,6vw,88px); line-height: 1.05; color: var(--paper); margin-bottom: 36px; position: relative; z-index: 2; }
.close-headline em { font-style: italic; color: var(--gold); }
.close-body { font-size: 13px; line-height: 2.1; color: rgba(240,236,227,0.38); max-width: 480px; margin: 0 auto 60px; position: relative; z-index: 2; }
.cta-btn {
display: inline-block;
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink); background: var(--gold);
padding: 18px 44px;
text-decoration: none;
position: relative; z-index: 2;
transition: background 0.25s;
}
.cta-btn:hover { background: var(--paper); }
/* FOOTER */
footer {
padding: 32px 80px;
border-top: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center;
}
.foot-mark { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; letter-spacing: 0.2em; color: rgba(240,236,227,0.28); }
.foot-right { display: flex; gap: 40px; align-items: center; }
.foot-link { font-size: 10px; letter-spacing: 0.12em; color: rgba(240,236,227,0.2); text-decoration: none; transition: color 0.2s; }
.foot-link:hover { color: var(--gold); }
.foot-copy { font-size: 10px; letter-spacing: 0.1em; color: rgba(240,236,227,0.12); }
/* SCROLL REVEAL */
.r {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.r.on { opacity: 1; transform: none; }
.d1 { transition-delay: 0.12s; }
.d2 { transition-delay: 0.26s; }
.d3 { transition-delay: 0.42s; }
/* RESPONSIVE */
@media (max-width: 900px) {
.statement-block, .disciplines, .close-block, .team-section { padding: 80px 24px; }
.sec-label { padding: 60px 24px 40px; }
.statement-grid { grid-template-columns: 1fr; gap: 32px; }
.mosaic { grid-template-columns: 1fr 1fr; }
.cell-a,.cell-d,.cell-e,.cell-f,.cell-g,.cell-h { grid-column:auto; grid-row:auto; min-height:260px; }
.disc-row { grid-template-columns: 48px 1fr; }
.disc-desc { display: none; }
.team-grid { grid-template-columns: 1fr; }
.team-card + .team-card { border-left: 1px solid var(--line); border-top: none; }
footer { padding: 28px 24px; flex-direction: column; gap: 16px; text-align: center; }
}
Strategic Creative Infrastructure
001
Creative that understands
the system it serves.
Most creative work fails not because it is poorly made. It fails because the people who made it did not understand the operational reality it was supposed to change.
IAC is a hybrid studio. Enterprise creative infrastructure on one side. Original IP development on the other. The skills that make a cold chain rebrand work — systems thinking, structural clarity, operational empathy — are the same skills that make children's IP commercially viable. One discipline sharpens the other.
We collaborate directly with leadership. We translate complexity into clarity. We build platforms designed to survive scale.
002 / Selected Work — hover each panel to read
Enterprise Rebrand + Technology Positioning
US Cold —
Best in Cold
A century-old cold chain operator. A technology organization hiding inside it. "Best in Cold" is not a tagline — it's a structural claim carrying executive messaging, event branding, recruiting architecture, and AI modernization storytelling simultaneously. 40+ facilities reframed as critical infrastructure. Employer narrative rebuilt around Builders, System Thinkers, and Mission Leaders.
Brand / Campaign / Employer Brand / AI Narrative
IP Development
Mighty Tails
STEAM-focused animated IP blending advanced air mobility, science education, and narrative adventure. Built as an ecosystem from day one: character architecture, world-building, curriculum alignment, cross-media scalability. Not a pilot and a logo — a platform.
IP / Animation / Education / World-Building
001 / The Distinction
Operational credibility meets creative direction.
Most agencies understand stories. Most ops firms understand systems. We understand both — and that changes how we ask questions, how fast we find insight, and what we actually build. Creative that needs no translator between the boardroom and the operations floor.
The thing that makes IAC different
∞
Studio Model
Enterprise + IP. Both. By design.
The breadth is not accidental. A cold chain rebrand and a children's animated world require identical foundational skills: systems thinking, structural clarity, the ability to build something that scales. One discipline keeps the other honest.
Hybrid Studio
Build.
Approach
We build platforms, not deliverables.
A deliverable ends when you receive it. A platform keeps working. Every engagement is designed to outlast the project — reusable campaign architecture, scalable visual systems, narrative frameworks your team can operate without us.
How we work
Verticals
Cold Chain. AI. Aerospace. Education. Enterprise.
Cold chain logistics networks. Azure microservices migrations. Advanced air mobility programs. AI transformation initiatives. Multi-platform entertainment IP. That is not portfolio range — it is a working knowledge base that changes how we create.
Domain fluency
Creative that understands the system it serves
Platforms, not deliverables
Operational credibility changes what you build
Builders. System Thinkers. Mission Leaders.
Scale is a design requirement
Brand is architecture, not decoration
We do not design for applause
Creative that understands the system it serves
Platforms, not deliverables
Operational credibility changes what you build
Builders. System Thinkers. Mission Leaders.
Scale is a design requirement
Brand is architecture, not decoration
We do not design for applause
003 / Disciplines
01
Brand Systems
Positioning architecture. Naming frameworks. Visual identity systems. Enterprise rollout toolkits. We build brands designed to survive organizational scale — 40+ facilities, multiple divisions, years of use.
02
Campaign Platforms
Regional expansion campaigns. Infrastructure storytelling. Trade show and conference systems. Internal transformation campaigns. Launches that align leadership, sales, and operations simultaneously.
03
Employer Brand for Builders
Psychographic hiring narrative. JD architecture. Recruiting campaign systems. We attract Builders, System Thinkers, and Mission Leaders — candidates who understand mission-critical infrastructure.
04
AI + Infrastructure Storytelling
Modernization narrative. Digital twin visualization. Technology roadmap systems. We make transformation visible — bridging the gap between what your engineers are building and what the market understands.
05
IP Development + Educational Media
Character architecture. World-building systems. Curriculum alignment. Cross-media scalability. Original intellectual property built with commercial and educational intent from the first document forward.
004 / The Team
Creative
Jon-Michal Marr
AI acceleration, brand platforms, and campaign creation. The creative infrastructure behind every engagement — from cold chain repositioning to animated IP world-building.
LinkedIn →
Strategy
Tiffany Jones
Communication strategies, program management, and leadership tactics. The strategic backbone connecting creative direction to organizational reality across complex, multi-stakeholder engagements.
LinkedIn →
005 / Contact
If it needs to
actually work,
we should talk.
Modernizing infrastructure. Scaling engineering teams. Repositioning a legacy brand. Launching a new platform. Building original IP. If execution is the requirement, start here.
Start a Project
/* CURSOR */
const cursor = document.getElementById('cursor');
document.addEventListener('mousemove', e => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
document.querySelectorAll('a, .cell, button').forEach(el => {
el.addEventListener('mouseenter', () => cursor.classList.add('expand'));
el.addEventListener('mouseleave', () => cursor.classList.remove('expand'));
});
/* CANVAS — sized via window dimensions, not offsetWidth */
const canvas = document.getElementById('heroCanvas');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
const GOLD = [184, 147, 90];
const PAPER = [240, 236, 227];
const N = 100;
class Node {
constructor() { this.reset(); }
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (Math.random() - 0.5) * 0.38;
this.vy = (Math.random() - 0.5) * 0.38;
this.r = Math.random() * 1.6 + 0.6;
this.col = Math.random() > 0.82 ? GOLD : PAPER;
this.alpha = Math.random() * 0.55 + 0.22;
}
update() {
this.x += this.vx;
this.y += this.vy;
if (this.x canvas.width) this.vx *= -1;
if (this.y canvas.height) this.vy *= -1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${this.col.join(',')},${this.alpha})`;
ctx.fill();
}
}
const nodes = Array.from({ length: N }, () => new Node());
const DIST = 170;
const DIST2 = DIST * DIST;
let mx = -9999, my = -9999;
document.getElementById('hero').addEventListener('mousemove', e => {
mx = e.clientX; my = e.clientY;
});
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
/* soft center glow */
const g = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, canvas.width * 0.65);
g.addColorStop(0, 'rgba(14, 46, 20, 0.5)');
g.addColorStop(1, 'rgba(13,12,10,0)');
ctx.fillStyle = g;
ctx.fillRect(0, 0, canvas.width, canvas.height);
/* edges */
for (let i = 0; i < N; i++) {
for (let j = i + 1; j < N; j++) {
const dx = nodes[i].x - nodes[j].x;
const dy = nodes[i].y - nodes[j].y;
const d2 = dx*dx + dy*dy;
if (d2 {
n.update();
const dx = n.x - mx;
const dy = n.y - my;
const d = Math.sqrt(dx*dx + dy*dy);
if (d 0) {
const f = (130 - d) / 130 * 0.55;
n.vx += (dx/d) * f;
n.vy += (dy/d) * f;
const spd = Math.sqrt(n.vx*n.vx + n.vy*n.vy);
if (spd > 2.2) { n.vx = n.vx/spd*2.2; n.vy = n.vy/spd*2.2; }
}
n.vx *= 0.999; n.vy *= 0.999;
n.draw();
});
}
animate();
/* SCROLL REVEAL */
const reveals = document.querySelectorAll('.r');
const ro = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) { e.target.classList.add('on'); ro