@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/3ada4101c3ed.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/b9beea08045a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/a3b94a5a967d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/52ea38a7d8d6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/a3b94a5a967d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/52ea38a7d8d6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/3546a0201aaf.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/c20b57f6f4e8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/4af8cef522bd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/bb87500e3204.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/3e942f428e7d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/d32f0e0701ac.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/b2a55e977d1b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/d8a316f7cbfa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/b2a55e977d1b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/d8a316f7cbfa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/b2a55e977d1b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/d8a316f7cbfa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--canvas: #e8e8e4;
--paper: #f4f4f1;
--ink: #121211;
--muted: #55554f;
--rule: rgba(18, 18, 17, 0.16);
--display: "Anton", "Impact", "Arial Narrow", sans-serif;
--sans: "Outfit", system-ui, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, monospace;
--serif: "Cormorant Garamond", Georgia, serif;
--pad: clamp(16px, 2.2vw, 32px);
--gap: 12px;
--radius: 10px;
--ease: cubic-bezier(0.2, 0.75, 0.2, 1);
--c: var(--ink);
--on: var(--canvas);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--canvas); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 10px 14px; background: var(--ink); color: var(--canvas); border-radius: 999px; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hdr { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--pad); background: color-mix(in srgb, var(--canvas) 96%, transparent); }
.logo { font-family: var(--display); font-size: 22px; line-height: 1; text-transform: uppercase; }
.logo sup { font-family: var(--mono); font-size: 14px; top: -0.4em; margin-left: 2px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 500 15px/1 var(--sans); white-space: nowrap; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.pill:hover, .pill[aria-current="page"] { background: var(--ink); color: var(--canvas); }
.pill.dark { background: var(--ink); color: var(--canvas); }
.pill.dark:hover { background: transparent; color: var(--ink); }
.pill sup { font-family: var(--mono); font-size: 14px; top: 0; }
.fit { display: block; width: 100%; margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.86; white-space: nowrap; letter-spacing: -0.005em; font-size: 15.4vw; }
.fit > span { display: inline-block; }
.fit.ready > span { animation: rise 1s var(--ease) both; }
.sec { padding-top: clamp(72px, 9vw, 140px); }
.sec-head { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 16px; font-weight: 500; }
.sec-head .grow { flex: 1; }
.sec-head .mono { color: var(--muted); }
.sec-head a.mono { color: var(--ink); }
.sec-head a.mono:hover { text-decoration: underline; text-underline-offset: 3px; }
.sec-title { margin: 0; font: 400 clamp(56px, 8vw, 132px)/0.86 var(--display); text-transform: uppercase; }
.hero { padding-top: 6px; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: end; padding: 22px 0 26px; }
.positioning { margin: 0; font: 500 clamp(28px, 3.3vw, 54px)/1.04 var(--sans); letter-spacing: -0.02em; max-width: 18ch; }
.hero-roles { list-style: none; margin: 0; padding: 0; justify-self: end; text-align: right; }
.hero-roles li { font-size: 17px; line-height: 1.5; }
.hero-roles li span { color: var(--muted); }
.lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.lane-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 260px; padding: 18px; border-radius: var(--radius); background: var(--c); color: var(--on); overflow: hidden; transition: transform 0.45s var(--ease); }
.lane-card:hover { transform: translateY(-4px); }
.lane-card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lane-card .top em { font-style: normal; font-size: 24px; line-height: 1; transition: transform 0.4s var(--ease); }
.lane-card:hover .top em { transform: translate(3px, -3px); }
.lane-card h2 { margin: 0; font: 400 clamp(40px, 4.4vw, 76px)/0.88 var(--display); text-transform: uppercase; }
.lane-card p { margin: 10px 0 0; font-size: 16px; font-weight: 500; line-height: 1.35; }
.lane-card .names { margin-top: 12px; padding-top: 12px; border-top: 1px solid currentColor; font-size: 16px; font-weight: 400; line-height: 1.4; }
.about-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); padding-top: 22px; align-items: start; }
.portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); background: var(--paper); }
.statement { margin: 0; font: italic 400 clamp(38px, 4.6vw, 76px)/1 var(--serif); letter-spacing: -0.01em; }
.lead { margin: 26px 0 0; max-width: 54ch; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; }
.roles { list-style: none; margin: 30px 0 0; padding: 0; }
.roles li { border-top: 1px solid var(--rule); }
.roles a { display: grid; grid-template-columns: 14px minmax(0, 1.1fr) minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 12px 0; font-size: 17px; }
.roles a i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.roles a span { color: var(--muted); font-size: 16px; }
.roles a em { font-style: normal; text-align: right; transition: transform 0.3s var(--ease); }
.roles a:hover em { transform: translateX(4px); }
.roles a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.roles strong { font-weight: 500; }
.more { display: inline-flex; margin-top: 26px; }
.stubs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); padding-top: 16px; }
.stub { display: flex; flex-direction: column; min-height: 250px; border-radius: var(--radius); overflow: hidden; background: var(--paper); transition: transform 0.4s var(--ease); }
.stub:hover { transform: translateY(-4px) rotate(-0.6deg); }
.stub b { flex: 1; display: flex; align-items: flex-end; padding: 18px; background: var(--c); color: var(--on); font: 400 clamp(56px, 6vw, 96px)/0.9 var(--display); }
.stub .tear { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 108px; padding: 16px 18px 18px; border-top: 2px dashed rgba(18, 18, 17, 0.28); }
.stub .tear::before, .stub .tear::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--canvas); }
.stub .tear::before { left: -8px; }
.stub .tear::after { right: -8px; }
.stub .tear span { font-size: 16px; line-height: 1.35; }
.stub small { font-family: var(--mono); font-size: 14px; text-transform: uppercase; color: var(--muted); }
.lane-block { padding-top: clamp(40px, 5vw, 72px); scroll-margin-top: 70px; }
.lane-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 24px; align-items: end; padding-bottom: 18px; }
.lane-head h3 { margin: 0; display: flex; align-items: center; gap: 0.25em; font: 400 clamp(48px, 6.2vw, 104px)/0.86 var(--display); text-transform: uppercase; }
.lane-head h3 i { flex: none; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--c); transform: translateY(-0.04em); }
.lane-head p { margin: 0; max-width: 44ch; justify-self: end; font-size: 17px; line-height: 1.45; }
.lane-head p .mono { display: block; margin-bottom: 8px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); }
.card { display: block; }
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--c); aspect-ratio: 4 / 3; isolation: isolate; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0) 40%), linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0) 22%); }
.card:hover .tile img { transform: scale(1.045); }
.tile .tag { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.tile .tag i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.tile .arrow { position: absolute; z-index: 2; top: 10px; right: 14px; color: #fff; font-size: 22px; transition: transform 0.4s var(--ease); }
.card:hover .tile .arrow { transform: translate(3px, -3px); }
.tile .name { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; color: #fff; font: 400 clamp(32px, 4.2vw, 68px)/0.9 var(--display); text-transform: uppercase; transition: transform 0.5s var(--ease); }
.tile .band { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 16px; background: var(--c); color: var(--on); font-size: 17px; font-weight: 500; transform: translateY(101%); transition: transform 0.5s var(--ease); }
.card:hover .tile .band, .card:focus-visible .tile .band { transform: none; }
.card:hover .tile .name, .card:focus-visible .tile .name { transform: translateY(-58px); }
.cap { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; }
.cap strong { font-size: 18px; font-weight: 500; }
.cap span { color: var(--muted); font-size: 16px; text-align: right; }
.brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 16px; }
.brand { display: grid; place-items: center; height: 128px; border-radius: var(--radius); background: var(--paper); transition: background 0.3s var(--ease); }
.brand:hover { background: #fff; }
.brand img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.brand span { font: italic 400 32px/1 var(--serif); }
.footer { padding-top: clamp(80px, 10vw, 160px); padding-bottom: 28px; }
.footer .fit { margin-top: 12px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.footer-note { margin: 22px 0 0; color: var(--muted); font-size: 14px; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 6px 0 14px; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs .lane-tag { display: inline-flex; align-items: center; gap: 8px; }
.crumbs .lane-tag i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.summary { margin: 22px 0 0; max-width: 26ch; font: italic 400 clamp(32px, 3.8vw, 64px)/1.02 var(--serif); letter-spacing: -0.01em; }
.meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; padding: 16px 0 26px; border-top: 1px solid var(--rule); }
.meta dt { margin-bottom: 6px; color: var(--muted); }
.meta dd { margin: 0; font-size: 17px; line-height: 1.4; }
.hero-img { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--c); aspect-ratio: 16 / 8.2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 22px 0 32px; border-top: 1px solid var(--rule); }
.row:first-of-type { margin-top: clamp(56px, 7vw, 110px); }
.row h2 { margin: 0; font: 500 14px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.02em; }
.row p { margin: 0; max-width: 60ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; }
.row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.row li { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--paper); font-size: 17px; }
.panel { margin-top: clamp(48px, 7vw, 100px); padding: clamp(20px, 3vw, 40px); border-radius: var(--radius); background: var(--c); color: var(--on); }
.panel-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: clamp(28px, 5vw, 72px); font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 28px; }
.stat b { display: block; font: 400 clamp(60px, 8.6vw, 160px)/0.86 var(--display); }
.stat span { display: block; max-width: 26ch; margin-top: 12px; font-size: 19px; font-weight: 500; line-height: 1.35; }
.stats.flow .stat { position: relative; }
.stats.flow .stat + .stat::before { content: "→"; position: absolute; left: -24px; top: 0.12em; font-size: clamp(28px, 3vw, 48px); }
.learned { margin: clamp(56px, 8vw, 120px) 0 0; max-width: 28ch; font: italic 400 clamp(32px, 4vw, 64px)/1.05 var(--serif); }
.learned::before { content: "What I took from it"; display: block; margin-bottom: 18px; font: 500 14px/1.4 var(--mono); font-style: normal; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.gallery { padding-top: clamp(56px, 8vw, 120px); }
.ggrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap); padding-top: 16px; }
.ggrid figure { margin: 0; overflow: hidden; border-radius: 6px; aspect-ratio: 1 / 1; background: var(--c); }
.ggrid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.ggrid figure:hover img { transform: scale(1.06); }
.daynight { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); ; margin-bottom: 48px }
.daynight figure { margin: 0; }
.daynight .frame { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3.4; }
.daynight img { width: 100%; height: 100%; object-fit: cover; }
.daynight .home img { filter: grayscale(1); transition: filter 1.8s ease 0.6s; }
.daynight .home.in img { filter: none; }
.daynight figcaption { margin: 12px 0 0; padding-bottom: 8px; font: italic 400 clamp(24px, 2.4vw, 36px)/1.1 var(--serif); }
.shift { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.35em; font: 400 clamp(56px, 9vw, 160px)/0.9 var(--display); text-transform: uppercase; }
.shift s { position: relative; text-decoration: none; opacity: 0.55; }
.shift s::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 0.08em; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.3s; }
.panel.in .shift s::after { transform: scaleX(1); }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); padding: clamp(36px, 5vw, 64px) 0 12px; }
.poster { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4.3; padding: 16px 14px; border-radius: 4px; background: var(--pc); color: var(--pon); transform: rotate(var(--r)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.1); transition: transform 0.5s var(--ease); }
.poster:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); }
.poster::before { content: ""; position: absolute; top: 10px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); }
.poster b { margin-top: 26px; font: 400 clamp(26px, 3vw, 52px)/0.9 var(--display); text-transform: uppercase; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps div { padding-top: 14px; border-top: 2px solid currentColor; }
.steps b { display: block; font: 400 clamp(40px, 5vw, 84px)/0.9 var(--display); text-transform: uppercase; }
.words span { display: block; font: 400 clamp(60px, 10vw, 190px)/0.86 var(--display); text-transform: uppercase; opacity: 0; transform: translateX(-24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i) * 160ms); }
.panel.in .words span { opacity: 1; transform: none; }
.panel-foot { margin-top: clamp(28px, 4vw, 56px); padding-top: 16px; border-top: 1px solid currentColor; font-size: 18px; }
.panel-foot a { text-decoration: underline; text-underline-offset: 3px; }
.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding-top: 16px; }
.next { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-top: clamp(64px, 9vw, 140px); padding: clamp(20px, 3vw, 40px); border-radius: var(--radius); background: var(--c); color: var(--on); overflow: hidden; isolation: isolate; }
.next .mono { grid-column: 1 / -1; }
.next b { font: 400 clamp(56px, 10vw, 190px)/0.86 var(--display); text-transform: uppercase; }
.next em { font-style: normal; font-size: clamp(40px, 6vw, 96px); line-height: 1; transition: transform 0.5s var(--ease); }
.next:hover em { transform: translateX(10px); }
.next .peek { position: absolute; z-index: -1; right: clamp(80px, 12vw, 200px); top: 50%; width: clamp(140px, 18vw, 280px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; opacity: 0; transform: translateY(-40%) rotate(6deg) scale(0.6); transition: transform 0.6s var(--ease), opacity 0.4s; }
.next .peek img { width: 100%; height: 100%; object-fit: cover; }
.next:hover .peek { opacity: 1; transform: translateY(-50%) rotate(6deg) scale(1); }
.about-hero .statement { max-width: 15ch; font-size: clamp(52px, 7.6vw, 136px); }
.about-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-top: clamp(36px, 5vw, 72px); }
.about-body .copy p { margin: 0 0 20px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; max-width: 58ch; }
.about-body .copy p:first-child { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.4; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.skills li { list-style: none; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--paper); font-size: 17px; }
.skills { margin: 0; padding-left: 0; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; padding-top: 16px; }
.duo .frame { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.duo .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
.curtain { visibility: hidden; position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: var(--pad); background: var(--cc, var(--ink)); color: var(--con, var(--canvas)); transform: translateY(101%); pointer-events: none; }
.curtain b { font: 400 clamp(64px, 13vw, 240px)/0.86 var(--display); text-transform: uppercase; }
.curtain.cover, .curtain.hold, .curtain.lift { visibility: visible; }
.curtain.cover { transform: none; transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); pointer-events: auto; }
.curtain.hold { transform: none; transition: none; }
.curtain.lift { transform: translateY(-101%); transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1); }
@media (max-width: 960px) {
.hero-row { grid-template-columns: 1fr; gap: 16px; }
.hero-roles { justify-self: start; text-align: left; }
.lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-grid, .about-body, .duo, .daynight { grid-template-columns: 1fr; }
.stubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lane-head { grid-template-columns: 1fr; gap: 12px; }
.lane-head p { justify-self: start; }
.brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meta { grid-template-columns: 1fr; gap: 14px; }
.row { grid-template-columns: 1fr; gap: 12px; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats.flow .stat + .stat::before { display: none; }
.board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps { grid-template-columns: 1fr; }
.ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.related { grid-template-columns: 1fr; }
.next { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.grid { grid-template-columns: 1fr; }
.lanes { grid-template-columns: 1fr; }
.lane-card { min-height: 200px; }
.roles a { grid-template-columns: 14px minmax(0, 1fr) 20px; }
.roles a span { display: none; }
.hdr { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
.reveal, .words span { opacity: 1; transform: none; }
}
body { --radius: 8px; }
.v2-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); font-size: 16px; }
.v2-nav a { padding: 8px 0; }
.v2-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.v2-hero { padding-top: 16px; }
.hero-actions { padding-bottom: 8px; }
.v2-about { padding-top: clamp(64px, 6vw, 88px); }
.v2-about-grid { display: grid; grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-top: 24px; }
.v2-about-grid .portrait { max-height: 390px; aspect-ratio: 4/4.4; object-position: 50% 30%; }
.v2-about-grid .statement { max-width: 23ch; font-size: clamp(40px, 4.1vw, 68px); }
.v2-about-grid .lead { max-width: 55ch; margin-top: 22px; }
.v2-about-tail { max-width: 60ch; color: var(--muted); margin: 14px 0 0; font-size: 17px; }
.v2-proof { padding-top: clamp(44px, 5vw, 76px); }
.v2-proof .stub { min-height: 222px; }
.v2-proof .stub b { padding-top: 22px; padding-bottom: 22px; }
.v2-proof .stub small { text-transform: none; font-size: 14px; }
.v2-work { padding-top: clamp(60px, 7vw, 110px); }
.work-group { scroll-margin-top: 90px; min-width: 0; }
.studio-group { margin-bottom: clamp(56px, 7vw, 104px); }
.group-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; background: var(--c); color: var(--on); border-radius: var(--radius); padding: clamp(22px, 3vw, 40px); align-items: end; }
.group-top .mono { margin: 0 0 22px; }
.group-top h2 { font: 400 clamp(48px, 6.2vw, 98px)/.94 var(--display); text-transform: uppercase; margin: 0; }
.group-intro p { max-width: 37ch; margin: 0; font-size: 18px; }
.group-link { display: inline-block; margin-top: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.loud-clients { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding-top: 16px; }
.loud-clients .tile { aspect-ratio: 4/3.6; }
.loud-clients .tile .name { font-size: clamp(24px, 2.5vw, 42px); bottom: 14px; }
.loud-clients .tile .tag { display: none; }
.loud-clients .tile .band { display: none; }
.loud-clients .card:hover .tile .name { transform: none; }
.loud-clients .cap { flex-direction: column; gap: 5px; }
.loud-clients .cap strong { font-size: 17px; }
.loud-clients .cap span { text-align: left; font-size: 16px; color: var(--muted); }
.group-services { margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.mtrx-clients { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; padding-top: 16px; }
.client-tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 196px; border-radius: var(--radius); padding: 22px 18px 16px; background: var(--paper); border-top: 4px solid #ED691D; transition: transform .3s var(--ease), background .3s var(--ease); }
.client-tile:hover { transform: translateY(-4px); background: #FFFFFF; }
.client-wordmark { font: 500 clamp(23px, 2.15vw, 34px)/1.12 var(--sans); letter-spacing: -.025em; overflow-wrap: anywhere; }
.client-foot { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding-top: 26px; font-size: 16px; }
.client-foot > span:first-child { color: var(--muted); }
.v2-credit-note { max-width: 70ch; font-size: 17px; color: var(--muted); }
.client-credit { scroll-margin-top: 110px; }
.client-credit h2 { font-size: 17px; }
.v2-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; scroll-margin-top: 90px; margin-bottom: clamp(56px, 7vw, 104px); }
.v2-pair .group-top { grid-template-columns: 1fr; gap: 20px; min-height: 360px; align-content: space-between; }
.v2-pair .group-top h2 { font-size: clamp(38px, 4.4vw, 68px); max-width: 14ch; }
.v2-pair .group-top .mono { margin-bottom: 20px; }
.v2-pair .group-intro p { font-size: 17px; max-width: 44ch; }
.v2-pair .group-link { margin-top: 10px; }
.story-image { display: block; position: relative; margin-top: 14px; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/2.7; background: var(--c); }
.story-image img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.story-image::after { content: ""; position:absolute; inset:0; background: linear-gradient(transparent 40%, rgba(0,0,0,.75)); pointer-events:none; }
.story-image > span { position:absolute; z-index:1; left:22px; right:22px; bottom:20px; color:#fff; font-size:clamp(20px,2vw,30px); line-height:1.2; font-weight:500; }
.story-image > span > span { float:right; margin-left:10px; }
.story-image:hover img { transform:scale(1.04); }
.mini-works { padding-top: 6px; }
.mini-work { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:22px 8px; border-bottom:1px solid var(--rule); }
.mini-work strong { display:block; font-size:22px; font-weight:500; }
.mini-work div > span { display:block; font-size:16px; color:var(--muted); margin-top:6px; }
.mini-work > span { font-size:24px; }
.mini-work:hover strong { text-decoration:underline; text-underline-offset:4px; }
.hdr { z-index:50; }
a.group-top { text-decoration:none; color:var(--on); }
.hover-card { position:relative; overflow:hidden; isolation:isolate; padding-bottom:76px; }
.hover-title { transition:transform .5s var(--ease); }
.hover-title h2 { padding-right:20px; }
.hover-arrow { position:absolute; top:24px; right:24px; font-size:28px; }
.hover-band { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 24px; color:#FFFFFF; background:#121211; font-size:16px; visibility:hidden; transform:translateY(101%); transition:transform .5s var(--ease),visibility .5s; }
.hover-band > span:last-child { white-space:nowrap; }
.hover-card-inverse .hover-band { background:#F3F3EF; color:#121211; }
.hover-card:hover .hover-band,.hover-card:focus-visible .hover-band { transform:none; visibility:visible; }
.hover-card:hover .hover-title,.hover-card:focus-visible .hover-title { transform:translateY(-8px); }
.hover-card:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.all-work-link { display:inline-flex; align-items:center; min-height:40px; gap:7px; position:relative; z-index:2; }
#work { scroll-margin-top:90px; }
.hero-img-natural { aspect-ratio:auto; overflow:hidden; background:var(--paper); }
.hero-img-natural img { display:block; width:100%; height:auto; max-height:calc(100svh - 120px); object-fit:contain; border-radius:var(--radius); transform:none !important; }
.uploaded-gallery img,.uploaded-gallery figure:hover img { transform:none !important; }
@media(max-width:600px) {
.words span { font-size:clamp(36px,9vw,54px); line-height:.98; overflow-wrap:anywhere; }
.next b { font-size:clamp(38px,10vw,60px); line-height:.98; min-width:0; overflow-wrap:anywhere; }
.group-top.hover-card { padding-bottom:80px; }
.hover-band { padding:16px 20px; }
.hover-arrow { right:20px; }
#work { scroll-margin-top:120px; }
}
@media(prefers-reduced-motion:reduce) {
.hover-title,.hover-band { transition:none; }
}
.v1-about { --radius: 10px; }
.category-heading { display:flex; align-items:center; gap:18px; padding-bottom:26px; scroll-margin-top:110px; }
.category-heading i { width:22px; height:22px; flex:none; border-radius:50%; background:var(--category); }
.category-heading h2 { margin:0; font:400 clamp(40px,5.2vw,82px)/1 var(--display); text-transform:uppercase; }
.logo-clients,.mtrx-clients { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding-top:16px; }
.logo-card,.client-tile { min-width:0; display:block; padding:0; border:0; background:transparent; border-radius:0; }
.logo-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; aspect-ratio:1.6/1; background:var(--paper); border-radius:8px; overflow:hidden; transition:background .3s var(--ease); }
.logo-stage img { width:66%; height:100%; max-height:170px; padding:22px; object-fit:contain; }
.logo-pending { color:var(--muted); font:400 14px/1.4 var(--mono); }
.logo-pending > span:first-child { font:400 32px/1 var(--sans); color:var(--ink); }
.logo-caption { display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
.logo-caption strong { font-size:20px; font-weight:500; }
.logo-result { display:block; margin-top:5px; max-width:28ch; color:var(--muted); font-size:16px; }
.logo-card:hover .logo-stage,.client-tile:hover .logo-stage { background:#FFFFFF; }
.client-tile:hover { background:transparent; }
.studio-more { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:22px; }
.studio-more .group-services { margin:0; }
.v2-contact { padding-top:clamp(24px,4vw,64px); scroll-margin-top:100px; }
.contact-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,80px); padding:clamp(28px,4vw,60px); background:var(--paper); border-radius:10px; border-top:6px solid #ED691D; }
.contact-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:32px; }
.contact-intro .mono { margin:0; color:var(--muted); font-size:14px; }
.contact-dots { display:flex; gap:6px; }
.contact-dots i { width:10px; height:10px; border-radius:50%; background:#101D40; }
.contact-dots i:nth-child(2) { background:#ED691D; }
.contact-dots i:nth-child(3) { background:#7BDC9E; }
.contact-intro h2 { font:400 clamp(48px,5.7vw,88px)/.98 var(--display); margin:0; text-transform:uppercase; }
.contact-intro > p:not(.mono) { font-size:19px; max-width:30ch; margin:24px 0 0; }
.contact-signature { display:block; font:italic 400 32px/1.1 var(--serif); margin-top:32px; }
.contact-form { margin:0; padding:6px 0 0; }
.contact-form fieldset { border:0; margin:0; padding:0; min-width:0; }
.form-two { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.contact-form label { display:block; font-size:16px; font-weight:500; }
.contact-form input,.contact-form textarea { display:block; width:100%; background:transparent; border:0; border-bottom:1px solid #a6a6a0; border-radius:0; padding:14px 0; margin:0 0 28px; color:var(--ink); font:400 17px/1.5 var(--sans); resize:vertical; opacity:1; -webkit-text-fill-color:var(--ink); }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#65655f; -webkit-text-fill-color:#65655f; opacity:1; }
.contact-form textarea { min-height:134px; }
.form-bottom { display:flex; gap:22px; align-items:center; justify-content:space-between; }
.form-bottom button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 24px; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--paper); font:500 17px/1 var(--sans); opacity:.5; cursor:not-allowed; white-space:nowrap; }
.form-bottom p { margin:0; max-width:30ch; color:var(--muted); font-size:14px; line-height:1.5; }
.footer { padding-top:clamp(60px,6vw,90px); }
.woa-card { position:relative; overflow:hidden; isolation:isolate; padding-bottom:64px; }
.woa-title { transition:transform .5s var(--ease); }
.woa-title h2 { padding-right:20px; }
.woa-arrow { position:absolute; top:24px; right:24px; font-size:28px; transition:transform .4s var(--ease); }
.woa-band { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 24px; color:#FFFFFF; background:#121211; font-size:16px; visibility:hidden; transform:translateY(101%); transition:transform .5s var(--ease),visibility .5s; }
.woa-band > span:last-child { white-space:nowrap; }
.woa-card:hover .woa-band,.woa-card:focus-visible .woa-band { transform:none; visibility:visible; }
.woa-card:hover .woa-title,.woa-card:focus-visible .woa-title { transform:translateY(-8px); }
.woa-card:hover .woa-arrow,.woa-card:focus-visible .woa-arrow { transform:translate(3px,-3px); }
.client-ribbon { position:relative; margin-top:14px; padding:0; background:var(--paper); border-radius:8px; overflow:hidden; aspect-ratio:4/2.7; container-type:inline-size; }
.v2-pair:has(> #women-of-ahmedabad) { grid-template-rows:auto auto auto; row-gap:14px; }
.v2-pair:has(> #women-of-ahmedabad) > .story-group { display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:14px; }
.v2-pair:has(> #women-of-ahmedabad) .client-ribbon,.v2-pair:has(> #women-of-ahmedabad) .story-image,.v2-pair:has(> #women-of-ahmedabad) .group-services { margin:0; }
.reel-head { position:absolute; inset:18px 18px auto; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0; }
.reel-head p { margin:0; font-size:16px; font-weight:500; }
.reel-head p > span { display:block; margin-top:2px; color:var(--muted); font-size:14px; font-weight:400; }
.reel-control { display:inline-flex; padding:7px 12px; border:1px solid var(--rule); border-radius:999px; font-size:14px; cursor:pointer; }
.reel-toggle { position:absolute; width:1px; height:1px; padding:0; margin:0; clip-path:inset(50%); overflow:hidden; }
.reel-toggle:focus-visible + .reel-head .reel-control { outline:2px solid var(--ink); outline-offset:3px; }
.when-paused { display:none; }
.reel-toggle:checked + .reel-head .when-playing { display:none; }
.reel-toggle:checked + .reel-head .when-paused { display:inline; }
.orbit-window { position:absolute; inset:68px 0 8px; }
.orbit-track { position:absolute; height:100%; aspect-ratio:1; margin:0; padding:0; left:50%; top:0; translate:-50% 0; list-style:none; animation:logo-orbit 60s linear infinite; }
.orbit-track::before { content:""; position:absolute; inset:14%; border:1px solid var(--rule); border-radius:50%; }
.orbit-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; color:var(--muted); font-size:16px; line-height:1.3; }
.orbit-slot { position:absolute; width:clamp(68px,14cqw,96px); aspect-ratio:1; transform:translate(-50%,-50%); animation:logo-batch var(--batch-cycle,48s) linear infinite; animation-delay:calc(var(--batch) * -12s); }
.orbit-position-0 { top:14%; left:50%; }
.orbit-position-1 { top:50%; left:86%; }
.orbit-position-2 { top:86%; left:50%; }
.orbit-position-3 { top:50%; left:14%; }
.orbit-upright { display:block; width:100%; height:100%; animation:logo-upright 60s linear infinite; }
.reel-brand { width:100%; height:100%; padding:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:50%; background:#FFFFFF; border:1px solid rgba(18,18,17,.08); }
.reel-brand img { width:100%; height:100%; object-fit:contain; border-radius:50%; }
.reel-wordmark { font:500 14px/1.1 var(--sans); letter-spacing:-.025em; text-align:center; }
.reel-toggle:checked ~ .orbit-window .orbit-track,.reel-toggle:checked ~ .orbit-window .orbit-upright,.reel-toggle:checked ~ .orbit-window .orbit-slot { animation-play-state:paused; }
@keyframes logo-orbit { to { transform:rotate(360deg); } }
@keyframes logo-upright { to { transform:rotate(-360deg); } }
@keyframes logo-batch {
0%,22% { opacity:1; visibility:visible; }
24%,98% { opacity:0; visibility:hidden; }
100% { opacity:1; visibility:visible; }
}
@media (prefers-reduced-motion:reduce) {
.client-ribbon:not(.motion-enabled) .orbit-window { inset:70px 16px 12px; overflow:auto; }
.client-ribbon:not(.motion-enabled) .orbit-track { position:static; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; width:100%; height:auto; aspect-ratio:auto; translate:none; }
.client-ribbon:not(.motion-enabled) .orbit-slot { position:static; width:100%; max-width:88px; margin:auto; transform:none; }
.client-ribbon:not(.motion-enabled) .orbit-track,.client-ribbon:not(.motion-enabled) .orbit-upright,.client-ribbon:not(.motion-enabled) .orbit-slot { animation:none; }
.client-ribbon:not(.motion-enabled) .orbit-track::before,.client-ribbon:not(.motion-enabled) .orbit-center,.client-ribbon:not(.motion-enabled) .orbit-slot[aria-hidden] { display:none; }
.client-ribbon.motion-enabled .orbit-track,.client-ribbon.motion-enabled .orbit-upright { animation-duration:60s !important; animation-delay:0s !important; }
.client-ribbon.motion-enabled .orbit-slot { animation-duration:var(--batch-cycle,48s) !important; animation-delay:calc(var(--batch) * -12s) !important; }
.woa-title,.woa-arrow,.woa-band { transition:none; }
}
@media (max-width: 960px) {
.v2-nav { gap: 14px; flex-wrap: wrap; }
.v2-about-grid { grid-template-columns: minmax(160px,.65fr) minmax(0,1.35fr); gap:24px; }
.group-top { grid-template-columns:1fr; }
.group-top .mono { margin-bottom:18px; }
.loud-clients { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
.loud-clients .tile .name { font-size:36px; }
.mtrx-clients { grid-template-columns:repeat(3,minmax(0,1fr)); }
.v2-pair .group-top { min-height:390px; }
.logo-clients,.mtrx-clients { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
.contact-grid { grid-template-columns:1fr; gap:28px; }
.contact-intro > p:not(.mono) { max-width:44ch; }
}
@media (max-width: 600px) {
.hdr { gap:14px; padding-top:12px; padding-bottom:12px; }
.v2-nav { width:100%; justify-content:space-between; font-size:14px; gap:6px; }
.v2-nav a { padding:5px 0; }
.v2-hero { padding-top:12px; }
.hero-row { padding:24px 0 20px; }
.hero-roles li { font-size:16px; }
.v2-about-grid { grid-template-columns:1fr; gap:24px; }
.v2-about-grid .portrait { max-height:340px; aspect-ratio:1.1/1; }
.v2-about-grid .statement { font-size:42px; }
.v2-proof .stubs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.v2-proof .stub { min-height:208px; }
.v2-proof .stub b { font-size:62px; padding:18px 14px; }
.v2-proof .stub .tear { min-height:135px; padding:16px 14px; }
.v2-proof .stub:last-child { grid-column:1/-1; display:grid; grid-template-columns:.7fr 1.3fr; min-height:130px; }
.v2-proof .stub:last-child .tear { border-top:0; border-left:2px dashed rgba(18,18,17,.28); min-height:130px; }
.v2-proof .stub:last-child .tear::before,.v2-proof .stub:last-child .tear::after { display:none; }
.v2-pair { grid-template-columns:1fr; gap:56px; }
.v2-pair .group-top { min-height:unset; }
.group-top { padding:24px 20px; gap:22px; }
.group-top h2 { font-size:48px; }
.v2-pair .group-top h2 { font-size:46px; }
.group-intro p { font-size:17px; }
.loud-clients .tile { aspect-ratio:1/1.1; }
.loud-clients .tile .name { font-size:26px; left:12px; right:12px; }
.loud-clients .cap strong { font-size:16px; }
.mtrx-clients { grid-template-columns:repeat(2,minmax(0,1fr)); }
.client-tile { min-height:175px; padding:18px 14px 14px; }
.client-tile:last-child { grid-column:1/-1; min-height:150px; }
.client-wordmark { font-size:27px; }
.story-image { aspect-ratio:4/3; }
.mini-work { padding:22px 0; }
.category-heading { gap:12px; padding-bottom:22px; scroll-margin-top:110px; }
.category-heading i { width:14px; height:14px; }
.category-heading h2 { font-size:36px; line-height:1.08; }
.logo-stage { aspect-ratio:1.2/1; }
.logo-stage img { padding:16px; width:90%; }
.logo-pending { font-size:14px; gap:8px; }
.logo-caption { margin-top:10px; }
.logo-caption strong { font-size:18px; }
.client-tile:last-child { grid-column:auto; min-height:0; }
.studio-more { align-items:flex-start; flex-direction:column; gap:16px; }
.contact-grid { padding:28px 20px; }
.contact-intro h2 { font-size:48px; max-width:11ch; }
.contact-intro > p:not(.mono) { font-size:18px; margin-top:18px; }
.contact-kicker { margin-bottom:24px; }
.contact-form { padding:0; }
.form-two { grid-template-columns:1fr; gap:0; }
.form-bottom { flex-direction:column; align-items:flex-start; gap:16px; }
.form-bottom p { max-width:34ch; }
.woa-card { padding-bottom:72px; }
.woa-band { padding:16px 20px; }
.client-ribbon { aspect-ratio:4/3; }
.reel-head { inset:14px 14px auto; }
.reel-brand { padding:8px; }
.orbit-center { display:none; }
.orbit-window { top:64px; }
.orbit-position-0 { top:18%; }
.orbit-position-1 { left:82%; }
.orbit-position-2 { top:82%; }
.orbit-position-3 { left:18%; }
}
@media (max-width:360px) {
.orbit-position-0 { top:24%; }
.orbit-position-1 { left:76%; }
.orbit-position-2 { top:76%; }
.orbit-position-3 { left:24%; }
}
.fit,.fit > span { transition-property:none !important; }
.v1-about { padding-top:clamp(48px,5vw,72px); }
.v2-work { padding-top:clamp(48px,5vw,72px); }
.studio-group,.v2-pair { margin-bottom:clamp(40px,4.45vw,64px); }
.category-heading { gap:16px; padding-bottom:24px; align-items:center; }
.category-heading h2 { font-size:clamp(46px,6vw,96px); }
.studio-group > .group-top {
--studio-baseline:calc(clamp(22px,3vw,40px) + 118.3px + clamp(48px,6.2vw,98px) * .94);
min-height:calc(var(--studio-baseline) * 1.15);
grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
align-items:center; padding:32px 36px 64px; gap:24px;
}
.studio-group > .group-top h2 { font-size:clamp(56px,7.2vw,114px); line-height:.98; letter-spacing:-.015em; }
.studio-group > .group-top .mono { margin-bottom:18px; }
.studio-group > .group-top .group-intro { align-self:center; }
.group-top .group-intro p { max-width:40ch; }
.v2-pair .group-top { min-height:432px; gap:24px; padding:32px 32px 76px; }
.v2-pair .group-top h2 { font-size:clamp(46px,5vw,80px); line-height:.98; max-width:13ch; letter-spacing:-.01em; }
.v2-pair .group-top .mono { margin-bottom:18px; }
.woa-card,.hover-card { padding-bottom:76px; }
.hover-arrow,.woa-arrow { top:28px; right:28px; }
.woa-band,.hover-band { min-height:52px; padding:14px 28px; align-items:center; }
.group-services { margin-top:16px; }
main > article > .row:first-of-type { margin-top:clamp(32px,3.3vw,48px); }
main > article > .row { padding:20px 0 24px; }
main > article > .panel { margin-top:clamp(32px,3.9vw,56px); }
main > article > .gallery { padding-top:clamp(32px,3.9vw,56px); }
main > article > .next { margin-top:clamp(40px,4.45vw,64px); }
.panel-label { margin-bottom:32px; align-items:baseline; }
.outcome-single { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px; align-items:center; padding:28px 32px; }
.outcome-label { display:flex; flex-direction:column; gap:10px; }
.outcome-single .stat { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center; }
.outcome-single .stat b { font-size:clamp(88px,9vw,144px); line-height:.9; justify-self:center; }
.outcome-single .stat span { margin:0; max-width:21ch; justify-self:end; font-size:clamp(22px,2.2vw,34px); line-height:1.15; }
.learned-note { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px; align-items:start; margin-top:clamp(32px,3.9vw,56px); padding-top:24px; border-top:1px solid var(--rule); }
.learned-note > .mono { padding-top:8px; }
.learned-note blockquote { margin:0; max-width:none; font:italic 400 clamp(30px,3.1vw,48px)/1.12 var(--serif); letter-spacing:-.01em; }
.v2-contact { padding-top:clamp(32px,3.3vw,48px); }
[data-halftone-footer] { margin-top:clamp(40px,4.45vw,64px); }
.ggrid.uploaded-gallery { display:block; column-count:3; column-gap:12px; padding-top:16px; }
.ggrid.uploaded-gallery figure { break-inside:avoid; margin:0 0 12px; aspect-ratio:auto; background:transparent; }
.ggrid.uploaded-gallery img { width:100%; height:auto; transform:none !important; }
.ggrid.uploaded-gallery.is-justified { display:flex; flex-direction:column; gap:12px; columns:auto; }
.ggrid.uploaded-gallery.is-justified .gallery-row { display:flex; gap:12px; width:100%; min-width:0; }
.ggrid.uploaded-gallery.is-justified figure { min-width:0; margin:0; height:100%; }
.ggrid.uploaded-gallery.is-justified a { display:block; width:100%; height:100%; }
.ggrid.uploaded-gallery.is-justified img { display:block; width:100%; height:100%; object-fit:contain; }
@media(min-width:1200px) {
.v2-pair .group-top { min-height:440px; }
.v2-pair .compact-group .group-top { min-height:432px; }
}
@media(max-width:960px) {
.studio-group > .group-top { min-height:344px; grid-template-columns:1fr; align-content:space-between; gap:20px; }
.studio-group > .group-top h2 { font-size:clamp(52px,8vw,76px); }
.v2-pair .group-top { min-height:468px; }
.v2-pair .group-top h2 { font-size:clamp(42px,5.8vw,56px); }
.ggrid.uploaded-gallery { column-count:2; }
}
@media(max-width:600px) {
.category-heading { gap:12px; padding-bottom:20px; }
.category-heading h2 { font-size:42px; }
.category-heading i { width:14px; height:14px; }
.studio-group > .group-top { min-height:344px; padding:28px 24px 72px; }
#mtrx-digital > .group-top { min-height:373px; }
.studio-group > .group-top h2 { font-size:56px; padding-right:0; }
.v2-pair .group-top { min-height:350px; padding:28px 24px 76px; }
#women-of-ahmedabad > .group-top { min-height:392px; }
#leadership-and-teaching > .group-top { min-height:402px; }
.v2-pair .group-top h2 { font-size:52px; }
.hover-arrow,.woa-arrow { top:24px; right:20px; }
.woa-band,.hover-band { min-height:56px; gap:10px; padding:12px 24px; }
.woa-band > span:first-child,.hover-band > span:first-child { max-width:29ch; font-size:15px; }
.outcome-single { grid-template-columns:1fr; gap:24px; padding:24px; }
.outcome-label { flex-direction:row; justify-content:space-between; align-items:start; gap:20px; }
.outcome-label .mono { font-size:14px; }
.outcome-label .mono:last-child { text-align:right; max-width:17ch; }
.outcome-single .stat { display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; }
.outcome-single .stat b,.outcome-single .stat span { min-width:0; justify-self:start; }
.learned-note { grid-template-columns:1fr; gap:16px; padding-top:20px; }
.learned-note blockquote { font-size:34px; }
}
@media(max-width:360px) {
.outcome-single .stat b { font-size:72px; }
.outcome-single .stat span { font-size:20px; }
.studio-group > .group-top { min-height:425px; }
#mtrx-digital > .group-top { min-height:454px; }
#women-of-ahmedabad > .group-top { min-height:422px; }
#stage-and-hosting > .group-top { min-height:402px; }
.studio-group > .group-top h2 { font-size:52px; }
.v2-pair .group-top h2 { font-size:48px; }
.group-top .mono { max-width:22ch; }
.ggrid.uploaded-gallery { column-count:1; }
}
.related-single { padding-top:16px; }
.connected-feature { display:grid; grid-template-columns:minmax(220px, min(30%, 330px)) minmax(0,1fr); overflow:hidden; border-radius:8px; background:var(--c); color:var(--on); }
.connected-photo { display:block; align-self:stretch; }
.connected-photo img { display:block; width:100%; height:100%; max-height:440px; object-fit:contain; background:var(--paper); }
.connected-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:20px; padding:32px clamp(24px,4vw,64px); }
.connected-copy > strong { font:400 clamp(52px,6.3vw,96px)/1 var(--display); text-transform:uppercase; }
.connected-summary { max-width:43ch; font-size:clamp(20px,2vw,28px); line-height:1.3; }
.connected-result { font-size:clamp(22px,2.6vw,38px); line-height:1.2; max-width:42ch; }
.connected-cta { display:inline-flex; gap:12px; align-items:center; font-size:17px; text-decoration:underline; text-underline-offset:5px; }
.connected-feature:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.connected-feature:hover .connected-cta { text-decoration-thickness:2px; }
.project-banner { display:grid; grid-template-columns:var(--banner-columns); gap:0; height:clamp(320px,48vw,720px); width:100%; padding:0; margin:0; border-radius:8px; overflow:hidden; background:transparent; }
.project-banner .banner-image { display:block; min-width:0; min-height:0; width:100%; height:100%; padding:0; margin:0; overflow:hidden; cursor:zoom-in; background:transparent; }
.project-banner img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; padding:0; margin:0; transform:none !important; }
.project-banner a:focus-visible { outline:3px solid #FFFFFF; outline-offset:-4px; }
.project-banner[data-project-banner="women-of-ahmedabad"] img,
.project-banner[data-project-banner="mitti"] img { object-fit:contain; }
.project-banner[data-project-banner="finance-solutions"] img,
.project-banner[data-project-banner="mtrx-digital"] img { object-fit:cover; }
.project-banner[data-project-banner="finance-solutions"] .banner-image:first-child img { object-position:51% 50%; }
.project-banner[data-project-banner="finance-solutions"] .banner-image:last-child img { object-position:50% 64%; }
.project-banner[data-project-banner="tech-kaushalya"] img { object-fit:cover; object-position:50% 50%; }
.project-banner[data-project-banner="trinity-preschool"] .banner-image:nth-child(2) img { object-position:50% 47%; }
.project-banner[data-project-banner="on-stage"] img { object-position:50% 44%; }
.hero-actions .hero-work { background:#FFFFFF; color:var(--ink); }
.hero-actions .hero-work:hover,.hero-actions .hero-work:active,.hero-actions .hero-work:focus-visible { background:var(--ink); color:#FFFFFF; }
.hero-actions .hero-work.it-roll .it-roll-icon { background:var(--ink); color:#FFFFFF; }
.hero-actions .hero-work.it-roll:hover .it-roll-icon,
.hero-actions .hero-work.it-roll:active .it-roll-icon,
.hero-actions .hero-work.it-roll:focus-visible .it-roll-icon { background:#FFFFFF; color:var(--ink); }
.project-banner[data-project-banner="stax-living"] .banner-image { background:#121211; }
.project-banner[data-project-banner="stax-living"] img { object-fit:contain; object-position:50% 50%; }
.project-banner[data-project-banner="indravansh"] .campaign-portrait img { object-position:50% 0%; }
.project-banner[data-project-banner="just-a-khwab"] img { object-fit:cover; object-position:50% 45%; }
@media(max-width:960px) {
.project-banner[data-project-banner="just-a-khwab"] img { object-fit:contain; }
}
article:has([data-project-banner="mitti"]) .ggrid.uploaded-gallery.proof-board,
article:has([data-project-banner="indravansh"]) .ggrid.uploaded-gallery.proof-board {
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-auto-rows:var(--proof-row-height,360px) !important;
}
.project-banner[data-project-banner="mitti"] img { object-fit:cover; object-position:50% 46%; }
.project-banner[data-project-banner="the-loud-table"] img { object-position:50% 0%; }
.project-banner[data-project-banner="just-a-khwab"] img { object-fit:contain; object-position:center; }
.project-banner[data-project-banner="indravansh"] .campaign-portrait img { object-position:50% 50%; }
.noticeboard .poster-photo:nth-child(4) img { object-position:50% 45%; }
.media-triptych .banner-image { display:flex; align-items:center; background:#0F4E3F; }
.media-triptych .banner-image img { object-fit:contain; height:auto; max-height:100%; }
.banner-video { position:relative; min-width:0; min-height:0; overflow:hidden; background:#121211; }
.banner-video video { width:100%; height:100%; display:block; object-fit:contain; }
.video-play { position:absolute; inset:0; width:100%; border:0; padding:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:linear-gradient(transparent,rgb(0 0 0 / .22)); color:#FFFFFF; font:500 16px/1.2 var(--sans); opacity:0; transition:opacity .2s; cursor:pointer; }
.video-play[hidden] { display:none; }
.banner-video:hover .video-play,.banner-video:focus-within .video-play { opacity:1; }
.play-symbol { display:grid; place-items:center; height:64px; width:64px; padding-left:4px; border:1px solid #FFFFFF; border-radius:50%; background:rgb(18 18 17 / .72); font-size:22px; }
.video-play:focus-visible { outline:3px solid #FFFFFF; outline-offset:-4px; }
.video-error { position:absolute; bottom:70px; left:12px; right:12px; padding:12px; color:#FFFFFF; background:#121211; font:400 14px/1.4 var(--sans); }
.video-error[hidden] { display:none; }
@media(hover:none),(pointer:coarse) { .video-play { opacity:1; } }
@media(max-width:600px) {
.media-triptych { height:clamp(240px,65vw,390px); }
.play-symbol { width:40px; height:40px; font-size:16px; }
.video-play { padding:4px; gap:8px; font-size:14px; }
}
.image-treatment-note { font:400 14px/1.5 var(--sans); color:var(--muted); margin:10px 0 0; }
.reveal,.reveal.in,.words span,.panel.in .words span { opacity:1; transform:none; transition:none; }
.shift s::after,.panel.in .shift s::after { transform:scaleX(1); transition:none; }
.daynight .home img { filter:none; transition:none; }
.it-cursor,.it-marquee { display:none !important; }
.project-banner .banner-image,.ggrid.uploaded-gallery.proof-board a,.poster-photo > a { cursor:pointer; }
article:has([data-project-banner="mitti"]) .ggrid.uploaded-gallery.proof-board,
article:has([data-project-banner="women-of-ahmedabad"]) .ggrid.uploaded-gallery.proof-board {
grid-template-columns:repeat(3,minmax(0,1fr));
grid-auto-rows:clamp(300px,34vw,480px);
}
@media(max-width:960px) {
article:has([data-project-banner="mitti"]) .ggrid.uploaded-gallery.proof-board,
article:has([data-project-banner="women-of-ahmedabad"]) .ggrid.uploaded-gallery.proof-board {
grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:360px;
}
}
@media(max-width:600px) {
article:has([data-project-banner="mitti"]) .ggrid.uploaded-gallery.proof-board,
article:has([data-project-banner="women-of-ahmedabad"]) .ggrid.uploaded-gallery.proof-board {
grid-template-columns:1fr; grid-auto-rows:360px;
}
}
.outcome-panel { height:var(--outcome-height,auto); }
.outcome-panel:not([data-outcome-panel="indravansh"]) { display:flex; flex-direction:column; }
.outcome-panel:not([data-outcome-panel="indravansh"]) .stats { flex:1; align-content:center; align-items:start; }
.outcome-panel:not([data-outcome-panel="indravansh"]) .stat { text-align:center; min-width:0; }
.outcome-panel:not([data-outcome-panel="indravansh"]) .stat span { margin-left:auto; margin-right:auto; }
.outcome-panel[data-outcome-count="1"] .stats { grid-template-columns:1fr; }
.outcome-panel[data-outcome-count="1"] .stat { display:flex; align-items:center; justify-content:center; gap:clamp(24px,6vw,88px); }
.outcome-panel[data-outcome-count="1"] .stat span { max-width:23ch; margin:0; text-align:left; font-size:clamp(22px,2.2vw,34px); }
.outcome-panel[data-outcome-count="2"] .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.outcome-panel[data-outcome-count="2"] .stat b { font-size:clamp(46px,7vw,112px); }
.board .poster-photo { gap:16px; padding:16px 14px; min-width:0; }
.poster-photo b { flex:none; font-size:clamp(26px,2.7vw,46px); min-height:2em; }
.poster-photo > a { display:block; flex:1; min-height:0; overflow:hidden; border-radius:2px; cursor:zoom-in; }
.poster-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.poster-photo > .mono { flex:none; font-size:14px; }
.poster-photo a:focus-visible { outline:3px solid currentColor; outline-offset:3px; }
.poster-photo:nth-child(2) img { object-position:50% 22%; }
.poster-photo:nth-child(4) img { object-position:50% 85%; }
@media(max-width:960px) {
.outcome-panel[data-outcome-count="3"] .stat:last-child { grid-column:1/-1; }
}
@media(max-width:600px) {
.outcome-panel[data-outcome-count="1"] .stat { flex-direction:column; gap:24px; }
.outcome-panel[data-outcome-count="1"] .stat span { text-align:center; }
.outcome-panel[data-outcome-count="2"] .stats { gap:16px; }
.outcome-panel[data-outcome-count="2"] .stat b { font-size:clamp(31px,8.6vw,51px); }
.outcome-panel:not([data-outcome-panel="indravansh"]) .stat span { font-size:17px; }
.board .poster-photo { min-height:360px; aspect-ratio:auto; }
.poster-photo b { font-size:clamp(22px,5vw,26px); }
}
.brand-index { margin:0 0 clamp(40px,4.45vw,64px); }
.identity-grid { padding-top:16px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.identity-grid .identity-tile { display:flex; align-items:center; justify-content:center; min-height:112px; padding:20px; background:var(--paper); border-radius:8px; }
.identity-grid .identity-tile img { width:auto; height:auto; max-width:190px; max-height:76px; object-fit:contain; border-radius:0; clip-path:none; }
.identity-grid .identity-tile strong { font:500 22px/1.15 var(--sans); max-width:15ch; text-align:center; }
.identity-grid .identity-dark { background:#121211; }
.identity-grid .identity-dark:hover { background:#21211f; }
.identity-grid .identity-green,.identity-grid .identity-green:hover { background:#0F4E3F; }
.logo-stage.logo-pending strong { font:500 clamp(24px,2.4vw,36px)/1.1 var(--sans); text-align:center; color:var(--ink); padding:0 16px; }
.identity-tile:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.brand-source-note { font-size:14px; margin-top:12px; color:var(--muted); }
.v2-pair .story-group { display:flex; flex-direction:column; }
.v2-pair .story-group > .group-top { flex:1; }
.ggrid.uploaded-gallery.proof-board { display:grid; columns:auto; grid-template-columns:repeat(var(--proof-columns,6),minmax(0,1fr)); grid-auto-rows:var(--proof-row-height,260px); gap:var(--proof-gap,8px); padding:0; margin-top:16px; }
.ggrid.uploaded-gallery.proof-board figure { width:100%; height:100%; min-width:0; min-height:0; margin:0; padding:0; overflow:hidden; border-radius:0; background:transparent; }
.ggrid.uploaded-gallery.proof-board a { display:block; width:100%; height:100%; cursor:zoom-in; }
.ggrid.uploaded-gallery.proof-board img { display:block; width:100%; height:100%; padding:0; object-fit:cover; transform:none !important; }
.ggrid.uploaded-gallery.proof-board:has(>figure.proof-video) {
grid-template-rows:repeat(var(--proof-photo-rows,4),var(--proof-row-height,260px)) clamp(300px,52vw,680px);
}
.ggrid.uploaded-gallery.proof-board figure.proof-video { grid-column:1/-1; background:#121211; }
.proof-video .banner-video { width:100%; height:100%; }
.hdr .version-switch { display:none !important; }
article:has([data-project-banner]) .ggrid.uploaded-gallery.proof-board {
grid-template-columns:repeat(3,minmax(0,1fr));
grid-auto-rows:var(--proof-row-height,260px);
}
.project-banner[data-project-banner="just-a-khwab"] { height:auto; aspect-ratio:2708/1356; }
.project-banner[data-project-banner="just-a-khwab"] img { object-fit:cover; width:100%; height:100%; }
.proof-board a:focus-visible { outline:3px solid var(--ink); outline-offset:-4px; }
.portfolio-image-viewer { width:min(1100px,calc(100vw - 32px)); max-width:none; max-height:calc(100svh - 32px); padding:20px; border:0; border-radius:10px; background:#E8E8E4; color:#121211; }
.portfolio-image-viewer::backdrop { background:rgb(18 18 17 / .86); }
.viewer-header,.viewer-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; font:400 16px/1.3 var(--sans); }
.viewer-header { padding-bottom:14px; }
.viewer-controls { padding-top:14px; }
.portfolio-image-viewer button,.viewer-controls a { font:inherit; background:transparent; border:0; padding:8px 0; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.viewer-image { width:100%; height:min(74svh,820px); display:block; object-fit:contain !important; padding:0; background:transparent; }
@media(max-width:960px) {
.connected-copy { gap:16px; padding:28px; }
.connected-copy > strong { font-size:clamp(42px,5.6vw,64px); }
.connected-summary { font-size:20px; }
.connected-result { font-size:24px; }
}
@media(max-width:600px) {
.project-banner { height:clamp(190px,62vw,360px); }
.identity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.identity-grid .identity-tile { min-height:96px; padding:16px; }
.identity-grid .identity-tile img { max-width:135px; max-height:62px; }
.identity-grid .identity-tile strong { font-size:18px; }
.ggrid.uploaded-gallery.proof-board { grid-template-columns:repeat(var(--proof-columns,3),minmax(0,1fr)); }
.portfolio-image-viewer { padding:14px; }
.viewer-controls { font-size:14px; gap:8px; }
.connected-feature { grid-template-columns:1fr; }
.connected-photo { background:var(--paper); }
.connected-photo img { max-height:360px; object-fit:contain; }
.connected-copy { padding:24px; }
.connected-copy > strong { font-size:48px; }
}
.form-bottom button { opacity:1; cursor:pointer; min-height:52px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),opacity .3s ease; }
.form-bottom button .btn-arrow { display:inline-block; transition:transform .3s var(--ease); }
@media (hover:hover) {
.form-bottom button:hover { background:#ED691D; border-color:#ED691D; color:#121211; }
.form-bottom button:hover .btn-arrow { transform:translate(2px,-2px); }
}
.form-bottom button:active { transform:scale(.98); }
.form-bottom button:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.form-bottom button:disabled { opacity:.62; cursor:progress; transform:none; background:var(--ink); border-color:var(--ink); color:var(--paper); }
.form-status { margin:0; max-width:40ch; color:var(--muted); font-size:15px; line-height:1.5; }
.form-status:empty { display:none; }
.form-status[data-state="success"] { color:#24564C; font-weight:500; }
.form-status[data-state="error"] { color:#A3361B; font-weight:500; }
.contact-form :is(input,textarea) { transition:border-color .25s ease,box-shadow .25s ease; }
.contact-form :is(input,textarea):focus { outline:none; }
.contact-form :is(input,textarea):focus-visible { outline:none; border-bottom-color:var(--ink); box-shadow:0 1px 0 0 var(--ink); }
.contact-form :is(input,textarea):user-invalid { border-bottom-color:#A3361B; box-shadow:0 1px 0 0 #A3361B; }
.contact-form[aria-busy="true"] :is(input,textarea) { opacity:.7; }
.menu-toggle { display:none; }
@media (max-width:720px) {
html.js .hdr { flex-wrap:nowrap; gap:12px; padding-top:10px; padding-bottom:10px; min-height:64px; }
html.js .hdr .logo { position:relative; z-index:2; }
html.js .menu-toggle { position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; height:44px; margin-left:auto; padding:0 16px 0 18px; border:1px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); font:500 15px/1 var(--sans); cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
html.js .menu-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
html.js .menu-toggle-icon { position:relative; width:18px; height:10px; }
html.js .menu-toggle-icon i { position:absolute; left:0; right:0; height:1.5px; border-radius:2px; background:currentColor; transition:transform .4s var(--ease),top .4s var(--ease); }
html.js .menu-toggle-icon i:first-child { top:1px; }
html.js .menu-toggle-icon i:last-child { top:7.5px; }
html.js.menu-open .menu-toggle { background:var(--ink); color:var(--canvas); }
html.js.menu-open .menu-toggle-icon i:first-child { top:4.25px; transform:rotate(45deg); }
html.js.menu-open .menu-toggle-icon i:last-child { top:4.25px; transform:rotate(-45deg); }
html.js .v2-nav { position:fixed; inset:0; z-index:1; width:auto; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:calc(88px + env(safe-area-inset-top,0px)) var(--pad) calc(32px + env(safe-area-inset-bottom,0px)); background:var(--canvas); font-size:inherit; overflow-y:auto; overscroll-behavior:contain; visibility:hidden; opacity:0; transform:translateY(-10px); transition:opacity .3s var(--ease),transform .45s var(--ease),visibility 0s linear .45s; }
html.js.menu-open .v2-nav { visibility:visible; opacity:1; transform:none; transition:opacity .3s var(--ease),transform .45s var(--ease),visibility 0s; }
html.js .v2-nav a { display:flex; align-items:center; gap:16px; padding:16px 0 14px; border-bottom:1px solid var(--rule); color:var(--ink); font:400 clamp(38px,11.5vw,56px)/1 var(--display); letter-spacing:.005em; text-transform:uppercase; -webkit-tap-highlight-color:transparent; }
html.js .v2-nav a::before { content:""; flex:none; width:12px; height:12px; border-radius:50%; background:var(--c,var(--ink)); }
html.js .v2-nav a:hover,html.js .v2-nav a[aria-current="page"] { text-decoration:none; }
html.js .v2-nav a[aria-current="page"]::after { content:"Here"; margin-left:auto; color:var(--muted); font:400 14px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
html.js.menu-open .hdr { transform:none !important; background:var(--canvas); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
html.js.menu-open,html.js.menu-open body { overflow:hidden; }
}
@media (max-width:720px) and (prefers-reduced-motion:reduce) {
html.js .v2-nav,html.js.menu-open .v2-nav { transition:none; transform:none; }
}
@media (max-width:600px) {
.v2-contact { scroll-margin-top:76px; }
.contact-grid { padding:28px 18px 24px; border-top-width:5px; }
.contact-intro h2 { font-size:clamp(42px,12.6vw,56px); max-width:none; }
.contact-signature { font-size:28px; margin-top:22px; }
.contact-form input,.contact-form textarea { padding:12px 0; margin-bottom:24px; font-size:17px; }
.contact-form textarea { min-height:128px; }
.form-bottom { align-items:stretch; gap:14px; }
.form-bottom button { width:100%; justify-content:center; gap:12px; padding:18px 24px; }
.form-status { max-width:none; text-align:center; }
#say-hello .hwf-col a { padding:5px 0; }
#say-hello .hwf-up { padding:8px 0; }
}
.hover-band > span { min-width:0; overflow-wrap:anywhere; }
.contact-direct { list-style:none; margin:34px 0 0; padding:0; border-top:1px solid rgba(18,18,17,.14); max-width:440px; }
.contact-direct li { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:baseline; gap:12px; padding:13px 0; border-bottom:1px solid rgba(18,18,17,.14); }
.contact-direct .mono { margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.contact-direct a { color:var(--ink); font:500 17px/1.3 var(--sans); text-decoration:none; overflow-wrap:anywhere; }
.contact-direct a i { font-style:normal; opacity:.55; }
.contact-direct a:focus-visible,.portfolio-download:focus-visible { outline:2px solid #ED691D; outline-offset:4px; border-radius:4px; }
.portfolio-download { display:inline-grid; grid-template-columns:auto auto; grid-template-areas:"label icon" "meta icon"; align-items:center; column-gap:22px; row-gap:4px; margin-top:28px; padding:16px 20px 16px 24px; border-radius:999px; background:var(--ink); color:var(--canvas); text-decoration:none; transition:background-color .25s ease, transform .25s ease; }
.portfolio-download .pd-label { grid-area:label; font:500 17px/1.1 var(--sans); }
.portfolio-download .pd-meta { grid-area:meta; font-size:11px; letter-spacing:.1em; opacity:.68; color:inherit; }
.portfolio-download i { grid-area:icon; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#ED691D; color:#121211; font-style:normal; font-size:18px; }
@media (hover:hover) { .contact-direct a:hover { text-decoration:underline; text-underline-offset:4px; } .portfolio-download:hover { background:#101D40; transform:translateY(-1px); } }
@media (max-width:600px) {
.contact-direct { margin-top:26px; max-width:none; }
.contact-direct li { grid-template-columns:84px minmax(0,1fr); padding:14px 0; }
.contact-direct a { font-size:16px; padding:2px 0; }
.portfolio-download { display:grid; width:100%; grid-template-columns:1fr auto; margin-top:24px; padding:14px 14px 14px 22px; border-radius:18px; }
}
@media (prefers-reduced-motion:reduce) { .portfolio-download { transition:none; } }
@media (max-width:1100px) {
#say-hello .hwf-root { height:auto !important; padding-bottom:calc(23vw + 28px); }
}
@media (max-width:380px) {
.contact-direct li { grid-template-columns:1fr; gap:4px; padding:12px 0; }
.portfolio-download .pd-label { font-size:16px; }
}
.contact-sheet { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:clamp(36px,5vw,76px); row-gap:28px; padding:clamp(28px,3.4vw,48px); align-items:start; }
.contact-sheet .contact-kicker { margin-bottom:24px; }
.contact-sheet .contact-intro h2 { font-size:clamp(48px,5.2vw,78px); }
.contact-sheet .contact-intro > p:not(.mono) { margin-top:20px; font-size:18px; }
.contact-sheet .contact-signature { margin-top:22px; font-size:30px; }
.contact-bottom { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; padding-top:24px; border-top:1px solid rgba(18,18,17,.14); }
.contact-bottom .contact-direct { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(16px,2vw,30px); margin:0; max-width:none; border:0; }
.contact-bottom .contact-direct li { display:flex; flex-direction:column; gap:8px; padding:4px 0; border:0; }
.contact-bottom .contact-direct .mono { font-size:11px; }
.contact-bottom .contact-direct a { font-size:16px; padding:3px 0; }
.contact-bottom .portfolio-download { margin:0; }
@media (min-width:901px) and (max-width:1100px) {
.contact-bottom { grid-template-columns:1fr; gap:20px; }
.contact-bottom .portfolio-download { justify-self:start; }
}
@media (max-width:900px) {
.contact-sheet { grid-template-columns:1fr; gap:28px; }
.contact-bottom { grid-template-columns:1fr; gap:22px; }
.contact-bottom .portfolio-download { justify-self:start; }
}
@media (max-width:600px) {
.contact-sheet { padding:26px 18px; gap:26px; }
.contact-sheet .contact-intro h2 { font-size:clamp(42px,12.6vw,56px); }
.contact-sheet .contact-intro > p:not(.mono) { font-size:18px; }
.contact-sheet .contact-signature { font-size:28px; }
.contact-bottom { padding-top:18px; gap:22px; }
.contact-bottom .contact-direct { grid-template-columns:1fr; gap:0; }
.contact-bottom .contact-direct li { display:grid; grid-template-columns:84px minmax(0,1fr); gap:10px; align-items:baseline; padding:12px 0; border-bottom:1px solid rgba(18,18,17,.14); }
.contact-bottom .contact-direct a { padding:4px 0; }
.contact-bottom .portfolio-download { width:100%; justify-self:stretch; }
}
@media (max-width:380px) {
.contact-bottom .contact-direct li { grid-template-columns:1fr; gap:4px; padding:10px 0; }
}
.orbit-center.studio-hub { display:flex; align-items:center; justify-content:center; gap:8px; width:42%; max-width:240px; pointer-events:none; z-index:1; }
.studio-hub .hub-loud { width:60px; height:60px; object-fit:contain; mix-blend-mode:multiply; flex:none; }
.studio-hub .hub-mtrx { width:72px; height:36px; object-fit:contain; flex:none; }
.studio-hub .hub-plus { color:var(--ink); font:400 22px/1 var(--sans); flex:none; }
@container (max-width:450px) {
.orbit-center.studio-hub { width:auto; gap:3px; flex-direction:column; }
.studio-hub .hub-loud { width:28px; height:28px; }
.studio-hub .hub-mtrx { width:40px; height:16px; }
.studio-hub .hub-plus { font-size:14px; }
.client-ribbon .orbit-slot { width:52px; }
.client-ribbon .reel-brand { padding:4px; }
.client-ribbon .orbit-position-0 { top:14%; }
.client-ribbon .orbit-position-1 { left:86%; }
.client-ribbon .orbit-position-2 { top:86%; }
.client-ribbon .orbit-position-3 { left:14%; }
}
@container (max-width:300px) {
.orbit-center.studio-hub { gap:2px; }
.studio-hub .hub-loud { width:20px; height:20px; }
.studio-hub .hub-mtrx { width:32px; height:14px; }
.studio-hub .hub-plus { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
.client-ribbon:not(.motion-enabled) .orbit-center.studio-hub { position:static; transform:none; width:100%; max-width:none; margin:0 auto 16px; flex-direction:row; }
}
.logo-playground { min-height:360px; width:100%; min-width:0; }
.v2-pair:has(> #women-of-ahmedabad) #mitti .story-image { min-height:360px; width:100%; min-width:0; }
.logo-playground .reel-head { pointer-events:none; }
.logo-stage-area { position:absolute; inset:66px 12px 30px; touch-action:pan-y; }
.logo-playground .studio-hub { display:flex !important; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:auto; max-width:none; gap:7px; pointer-events:none; }
.logo-playground .studio-hub .hub-loud { width:36px; height:36px; }
.logo-playground .studio-hub .hub-mtrx { width:52px; height:26px; }
.logo-playground .studio-hub .hub-plus { font-size:18px; }
.logo-bodies { position:absolute; inset:0; display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; gap:10px; margin:0; padding:0; list-style:none; overflow:auto; }
.logo-body { width:clamp(48px,9cqw,68px); height:clamp(48px,9cqw,68px); flex:none; }
.logo-grab { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border:1px solid rgba(18,18,17,.12); border-radius:50%; padding:5px; margin:0; color:#121211; background:#FFF; font:500 14px/1 var(--sans); letter-spacing:-.045em; text-align:center; box-shadow:0 2px 4px rgba(18,18,17,.035); user-select:none; -webkit-user-select:none; touch-action:none; -webkit-touch-callout:none; cursor:grab; }
.logo-grab:disabled { opacity:1; cursor:default; }
.logo-grab img { display:block; width:100%; height:100%; object-fit:contain; border-radius:50%; pointer-events:none; -webkit-user-drag:none; }
.logo-grab span { display:block; pointer-events:none; }
.logo-grab:has(.logo-text) { padding:2px; }
.logo-word { white-space:nowrap; }
.logo-grab:focus-visible { outline:2px solid #101D40; outline-offset:3px; }
.logo-body.is-held { z-index:4; }
.logo-body.is-held .logo-grab { cursor:grabbing; border-color:#101D40; box-shadow:0 8px 18px rgba(18,18,17,.13); }
.logo-physics-hint { position:absolute; bottom:9px; left:18px; margin:0; font:400 14px/1.2 var(--sans); color:#555650; pointer-events:none; }
.logo-playground:not(.physics-ready) .studio-hub { display:none !important; }
.physics-ready .logo-bodies { display:block; overflow:visible; }
.physics-ready .logo-body { position:absolute; left:0; top:0; will-change:transform; }
@container(max-width:450px) {
.logo-stage-area { inset:58px 8px 30px; }
.logo-playground .studio-hub { flex-direction:row; gap:3px; }
.logo-playground .studio-hub .hub-loud { width:24px; height:24px; }
.logo-playground .studio-hub .hub-mtrx { width:34px; height:18px; }
.logo-playground .studio-hub .hub-plus { font-size:14px; }
.logo-physics-hint { left:14px; }
.logo-text { width:calc(100% / .84); flex:none; transform:scaleX(.84); }
}
@media(prefers-reduced-motion:reduce) {
.logo-body { will-change:auto; }
.logo-grab { transition:none; }
}
.uploaded-gallery { align-items:start; }
.uploaded-gallery figure { aspect-ratio:auto; background:transparent; }
.uploaded-gallery a { display:block; }
.uploaded-gallery img { height:auto; object-fit:contain; }
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.\!visible{visibility:visible!important}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.flex{display:flex}.hidden{display:none}.w-full{width:100%}.resize{resize:both}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{--background:60 8% 90%;--foreground:60 3% 7%;--primary:225 60% 16%;--primary-foreground:0 0% 100%;--secondary:60 8% 95%;--secondary-foreground:60 3% 7%;--muted:60 8% 95%;--muted-foreground:60 3% 33%;--accent:22 85% 52%;--accent-foreground:60 3% 7%;--popover:60 8% 95%;--popover-foreground:60 3% 7%;--card:60 8% 95%;--card-foreground:60 3% 7%;--destructive:0 84% 60%;--destructive-foreground:0 0% 100%;--border:60 3% 78%;--input:60 3% 65%;--ring:225 60% 16%;--radius:0.5rem}[data-halftone-footer]{margin-top:clamp(60px,6vw,90px)}.it-roll{display:inline-flex;align-items:center;justify-content:center;gap:12px}.it-roll-window{display:block;height:1.4em;overflow:hidden;perspective:400px}.it-roll-track{display:flex;flex-direction:column;transform:translateY(-50%);transition:transform .48s cubic-bezier(.22,.7,.15,1)}.it-roll-face{display:block;flex:none;height:1.4em;line-height:1.4;white-space:nowrap}.it-roll-face:first-child{transform:rotateX(35deg);transform-origin:50% 100%}.it-roll-face:first-child,.it-roll-face:last-child{transition:transform .48s cubic-bezier(.22,.7,.15,1)}.it-roll-face:last-child{transform:rotateX(0);transform-origin:50% 0}.it-roll-icon{position:relative;overflow:hidden;flex:none}.it-roll-icon,.it-roll-icon svg{display:block;width:18px;height:18px}.it-roll-icon svg{transition:transform .48s cubic-bezier(.22,.7,.15,1)}.it-roll-icon svg:last-child{position:absolute;top:-18px;left:0}@media(hover:hover){.it-roll:hover .it-roll-track{transform:translateY(0)}.it-roll:hover .it-roll-face:first-child{transform:rotateX(0)}.it-roll:hover .it-roll-face:last-child{transform:rotateX(-35deg)}.it-roll:hover .it-roll-icon svg{transform:translateY(18px)}}.it-roll:focus-visible .it-roll-track{transform:translateY(0)}.it-roll:focus-visible .it-roll-face:first-child{transform:rotateX(0)}.it-roll:focus-visible .it-roll-face:last-child{transform:rotateX(-35deg)}.it-roll:focus-visible .it-roll-icon svg{transform:translateY(18px)}@media(prefers-reduced-motion:reduce){.it-roll .it-roll-face,.it-roll .it-roll-icon svg,.it-roll .it-roll-track{transition:none!important;transform:none!important}}.kinetic-word{display:inline-block}.kinetic-story,.kinetic-strategy{padding:.03em .12em .08em;font-family:var(--sans);font-style:normal;font-weight:500;line-height:1}.kinetic-story{background:#f4a623;color:#121211}.kinetic-strategy{background:#101d40;color:#fff}.gsap-orbit .reel-toggle{display:none}.gsap-orbit .orbit-window{inset:64px 4px 76px!important;overflow:hidden!important;cursor:grab;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none}.gsap-orbit.is-dragging .orbit-window{cursor:grabbing}.gsap-orbit .orbit-track{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;aspect-ratio:auto!important;translate:none!important;animation:none!important;margin:0!important}.gsap-orbit .orbit-track:before{display:block!important;inset:17% 13%;border-radius:50%}.gsap-orbit .orbit-slot{position:absolute!important;top:0!important;left:0!important;width:clamp(48px,12cqw,84px)!important;max-width:none!important;margin:0!important;translate:none}.gsap-orbit .orbit-slot,.gsap-orbit .orbit-upright{animation:none!important}.gsap-orbit .studio-hub{display:flex!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;width:auto!important}.gsap-orbit .hub-loud{width:42px;height:42px}.gsap-orbit .hub-mtrx{width:60px;height:30px}.gsap-orbit .hub-plus{font-size:18px}.orbit-controls{position:absolute;left:18px;right:18px;bottom:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;z-index:3}.orbit-hint{color:var(--muted);font-size:14px}.orbit-navigation{display:flex;align-items:center;gap:6px}.orbit-controls button{min-width:40px;min-height:40px;padding:6px 12px;font:400 14px/1 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:999px;cursor:pointer}.orbit-controls button:hover{background:var(--ink);color:var(--paper)}.orbit-speed{display:flex;align-items:center;gap:8px;font-size:14px}.orbit-speed input{width:85px;min-height:26px;accent-color:#ed691d;cursor:ew-resize}.orbit-window:focus-visible{outline:2px solid #101d40;outline-offset:-3px;border-radius:8px}@container (max-width:450px){.gsap-orbit .orbit-window{inset:56px 4px 68px!important}.gsap-orbit .orbit-slot{width:48px!important}.gsap-orbit .studio-hub{gap:2px}.gsap-orbit .hub-loud{width:22px;height:22px}.gsap-orbit .hub-mtrx{width:32px;height:14px}.gsap-orbit .hub-plus{font-size:12px}.orbit-controls{left:12px;right:12px;bottom:8px;gap:2px 8px}.orbit-hint{width:100%}.orbit-controls button{min-width:36px;min-height:36px;padding:6px 10px}.orbit-speed input{width:64px}.gsap-orbit .reel-wordmark{font-size:14px;letter-spacing:-.05em}}@container (max-width:300px){.gsap-orbit .orbit-window{inset:48px 4px 56px!important}.gsap-orbit .orbit-slot{width:44px!important}.gsap-orbit .studio-hub{flex-direction:row;gap:2px}.gsap-orbit .hub-loud{width:12px;height:12px}.gsap-orbit .hub-mtrx{width:22px;height:10px}.gsap-orbit .hub-plus{font-size:8px}.orbit-controls{bottom:4px}.orbit-hint{font-size:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.kinetic-word{transform:none!important;opacity:1!important}}a.pill.it-roll:has(.it-roll-icon){padding:5px 6px 5px 20px;min-height:42px}a.pill.it-roll .it-roll-icon{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper)}a.pill.it-roll.dark .it-roll-icon{background:var(--paper);color:var(--ink)}a.pill.it-roll .it-roll-icon svg{position:absolute;top:6px;left:6px}a.pill.it-roll .it-roll-icon svg:last-child{top:-24px;left:6px}@media(hover:hover){a.pill.it-roll:hover .it-roll-icon{background:var(--paper);color:var(--ink)}a.pill.it-roll.dark:hover .it-roll-icon{background:var(--ink);color:var(--paper)}a.pill.it-roll:hover .it-roll-icon svg{transform:translateY(30px)}}a.pill.it-roll:focus-visible .it-roll-icon svg{transform:translateY(30px)}.it-arrow{--ax:0;--ay:-125%;position:relative;display:inline-block;flex:none;width:1.1em;height:1.15em;overflow:hidden;line-height:1;vertical-align:-.18em}.it-arrow-ne{--ax:125%;--ay:-125%}.it-arrow-se{--ax:125%;--ay:125%}.it-arrow-e{--ax:125%;--ay:0%}.it-arrow-w{--ax:-125%;--ay:0%}.it-arrow-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .48s cubic-bezier(.22,.7,.15,1)}.it-arrow-face:last-child{transform:translate(calc(var(--ax)*-1),calc(var(--ay)*-1))}.it-arrow-link:focus-visible .it-arrow-face:first-child,.it-arrow-link:hover .it-arrow-face:first-child{transform:translate(var(--ax),var(--ay))}.it-arrow-link:focus-visible .it-arrow-face:last-child,.it-arrow-link:hover .it-arrow-face:last-child{transform:translate(0)}.stub small .it-arrow{font-size:16px;margin-left:3px}@media(prefers-reduced-motion:reduce){.it-arrow-face{transition:none}.it-arrow-face:first-child{transform:none!important}.it-arrow-face:last-child{display:none}}
html.it-smooth { scroll-behavior: auto !important; }
@keyframes it-rise { from { opacity: .01; transform: translate3d(0, .34em, 0); } to { opacity: 1; transform: none; } }
@keyframes it-lift { from { opacity: .01; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes it-settle { from { opacity: .01; transform: scale(1.035); } to { opacity: 1; transform: none; } }
html.motion-on :is(.hero h1.fit > span, main > article > h1.fit > span) {
display: inline-block; animation: it-rise 1.05s cubic-bezier(.16, 1, .3, 1) .04s both;
}
html.motion-on :is(.hero .positioning, main > article > .summary, .about-hero .statement) { animation: it-lift .95s cubic-bezier(.16, 1, .3, 1) .2s both; }
html.motion-on :is(.hero-roles li, main > article > .meta, main > article > .crumbs, .about-hero .crumbs) { animation: it-lift .9s cubic-bezier(.16, 1, .3, 1) .3s both; }
html.motion-on .hero-roles li + li { animation-delay: .38s; }
html.motion-on .hero-actions > a { animation: it-lift .9s cubic-bezier(.16, 1, .3, 1) .46s both; }
html.motion-on main > article > .project-banner .banner-image { animation: it-settle 1.1s cubic-bezier(.16, 1, .3, 1) .28s both; }
html.motion-on main > article > .project-banner .banner-image:nth-child(2) { animation-delay: .38s; }
html.motion-on main > article > .project-banner .banner-image:nth-child(3) { animation-delay: .48s; }
html.motion-on .reveal { opacity: 1; transform: none; transition: none; }
html.motion-on .fit.ready > span { animation: none; }
.itline-mask { overflow: visible !important; clip-path: inset(-0.3em -0.25em -0.14em -0.25em); }
.itchar { will-change: transform; }
html.motion-on :is(.tile, .proof-board figure, .connected-photo, .project-banner .banner-image) img {
scale: var(--it-scale, 1);
translate: 0 var(--it-y, 0%);
}
html.motion-on .hdr { transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), box-shadow 0.4s ease; }
html.motion-on .hdr.is-hidden { transform: translateY(calc(-100% - 2px)); }
html.motion-on .hdr.is-hidden:focus-within { transform: none; }
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--rule); }
.it-progress { position: fixed; z-index: 70; top: 0; left: 0; width: 100%; height: 2px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.it-marquee { overflow: hidden; margin-top: clamp(20px, 2.6vw, 36px); padding: clamp(14px, 1.8vw, 24px) 0; border-block: 1px solid var(--rule); }
.it-marquee-track { display: flex; width: max-content; }
.it-marquee.is-live .it-marquee-track { will-change: transform; }
.it-marquee-item { display: inline-flex; align-items: center; gap: clamp(14px, 1.4vw, 24px); padding-right: clamp(28px, 3vw, 52px); font: 400 clamp(34px, 4.4vw, 72px)/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.it-marquee-item i { flex: none; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--dot); }
.it-cursor { position: fixed; z-index: 90; top: 0; left: 0; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #E8E8E4; color: #121211; font: 500 15px/1 var(--sans); letter-spacing: 0.02em; pointer-events: none; box-shadow: 0 0 0 1px rgb(18 18 17 / 0.12), 0 14px 34px rgb(18 18 17 / 0.22); visibility: hidden; }
@keyframes it-curtain-label { from { transform: translateY(55%); opacity: 0; } to { transform: none; opacity: 1; } }
html.motion-on .curtain.cover b { animation: it-curtain-label 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
html.motion-on .curtain.cover { transition-duration: 0.55s; }
html.motion-on .curtain.lift { transition-duration: 0.85s; }
@media (max-width: 600px) {
.it-marquee-item { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
html.motion-on :is(.hero h1.fit > span, main > article > h1.fit > span, .hero .positioning, main > article > .summary, .about-hero .statement, .hero-roles li, main > article > .meta, main > article > .crumbs, .about-hero .crumbs, .hero-actions > a, main > article > .project-banner .banner-image) { animation: none !important; }
.it-cursor, .it-progress { display: none; }
.hdr { transition: none !important; transform: none !important; }
}
.fit[data-fit] { container-type: inline-size; }
.fit[data-fit] > span { font-size: var(--fit-size); }
.poster-photo[style*="--pc:#E83E8C"] { --pc: #DE1A74 !important; }
.poster-photo[style*="--pc:#4D6CFA"] { --pc: #4666FA !important; }