@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --black: #0a0a0a;
  --white: #f4f3ef;
  --line: rgba(10, 10, 10, .19);
  --line-light: rgba(255, 255, 255, .22);
  --muted: #767676;
  --pad: clamp(22px, 3.1vw, 48px);
  --rail: clamp(68px, 7vw, 112px);
  --ease: cubic-bezier(.22, .75, .15, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; color: var(--black); background: var(--black); font-family: Inter, Arial, sans-serif; font-size: 14px; line-height: 1.18; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
video, img { display: block; width: 100%; height: 100%; object-fit: cover; }
sup { font-size: .35em; line-height: 0; vertical-align: super; margin-left: .2em; }
.site-shell { overflow: clip; }
.panel { position: relative; min-height: 100vh; }
.panel--white { --panel-bg: var(--white); background: var(--white); }
.panel--black { --panel-bg: var(--black); background: var(--black); color: var(--white); }
.diagonal-panel { --panel-slant: 0px; isolation: isolate; }
.diagonal-panel::before { content: ""; position: absolute; z-index: -1; right: 0; bottom: calc(100% - 1px); left: 0; height: calc(var(--panel-slant) + 2px); background: var(--panel-bg, var(--black)); clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none; will-change: height; }
.panel--white + .panel--white { border-top: 1px solid var(--line); }
.section-rail { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; margin: 0 var(--pad); padding: 17px 0; border-top: 1px solid var(--line); color: #4a4a4a; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.section-rail span:nth-child(2) { justify-self: center; }
.section-rail span:last-child { justify-self: end; }
.section-rail--dark { color: #aaa; border-color: var(--line-light); }

.loader { position: fixed; z-index: 1000; inset: 0; display: grid; place-content: center; gap: 24px; background: #050505; color: white; transition: transform 1s var(--ease) .15s; }
.loader.is-gone { transform: translateY(-105%); }
.loader__brand { font-weight: 700; letter-spacing: -.06em; font-size: clamp(28px, 5vw, 72px); }
.loader__line { width: min(280px, 70vw); height: 1px; background: #333; overflow: hidden; }
.loader__line i { display: block; width: 100%; height: 100%; background: white; transform: translateX(-100%); animation: loadline 1.05s var(--ease) forwards; }
@keyframes loadline { to { transform: none; } }

.hero { height: 160vh; background: var(--black); }
.hero__sticky { position: sticky; top: 0; height: 100vh; min-height: 650px; overflow: hidden; color: white; background: #111; }
.hero__media { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.hero__media-effect { position: absolute; inset: 0; overflow: visible; opacity: .001; transform: scale(1.2); transform-origin: center; transition: opacity 1s cubic-bezier(.44, 0, .56, 1), transform 1s cubic-bezier(.44, 0, .56, 1); }
.hero-ready .hero__media-effect { opacity: 1; transform: scale(1); }
.hero__film { filter: none; }
.hero__shade { display: none; }
.site-header { position: absolute; z-index: 30; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: start; padding: 20px var(--pad); border-bottom: 1px solid var(--line-light); }
.brand { font-weight: 700; letter-spacing: -.065em; font-size: 15px; }
.desktop-nav { display: flex; justify-content: space-between; gap: 25px; }
.desktop-nav a { display: flex; gap: 5px; font-size: 14px; opacity: 1; transition: opacity .3s; }
.desktop-nav small { font-size: 7px; opacity: .55; }
.desktop-nav a:hover { opacity: .48; }
.desktop-nav a.is-current { opacity: .48; pointer-events: none; cursor: default; }
.header-card { justify-self: end; display: grid; grid-template-columns: 35px 1fr 20px; gap: 10px; align-items: center; min-width: 196px; margin-top: -8px; padding: 8px; color: #111; background: white; }
.header-card__mark { display: grid; place-items: center; width: 35px; height: 35px; color: white; background: #111; font-size: 10px; font-weight: 700; }
.header-card b, .header-card small { display: block; font-size: 9px; }
.header-card small { margin-top: 3px; color: #777; }
.menu-toggle, .mobile-menu { display: none; }
.hero__copy { position: absolute; z-index: 4; top: 26%; left: var(--pad); font-size: clamp(15px, 1.4vw, 20px); }
.hero__copy p { margin: 0 0 35px; }
.line-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 45px; min-width: 210px; padding: 11px 0; border-bottom: 1px solid currentColor; font-size: 12px; }
.line-link--light { color: white; border-color: rgba(255,255,255,.7); }
.arrow { position: relative; display: inline-block; width: 23px; height: 12px; }
.arrow::before { content: ""; position: absolute; top: 50%; left: 0; right: 1px; height: 1px; background: currentColor; transform: translateY(-50%); }
.arrow::after { content: ""; position: absolute; top: 2px; right: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.arrow--mini { width: 16px; transform: scale(.78); }
.cross { position: absolute; z-index: 3; width: 14px; height: 14px; color: white; }
.cross::before, .cross::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; }
.cross::after { transform: rotate(90deg); }
.cross--one { left: 25%; top: 55%; }
.cross--two { right: 18%; top: 42%; }
.cross--dark { color: #111; }
.hero__service { position: absolute; z-index: 3; left: 3.45vw; top: auto; bottom: calc(4vh + 17.9vw + clamp(36px, 4vw, 64px)); display: grid; gap: 0; font-size: clamp(14px, 1.05vw, 18px); font-weight: 500; line-height: 1.65; letter-spacing: -.035em; }
.hero__service span { display: block; white-space: nowrap; }
.hero__service i { color: rgba(255,255,255,.52); font-style: normal; font-weight: 500; }
.hero__service strong { font-weight: 700; }
.hero__year { position: absolute; z-index: 3; bottom: 17px; left: var(--pad); display: flex; gap: 7px; align-items: end; font-size: 8px; letter-spacing: .08em; }
.hero__year i { width: 1px; height: 12px; background: rgba(255,255,255,.55); }
.hero__year i:nth-child(3) { height: 20px; }
.hero__wordmark { position: absolute; z-index: 2; bottom: 4vh; left: 2.3vw; white-space: nowrap; font-size: 24.2vw; font-weight: 700; letter-spacing: -.09em; line-height: .74; transform-origin: center; will-change: transform; }
.hero__wordmark span { display: block; transform: scaleX(.735); transform-origin: left bottom; }

.about { --about-slant: 0px; z-index: 5; isolation: isolate; min-height: max(980px, 100vh); margin-top: -60vh; padding: clamp(48px, 4.5vh, 58px) 0 clamp(52px, 5.3vh, 72px); background: #fff; }
.about::before { content: ""; position: absolute; z-index: -1; right: 0; bottom: calc(100% - 1px); left: 0; height: calc(var(--about-slant) + 2px); background: #fff; clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none; will-change: height; }
.about__statement { width: 88%; margin: 0 auto; text-align: center; font-size: clamp(44px, 4.45vw, 96px); font-weight: 500; line-height: .81; letter-spacing: -.07em; }
.about__statement span { display: block; }
.about__statement span:first-child { transform: translateX(11.7vw); }
.about__statement span:last-child { transform: translateX(-5.9vw); }
.about__body { position: relative; min-height: clamp(540px, 52.3vh, 610px); margin-top: clamp(96px, 9.5vh, 118px); }
.about__media { position: absolute; top: 0; left: 8.25vw; width: 19vw; min-width: 180px; aspect-ratio: .745; overflow: hidden; border-radius: 5px; }
.about__media img { filter: none; object-position: center; }
.about__details { position: absolute; top: 3px; right: 8.25vw; left: 43.3vw; }
.about__row { display: grid; grid-template-columns: 17.4vw minmax(0, 1fr); min-height: clamp(130px, 14.5vh, 170px); font-size: clamp(16px, 1vw, 20px); line-height: 1.18; letter-spacing: -.045em; }
.about__row p { max-width: 500px; margin: 0; color: #777; }
.about__label { color: #111; font-weight: 500; }
.about__results { align-self: start; }
.about__results div { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 58px; border-bottom: 1px solid rgba(10,10,10,.14); }
.about__results strong { font-weight: 500; }
.about__results span { color: #777; }
.about__cta { display: grid; grid-template-columns: 1fr auto; align-items: center; width: clamp(260px, 14.25vw, 310px); margin: clamp(40px, 5.4vh, 64px) 0 0 17.4vw; padding-bottom: 12px; border-bottom: 1px solid #111; font-size: clamp(16px, 1vw, 20px); font-weight: 500; letter-spacing: -.035em; }
.about__cta i { position: relative; width: 16px; height: 16px; }
.about__cta i::before, .about__cta i::after { content: ""; position: absolute; right: 0; bottom: 0; background: #111; }
.about__cta i::before { width: 1px; height: 9px; }
.about__cta i::after { width: 9px; height: 1px; }

.client-ticker { position: relative; z-index: 2; width: 100%; margin-top: clamp(120px, 13vh, 170px); overflow: hidden; }
.client-ticker__track { display: flex; width: max-content; will-change: transform; animation: clientTicker var(--ticker-duration, 18s) linear infinite; }
.client-ticker__group { display: flex; flex: none; gap: 12px; padding-right: 12px; }
.client-card { display: grid; place-items: center; flex: none; width: clamp(220px, 14vw, 286px); height: clamp(132px, 10vw, 205px); color: #262626; background: #f5f5f3; }
.client-card img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.client-logo { display: inline-flex; align-items: center; gap: .34em; white-space: nowrap; font-size: clamp(20px, 1.55vw, 31px); line-height: 1; letter-spacing: -.06em; }
.client-logo i { font-size: .62em; font-style: normal; }
.client-logo--northwind { font-weight: 700; }
.client-logo--lumen { font-weight: 600; letter-spacing: .04em; }
.client-logo--atlas { font-weight: 700; font-style: italic; letter-spacing: -.08em; }
.client-logo--vantage { font-weight: 700; letter-spacing: -.025em; }
@keyframes clientTicker { to { transform: translate3d(var(--ticker-shift, -50%), 0, 0); } }

.portfolio { z-index: 6; min-height: 100vh; padding-bottom: clamp(130px, 12vw, 230px); }
.portfolio__layout { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(600px, 46.5vw) minmax(190px, 1fr); gap: clamp(30px, 4.2vw, 85px); align-items: start; padding: clamp(80px, 8vw, 150px) var(--pad) 0; }
.portfolio__aside { position: sticky; top: 33vh; align-self: start; min-width: 0; }
.portfolio__aside--left { padding-left: clamp(0px, 4vw, 85px); }
.portfolio__aside--left h2 { margin: 0 0 clamp(56px, 6vw, 110px); font-size: clamp(45px, 4.3vw, 82px); font-weight: 500; line-height: .85; letter-spacing: -.075em; }
.portfolio__aside--left .line-link { min-width: min(235px, 100%); }
.portfolio__aside--right { display: flex; justify-content: flex-end; padding-right: clamp(0px, 2.2vw, 46px); }
.portfolio__all { display: grid; gap: 16px; width: clamp(150px, 11.5vw, 230px); font-size: clamp(11px, .76vw, 15px); }
.portfolio__all-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #1d1616; }
.portfolio__all-image img { object-fit: contain; object-position: center; filter: none; transform: scale(1.035); transition: transform .9s var(--ease); }
.portfolio__all:hover .portfolio__all-image img { transform: scale(1); }
.portfolio__all > span:last-child { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.portfolio__all b { color: var(--muted); font-weight: 400; }
.project-stack { display: grid; gap: clamp(64px, 5vw, 96px); min-width: 0; }
.project-card { --stack-top: clamp(34px, 4.8vh, 56px); position: sticky; top: var(--stack-top); z-index: 1; min-width: 0; padding-bottom: 1px; background: var(--white); will-change: transform; }
.project-card:nth-child(2) { --stack-top: calc(clamp(34px, 4.8vh, 56px) + 30px); z-index: 2; }
.project-card:nth-child(3) { --stack-top: calc(clamp(34px, 4.8vh, 56px) + 60px); z-index: 3; }
.project-card:nth-child(4) { --stack-top: calc(clamp(34px, 4.8vh, 56px) + 90px); z-index: 4; }
.project-card__visual { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--project-tone); }
.project-card__focus { position: absolute; display: block; overflow: hidden; inset: 0; }
.project-card__focus img { object-fit: contain; object-position: center; filter: none; transform: scale(1.035); transition: transform 1.1s var(--ease); }
.project-card__visual:hover .project-card__focus img { transform: scale(1); }
.project-card__meta { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: start; min-height: clamp(70px, 5.5vw, 105px); padding: 15px 0 0; border-bottom: 1px solid var(--line); font-size: clamp(10px, .65vw, 13px); text-transform: uppercase; letter-spacing: .035em; }
.project-card__meta p { display: grid; gap: 4px; margin: 0; }
.project-card__meta strong { font-size: clamp(13px, .9vw, 18px); font-weight: 500; letter-spacing: -.025em; text-transform: none; }
.project-card__meta small { color: var(--muted); font-size: inherit; }
.project-card__meta > span:last-child { justify-self: end; color: var(--muted); }

.services { --panel-bg: #090909; z-index: 7; min-height: 100vh; padding-bottom: clamp(120px, 10vw, 210px); background: #090909; }
.services__lead { position: relative; min-height: clamp(720px, 68vw, 1180px); padding: clamp(115px, 10vw, 195px) var(--pad) clamp(90px, 8vw, 155px); }
.services__lead h2 { width: calc(100% - (2 * var(--pad))); margin: 0 auto; font-size: clamp(65px, 7.9vw, 153px); line-height: .82; letter-spacing: -.073em; font-weight: 500; }
.services__lead h2 span { display: block; }
.services__lead h2 span:first-child { margin-left: 7.5%; }
.services__lead h2 span:nth-child(2) { margin-left: 0; }
.services__lead h2 span:last-child { margin-left: 12%; color: #5f5f5f; }
.services__portrait { position: absolute; left: 8.2vw; bottom: clamp(92px, 9vw, 170px); width: clamp(145px, 11vw, 220px); aspect-ratio: .78; overflow: hidden; background: #642116; }
.services__portrait img { filter: saturate(1.12) contrast(1.1); object-position: 60% 45%; }
.services__lead > .line-link { position: absolute; left: 36%; bottom: clamp(95px, 9.5vw, 180px); min-width: clamp(225px, 16vw, 320px); font-size: clamp(12px, .85vw, 16px); }
.services__cross--one { top: 49%; left: 49.5%; }
.services__cross--two { right: 6.5%; bottom: 20%; }
.service-list { margin: 0 var(--pad); border-top: 1px solid var(--line-light); }
.service-row { display: grid; grid-template-columns: 25% 28% 1fr; gap: 4.6%; align-items: center; min-height: clamp(420px, 31vw, 610px); border-bottom: 1px solid var(--line-light); opacity: .28; transition: opacity .65s var(--ease); }
.service-row.is-active, .service-row:hover { opacity: 1; }
.service-row__number { font-size: clamp(145px, 18vw, 345px); line-height: .66; letter-spacing: -.09em; font-weight: 500; }
.service-row__media { width: 100%; aspect-ratio: 1.36; overflow: hidden; background: #512016; }
.service-row__media img { filter: saturate(.85) contrast(1.1); object-position: 57% 47%; transform: scale(1.05); transition: transform 1s var(--ease); }
.service-row:hover .service-row__media img { transform: scale(1); }
.service-row__media--warm img { filter: sepia(.25) saturate(.72) brightness(1.18); object-position: 72% 52%; }
.service-row__media--mono img { filter: grayscale(1) contrast(1.2); object-position: 28% 50%; }
.gradient { display: grid; place-items: center; color: rgba(255,255,255,.9); background: #333; }
.gradient span { font-size: clamp(42px, 6vw, 88px); font-weight: 600; letter-spacing: -.08em; }
.gradient--blue { background: radial-gradient(circle at 70% 20%, #cbfbff, transparent 24%), linear-gradient(135deg, #1456ff, #00cdd4); }
.gradient--orange { background: radial-gradient(circle at 65% 35%, #ffd89d, transparent 15%), linear-gradient(135deg, #ff3a14, #ff9400); }
.gradient--violet { background: radial-gradient(circle at 30% 20%, #f3c8ff, transparent 18%), linear-gradient(135deg, #33116f, #d33cff); }
.gradient--lime { background: radial-gradient(circle at 70% 20%, #fff, transparent 17%), linear-gradient(135deg, #4e7600, #b8ff29); }
.service-row__content small { color: #777; font-size: clamp(9px, .62vw, 12px); text-transform: uppercase; letter-spacing: .055em; }
.service-row__content h3 { margin: clamp(28px, 3vw, 58px) 0 clamp(36px, 4vw, 76px); font-size: clamp(58px, 7.1vw, 136px); font-weight: 500; line-height: .82; letter-spacing: -.073em; }
.service-row__content p { width: min(440px, 90%); margin: 0; color: #999; font-size: clamp(13px, .82vw, 16px); line-height: 1.24; }

.engagement { z-index: 8; min-height: 1080px; padding-bottom: 130px; }
.engagement__heading { display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; margin: 90px var(--pad) 100px; }
.engagement__heading h2 { margin: 0; font-size: clamp(76px, 11vw, 170px); line-height: .78; letter-spacing: -.085em; font-weight: 500; }
.engagement__heading p { max-width: 300px; margin: 0 0 5px; font-size: 15px; }
.engagement-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 var(--pad); background: var(--line); border: 1px solid var(--line); }
.engagement-card { position: relative; min-height: 425px; padding: 26px; background: var(--white); color: #9f9f9f; transition: color .55s var(--ease), background .55s var(--ease); }
.engagement-card.is-current, .engagement-card:hover { color: #111; background: #e8e8e5; }
.engagement-card small { font-size: 9px; text-transform: uppercase; }
.engagement-card h3 { margin: 85px 0 30px; font-size: clamp(38px, 4.1vw, 62px); line-height: .9; letter-spacing: -.06em; font-weight: 500; }
.engagement-card p { width: 75%; margin: 0; font-size: 12px; }
.circle-link { position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 54px; height: 40px; color: white; background: #111; border-radius: 50%; transition: transform .45s var(--ease); }
.circle-link:hover { --mag-scale: 1.08; }
.circle-link .arrow { width: 17px; }

.testimonial { z-index: 9; min-height: 1180px; overflow: visible; }
.testimonial__quote { width: 118%; margin: 100px 0 0 -3%; font-size: clamp(110px, 14.8vw, 230px); line-height: .78; letter-spacing: -.085em; font-weight: 500; }
.testimonial__visual { position: absolute; left: var(--pad); bottom: 112px; width: 22vw; min-width: 250px; aspect-ratio: 1.15; overflow: hidden; }
.testimonial__visual img { filter: grayscale(1); object-position: 66% center; }
.testimonial__credit { position: absolute; left: 30%; bottom: 155px; display: grid; gap: 4px; }
.testimonial__credit b { font-size: 13px; }
.testimonial__credit span { color: #777; font-size: 10px; }
.testimonial__stats { position: absolute; right: var(--pad); bottom: 112px; display: grid; grid-template-columns: repeat(2, 145px); gap: 45px 35px; }
.testimonial__stats div { display: grid; gap: 4px; }
.testimonial__stats strong { font-size: 38px; letter-spacing: -.06em; }
.testimonial__stats span { color: #777; font-size: 9px; text-transform: uppercase; }

.archive { z-index: 10; min-height: 1000px; padding-bottom: 100px; }
.archive__head { display: flex; justify-content: space-between; align-items: end; margin: 95px var(--pad) 90px; }
.archive__head h2 { margin: 0; font-size: clamp(80px, 11vw, 170px); line-height: .78; letter-spacing: -.085em; font-weight: 500; }
.archive__head > span { margin-bottom: 8px; color: #777; font-size: 10px; text-transform: uppercase; }
.archive-list { margin: 0 var(--pad); border-top: 1px solid var(--line); }
.archive-row { position: relative; display: grid; grid-template-columns: 15% 1fr 23%; align-items: center; min-height: 112px; border-bottom: 1px solid var(--line); }
.archive-row > span, .archive-row small { color: #777; font-size: 10px; text-transform: uppercase; }
.archive-row strong { font-size: clamp(30px, 4.6vw, 70px); letter-spacing: -.06em; font-weight: 500; transition: transform .5s var(--ease); }
.archive-row:hover strong { transform: translateX(22px); }
.archive-thumb { position: absolute; z-index: 3; right: 3%; width: 125px; height: 86px; opacity: 0; transform: rotate(-5deg) scale(.8); transition: opacity .35s, transform .5s var(--ease); pointer-events: none; }
.archive-row:hover .archive-thumb { opacity: 1; transform: rotate(2deg) scale(1); }

.insight { z-index: 11; min-height: 640px; padding: 80px var(--pad) 120px; }
.insight__eyebrow { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: #777; font-size: 9px; text-transform: uppercase; }
.insight__link { position: relative; display: block; width: 87%; margin-top: 55px; font-size: clamp(68px, 9.2vw, 140px); line-height: .84; letter-spacing: -.075em; }
.insight__link > .circle-link { right: -10%; bottom: 10px; }

.footer { --panel-bg: #090909; position: relative; z-index: 12; min-height: 950px; color: white; background: #090909; overflow: visible; }
.footer__main { display: grid; grid-template-columns: 1.4fr .6fr; gap: 70px; margin: 110px var(--pad) 0; }
.footer__main h2 { margin: 0; font-size: clamp(95px, 13vw, 205px); line-height: .77; letter-spacing: -.087em; font-weight: 500; }
.footer__email { margin-top: 70px; min-width: min(500px, 70vw); font-size: 17px; }
.footer__nav { display: grid; align-content: start; margin-top: 32px; border-top: 1px solid var(--line-light); }
.footer__nav a { display: flex; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line-light); font-size: 20px; }
.footer__nav small { color: #777; font-size: 9px; }
.footer__bottom { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--line-light); padding-top: 16px; color: #777; font-size: 9px; text-transform: uppercase; }
.footer__bottom span:nth-child(2) { text-align: center; }
.footer__bottom a { justify-self: end; }
.footer__cross-one { left: 55%; bottom: 150px; }
.footer__cross-two { right: 8%; top: 38%; }

.parallax-layer { --parallax-y: 0px; will-change: transform; }
.parallax-layer:not(.mask-copy):not(.reveal-up):not(.reveal-media) { transform: translate3d(0, var(--parallax-y), 0); }
.mask-copy { clip-path: inset(0 0 100% 0); transform: translate3d(0, calc(45px + var(--parallax-y, 0px)), 0); transition: clip-path 1.15s var(--ease), transform 1.15s var(--ease); }
.mask-copy.is-visible { clip-path: inset(-.18em -.06em); transform: translate3d(0, var(--parallax-y, 0px), 0); }
.reveal-up { opacity: 0; transform: translate3d(var(--parallax-x, 0px), calc(32px + var(--parallax-y, 0px)), 0); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-up.is-visible { opacity: 1; transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0); }
.reveal-media { clip-path: inset(0 0 100% 0); transform: translate3d(0, var(--parallax-y, 0px), 0); transition: clip-path 1.2s var(--ease), transform .45s var(--ease); }
.reveal-media.is-visible { clip-path: inset(0); }

.hero__media-effect.liquid-ready { isolation: isolate; }
.liquid-canvas { position: absolute; z-index: 2; top: -10%; left: -10%; display: block; width: 120%; height: 120%; overflow: hidden; pointer-events: auto; filter: none; }
.magnetic { --mag-x: 0px; --mag-y: 0px; --mag-scale: 1; transform: translate3d(var(--mag-x), var(--mag-y), 0) scale(var(--mag-scale)); will-change: transform; }

@media (max-width: 900px) {
  :root { --pad: 18px; }
  .section-rail { grid-template-columns: 1fr 1fr; }
  .section-rail span:first-child { display: none; }
  .section-rail span:nth-child(2) { justify-self: start; }
  .hero { height: 145vh; }
  .hero__sticky { min-height: 560px; }
  .site-header { grid-template-columns: 1fr auto; padding-top: 18px; }
  .desktop-nav, .header-card { display: none; }
  .menu-toggle { position: relative; z-index: 40; display: grid; align-content: center; gap: 6px; width: 34px; height: 22px; padding: 0; border: 0; background: none; }
  .menu-toggle span { display: block; width: 100%; height: 1px; background: white; transition: transform .4s var(--ease); }
  .menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu { position: fixed; z-index: 25; inset: 0; display: grid; align-content: center; padding: 70px 24px 24px; background: #0a0a0a; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity .4s, visibility .4s, transform .5s var(--ease); }
  .menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu a { display: flex; justify-content: space-between; align-items: start; padding: 16px 0; border-bottom: 1px solid #333; font-size: 51px; letter-spacing: -.06em; opacity: 1; transition: opacity .3s; }
  .mobile-menu a.is-current { opacity: .48; pointer-events: none; cursor: default; }
  .mobile-menu small { font-size: 9px; color: #777; }
  .hero__media { inset: 0; width: 100%; height: 100%; }
  .hero__media-effect { overflow: hidden; }
  .hero__copy { top: 28%; font-size: 14px; }
  .hero__copy p { margin-bottom: 25px; }
  .hero__service, .hero__year, .hero__wordmark, .cross--one { display: none; }
  .cross--two { right: 9%; top: 58%; }
  .about { min-height: 0; margin-top: -45vh; padding: 55px 18px 70px; }
  .about__statement { width: 100%; text-align: left; font-size: clamp(44px, 12.5vw, 68px); line-height: .9; }
  .about__statement span:first-child, .about__statement span:last-child { transform: none; }
  .about__body { min-height: 0; margin-top: 100px; }
  .about__media { position: relative; top: auto; left: auto; width: 72vw; min-width: 0; aspect-ratio: .745; }
  .about__details { position: relative; top: auto; right: auto; left: auto; margin-top: 75px; }
  .about__row { grid-template-columns: 28% 1fr; min-height: 0; margin-bottom: 65px; font-size: 15px; }
  .about__row--results { margin-bottom: 0; }
  .about__results div { min-height: 52px; }
  .about__cta { width: 72%; margin: 70px 0 0 28%; font-size: 15px; }
  .client-ticker { width: calc(100% + 36px); margin: 105px 0 -35px -18px; }
  .client-ticker__group { gap: 8px; padding-right: 8px; }
  .client-card { width: 220px; height: 132px; }
  .portfolio { padding-bottom: 105px; }
  .portfolio__layout { display: block; padding: 64px 18px 0; }
  .portfolio__aside { position: relative; top: auto; }
  .portfolio__aside--left { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 0 65px; }
  .portfolio__aside--left h2 { margin: 0; font-size: clamp(54px, 16vw, 78px); }
  .portfolio__aside--left .line-link { min-width: 148px; width: 42%; }
  .portfolio__aside--right { display: none; }
  .project-stack { gap: 68px; }
  .project-card { --stack-top: 18px; }
  .project-card:nth-child(2) { --stack-top: 40px; }
  .project-card:nth-child(3) { --stack-top: 62px; }
  .project-card:nth-child(4) { --stack-top: 84px; }
  .project-card__visual { aspect-ratio: 16 / 9; }
  .project-card__meta { grid-template-columns: 18% 1fr auto; min-height: 78px; padding-top: 12px; }
  .project-card__meta p { gap: 3px; }
  .services { padding-bottom: 90px; }
  .services__lead { min-height: 980px; padding: 90px 18px 90px; }
  .services__lead h2 { width: 100%; font-size: clamp(52px, 15.2vw, 74px); line-height: .83; }
  .services__lead h2 span, .services__lead h2 span:nth-child(2), .services__lead h2 span:last-child { margin-left: 0; }
  .services__portrait { left: 18px; bottom: 115px; width: 130px; }
  .services__lead > .line-link { right: 18px; bottom: 130px; left: auto; min-width: 175px; }
  .services__cross--one { top: 58%; left: 70%; }
  .services__cross--two { display: none; }
  .service-row { grid-template-columns: 38% 1fr; grid-template-areas: "number media" "content content"; gap: 25px; min-height: 620px; padding: 55px 0; opacity: .38; }
  .service-row__number { grid-area: number; font-size: clamp(105px, 35vw, 160px); }
  .service-row__media { grid-area: media; }
  .service-row__content { grid-area: content; }
  .service-row__content h3 { margin: 28px 0 38px; font-size: clamp(57px, 15vw, 85px); }
  .engagement { min-height: 1500px; }
  .engagement__heading { grid-template-columns: 1fr; gap: 50px; margin: 70px 18px; }
  .engagement__heading h2 { font-size: clamp(70px, 20vw, 104px); }
  .engagement-cards { grid-template-columns: 1fr; }
  .engagement-card { min-height: 340px; }
  .engagement-card h3 { margin-top: 55px; }
  .testimonial { min-height: 1050px; }
  .testimonial__quote { width: 130%; margin-top: 75px; font-size: clamp(80px, 23vw, 130px); }
  .testimonial__visual { left: 18px; bottom: 290px; width: 46vw; min-width: 0; }
  .testimonial__credit { left: auto; right: 18px; bottom: 330px; width: 40vw; }
  .testimonial__stats { left: 18px; right: 18px; bottom: 60px; grid-template-columns: repeat(2, 1fr); }
  .archive { min-height: 920px; }
  .archive__head { display: block; margin: 65px 18px 55px; }
  .archive__head h2 { font-size: clamp(70px, 19vw, 102px); }
  .archive__head > span { display: block; margin-top: 35px; }
  .archive-row { grid-template-columns: 17% 1fr; min-height: 130px; }
  .archive-row small { grid-column: 2; }
  .archive-row strong { font-size: 35px; }
  .archive-thumb { display: none; }
  .insight { min-height: 600px; }
  .insight__link { width: 100%; font-size: clamp(59px, 16vw, 85px); }
  .insight__link > .circle-link { right: 0; bottom: -95px; }
  .footer { min-height: 930px; }
  .footer__main { grid-template-columns: 1fr; margin-top: 75px; }
  .footer__main h2 { font-size: clamp(75px, 21vw, 112px); }
  .footer__email { min-width: 100%; }
  .footer__nav { margin-top: 35px; }
  .footer__bottom { grid-template-columns: 1fr 1fr; gap: 8px; }
  .footer__bottom span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__media, .hero__wordmark, .parallax-layer { transform: none !important; }
  .client-ticker__track { animation: none !important; transform: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .liquid-canvas { display: none; }
}