:root {
  --background: #f5f3ef;
  --secondary: #eae7e1;
  --foreground: #0a0a0a;
  --muted: #8e8e8e;
  --border: #d8d4cd;
  --gutter: clamp(22px, 5.2vw, 84px);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { background: var(--background); scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Satoshi", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.78'/%3E%3C/svg%3E");
  transform: translateZ(0);
}
::selection { background: #111; color: #f5f3ef; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #555; outline-offset: 4px; }
img { display: block; }
.section-border { border-top: 1px solid var(--border); }
.section-gutter { padding-left: var(--gutter); padding-right: var(--gutter); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #60605c; font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #161616; display: inline-block; }

/* Navbar */
.nav-shell { position: fixed; z-index: 90; top: 0; left: 0; width: 100%; color: var(--foreground); border-bottom: 1px solid transparent; transition: background .45s ease, border-color .45s ease, backdrop-filter .45s ease; }
.nav-shell.is-scrolled { background: rgb(245 243 239 / 81%); border-color: rgb(10 10 10 / 9%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nav-inner { height: 82px; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; }
.wordmark { display: inline-flex; align-items: flex-start; width: max-content; font-size: 19px; font-weight: 800; letter-spacing: .2em; line-height: 1; }
.registered { margin: -2px 0 0 1px; font-size: 8px; letter-spacing: 0; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(23px, 3vw, 48px); }
.nav-link { position: relative; padding: 8px 0; color: #565550; font-size: 12px; transition: color .25s ease; }
.nav-link i { position: absolute; bottom: 1px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease-premium); }
.nav-link:hover { color: #080808; }
.nav-link:hover i { transform: scaleX(1); transform-origin: left center; }
.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.nav-cta { display: inline-flex; align-items: center; gap: 22px; padding: 12px 17px; border: 1px solid #c8c4bc; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color .25s ease, background .25s ease, border .25s ease; }
.nav-cta:hover { color: var(--background); background: var(--foreground); border-color: var(--foreground); }
.menu-toggle { width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 50%; display: none; align-items: center; justify-content: center; background: transparent; cursor: pointer; }
.mobile-menu { position: fixed; z-index: 85; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 108px var(--gutter) 28px; background: var(--background); }
.mobile-menu-top, .mobile-menu-bottom { display: flex; justify-content: space-between; color: #77746d; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.mobile-menu nav { margin: 32px 0; }
.mobile-menu nav > div { border-bottom: 1px solid var(--border); }
.mobile-menu nav a { display: flex; align-items: center; gap: 17px; padding: 14px 0 19px; font-size: clamp(28px, 7vw, 54px); font-weight: 500; letter-spacing: -.055em; }
.mobile-menu nav a svg { margin-left: auto; }
.mobile-link-no { align-self: flex-start; margin-top: 10px; color: var(--muted); font-size: 10px; letter-spacing: 0; }

/* Hero */
.hero-section { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 128px var(--gutter) 104px; isolation: isolate; background: #e9e6df; }
.hero-visual { position: absolute; z-index: -3; inset: -8% -2% -10%; overflow: hidden; background: radial-gradient(ellipse at 50% 44%, #fcfbf7 0%, #e8e4dc 29%, #d0cbc2 62%, #beb9b0 100%); will-change: transform; }
.hero-image-wash { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(120deg, rgb(245 243 239 / 88%), rgb(245 243 239 / 17%) 42%, rgb(10 10 10 / 16%)), url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=2200&q=85"); background-size: cover; background-position: center 54%; mix-blend-mode: luminosity; filter: grayscale(1) contrast(.78); }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(245 243 239 / 46%) 0%, rgb(245 243 239 / 10%) 36%, rgb(245 243 239 / 36%) 100%); }
.halftone-overlay { position: absolute; z-index: -2; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(circle, rgb(10 10 10 / 52%) .7px, transparent .9px); background-size: 5px 5px; mask-image: radial-gradient(ellipse at 50% 48%, #000 0%, transparent 76%); }
.hero-glow { position: absolute; width: 44vw; aspect-ratio: 1; border-radius: 50%; filter: blur(55px); mix-blend-mode: screen; opacity: .62; }
.hero-glow-one { top: 6%; left: 10%; background: radial-gradient(circle, rgb(255 255 255 / 70%), transparent 68%); animation: glow-drift 11s ease-in-out infinite alternate; }
.hero-glow-two { bottom: -18%; right: 8%; background: radial-gradient(circle, rgb(131 129 124 / 68%), transparent 66%); animation: glow-drift 14s ease-in-out infinite alternate-reverse; }
.hero-orbit { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); border: 1px solid rgb(20 20 20 / 17%); border-radius: 50%; }
.orbit-a { width: clamp(390px, 58vw, 820px); aspect-ratio: 1; animation: orbit-turn 90s linear infinite; }
.orbit-b { width: clamp(300px, 43vw, 610px); aspect-ratio: 1; border-style: dashed; border-color: rgb(20 20 20 / 15%); animation: orbit-turn 72s linear infinite reverse; }
.orbit-c { width: clamp(200px, 28vw, 400px); aspect-ratio: 1; border-color: rgb(255 255 255 / 65%); box-shadow: 0 0 60px rgb(255 255 255 / 45%), inset 0 0 60px rgb(255 255 255 / 20%); }
.hero-center-disc { position: absolute; top: 48%; left: 50%; width: clamp(112px, 15vw, 205px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 32% 25%, #fff 0%, #e2dfd8 23%, #aaa69e 48%, #e9e6df 69%, #fff 100%); box-shadow: inset -18px -20px 36px rgb(20 20 20 / 13%), 0 28px 90px rgb(20 20 20 / 14%); animation: disc-float 8s ease-in-out infinite; }
.hero-center-disc span { font-size: clamp(28px, 4vw, 50px); font-weight: 800; letter-spacing: -.12em; opacity: .76; }
.hero-center-disc i { position: absolute; right: 21%; top: 25%; width: 8px; height: 8px; border-radius: 50%; background: #111; box-shadow: 0 0 15px #fff; }
.hero-copy { position: relative; z-index: 2; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-eyebrow { margin-bottom: clamp(30px, 4vw, 55px); color: #3e3c38; }
.eyebrow-rule { width: 32px; height: 1px; margin: 0 2px; background: currentColor; opacity: .55; }
.hero-title { width: 100%; margin: 0; font-size: clamp(56px, 10.1vw, 158px); font-weight: 500; line-height: .95; letter-spacing: -.085em; white-space: nowrap; }
.hero-type-line { display: inline-block; }
.typing-cursor { display: inline-block; width: .065em; height: .76em; margin-left: .055em; vertical-align: -.015em; background: currentColor; animation: cursor-blink .84s steps(2, start) infinite; }
.hero-description { max-width: 440px; margin: 32px auto 0; color: #51504c; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-size: 11px; font-weight: 600; transition: transform .35s var(--ease-premium), background .25s ease, color .25s ease; }
.button-dark { color: #f7f5f0; background: #0a0a0a; }
.button-dark:hover { background: #343430; transform: translateY(-2px); }
.text-link { display: inline-flex; align-items: center; gap: 13px; color: #35342f; font-size: 11px; }
.text-link > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgb(10 10 10 / 30%); border-radius: 50%; transition: transform .35s var(--ease-premium), background .25s; }
.text-link:hover > span { transform: translateY(3px); background: rgb(255 255 255 / 42%); }
.hero-bottomline { position: absolute; z-index: 3; bottom: 28px; left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #57554f; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.scroll-indicator { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgb(10 10 10 / 25%); border-radius: 50%; }
.hero-coordinate { text-align: right; }

/* Trusted brands */
.trusted-section { padding-top: 24px; padding-bottom: 27px; background: var(--background); }
.trusted-top, .trusted-bottom { display: flex; align-items: center; justify-content: space-between; }
.trusted-top p { margin: 0; color: #858178; font-size: 11px; }
.marquee-window { position: relative; overflow: hidden; margin: 29px calc(var(--gutter) * -1) 23px; }
.marquee-window::before, .marquee-window::after { position: absolute; z-index: 2; top: 0; bottom: 0; width: 11%; content: ""; pointer-events: none; }
.marquee-window::before { left: 0; background: linear-gradient(90deg, var(--background), transparent); }
.marquee-window::after { right: 0; background: linear-gradient(270deg, var(--background), transparent); }
.brand-marquee { display: flex; align-items: center; width: max-content; animation: marquee-left 42s linear infinite; }
.marquee-window:hover .brand-marquee { animation-play-state: paused; }
.brand-item { display: flex; align-items: center; gap: 11px; min-width: clamp(180px, 19vw, 270px); justify-content: center; color: #65635e; opacity: .48; filter: grayscale(1); transition: opacity .3s ease, color .3s ease, filter .3s ease; }
.brand-item:hover { color: #090909; opacity: 1; filter: grayscale(0); }
.brand-item span { font-size: 12px; font-weight: 700; letter-spacing: .13em; }
.trusted-bottom { color: #8d8981; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

/* Shared section heads */
.section-heading-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.section-heading-note { margin: 0; color: #77736d; font-size: 12px; line-height: 1.65; text-align: right; }
.section-display { margin: 0; font-size: clamp(54px, 8.8vw, 126px); font-weight: 500; line-height: .86; letter-spacing: -.085em; }
.section-display span { color: #949087; }

/* Expertise */
.services-section { padding-top: clamp(76px, 10vw, 142px); padding-bottom: clamp(78px, 10vw, 140px); }
.services-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 7vw, 110px); margin-top: clamp(52px, 9vw, 118px); }
.services-list { align-self: start; }
.service-row { display: grid; width: 100%; grid-template-columns: 35px 1fr 22px; align-items: start; gap: 10px; padding: 25px 0 27px; border: 0; border-top: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; transition: border-color .35s ease; }
.service-row:last-of-type { border-bottom: 1px solid var(--border); }
.service-number { padding-top: 5px; color: #929087; font-size: 10px; letter-spacing: .05em; }
.service-title-wrap { display: flex; flex-direction: column; gap: 7px; }
.service-title { font-size: clamp(20px, 2.35vw, 31px); font-weight: 500; letter-spacing: -.055em; transition: transform .4s var(--ease-premium), color .3s; }
.service-kicker { color: #99958d; font-size: 11px; transition: color .3s ease; }
.service-plus { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #cfcac1; border-radius: 50%; color: #706d66; transition: transform .4s var(--ease-premium), color .3s, background .3s; }
.service-row.is-active .service-title, .service-row:hover .service-title { transform: translateX(5px); color: #0a0a0a; }
.service-row.is-active .service-kicker { color: #4f4d48; }
.service-row.is-active .service-plus { color: #f5f3ef; background: #0a0a0a; border-color: #0a0a0a; transform: rotate(45deg); }
.all-services-link { display: inline-flex; align-items: center; gap: 22px; margin-top: 30px; color: #6e6a63; font-size: 11px; }
.all-services-link svg { transition: transform .3s ease; }
.all-services-link:hover svg { transform: translate(3px, -3px); }
.service-media-column { min-width: 0; }
.service-media-sticky { position: sticky; top: 110px; }
.service-media-card { position: relative; min-height: 410px; height: min(44vw, 565px); overflow: hidden; background: #d7d4ce; }
.service-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.91); transition: transform 1.1s var(--ease-premium); }
.service-media-card:hover .service-image { transform: scale(1.04); }
.service-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 10 10 / 22%), transparent 32%, transparent 62%, rgb(10 10 10 / 42%)); }
.service-media-label { position: absolute; top: 21px; left: 23px; right: 23px; display: flex; justify-content: space-between; color: white; font-size: 8px; letter-spacing: .16em; }
.service-image-bottom { position: absolute; right: 22px; bottom: 21px; left: 22px; display: flex; align-items: center; justify-content: space-between; color: white; font-size: 11px; }
.service-image-bottom > span:last-child { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid rgb(255 255 255 / 58%); border-radius: 50%; }
.service-detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 25px; padding-top: 20px; animation: detail-in .5s var(--ease-premium) both; }
.service-detail p { max-width: 390px; margin: 0; color: #6f6b64; font-size: 12px; line-height: 1.65; }
.service-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.service-tags span { color: #78746d; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

/* Selected work */
.work-section { padding-top: clamp(80px, 10vw, 150px); padding-bottom: 0; background: #eae7e1; }
.work-heading { align-items: flex-start; }
.work-heading > div { display: flex; flex: 1; justify-content: space-between; align-items: flex-end; gap: 24px; }
.work-heading .section-heading-note { padding-bottom: 4px; }
.work-stack { position: relative; margin-top: clamp(50px, 8vw, 108px); padding-bottom: 12vh; }
.work-card-wrap { position: sticky; top: 82px; height: min(79vh, 800px); min-height: 530px; margin-bottom: 7vh; perspective: 1400px; transform-origin: center top; }
.work-card { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: 2px; background: #b9b6b0; transform-origin: center top; will-change: transform; }
.work-card-image { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; filter: grayscale(1); transition: transform 1.2s var(--ease-premium); }
.work-card-wrap:hover .work-card-image { transform: scale(1.03); }
.work-card-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 60%), rgb(0 0 0 / 10%) 70%), linear-gradient(0deg, rgb(0 0 0 / 40%), transparent 42%); }
.work-card-light .work-card-shade { background: linear-gradient(90deg, rgb(10 10 10 / 48%), rgb(10 10 10 / 6%) 80%), linear-gradient(0deg, rgb(0 0 0 / 35%), transparent 45%); }
.work-card-top, .work-card-bottom { position: absolute; right: clamp(20px, 3.1vw, 46px); left: clamp(20px, 3.1vw, 46px); display: flex; justify-content: space-between; align-items: center; color: rgb(255 255 255 / 78%); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.work-card-top { top: clamp(20px, 3vw, 43px); }
.work-card-bottom { bottom: clamp(20px, 3vw, 43px); }
.work-card-content { position: absolute; top: 50%; left: clamp(25px, 7.3vw, 115px); transform: translateY(-43%); color: #fff; }
.work-card-kicker { margin: 0 0 18px; color: rgb(255 255 255 / 74%); font-size: 11px; letter-spacing: .08em; }
.work-card-content h3 { max-width: 900px; margin: 0; font-size: clamp(59px, 12vw, 180px); font-weight: 500; line-height: .81; letter-spacing: -.105em; }
.case-link { display: inline-flex; align-items: center; gap: 24px; margin-top: 34px; padding: 0; border: 0; background: transparent; color: white; font-size: 11px; cursor: pointer; }
.case-link span { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; transition: transform .35s var(--ease-premium), color .2s, background .2s; }
.case-link:hover span { color: #0a0a0a; background: white; transform: rotate(45deg); }
.work-endline { display: flex; justify-content: space-between; align-items: center; padding: 23px 0 32px; border-top: 1px solid #d4d0c8; color: #77736b; font-size: 9px; letter-spacing: .13em; }
.work-endline a { display: inline-flex; align-items: center; gap: 12px; color: #1e1d1a; font-size: 11px; letter-spacing: 0; }
.work-endline a svg { transition: transform .3s; }
.work-endline a:hover svg { transform: translate(3px, -3px); }
.case-modal-backdrop { position: fixed; z-index: 200; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgb(10 10 10 / 60%); backdrop-filter: blur(6px); }
.case-modal { width: 100%; max-height: 94svh; overflow: auto; padding: 25px var(--gutter) 65px; background: var(--background); border-radius: 9px 9px 0 0; }
.case-modal-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid var(--border); color: #77736c; font-size: 9px; letter-spacing: .15em; }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: transparent; cursor: pointer; }
.case-modal-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9vw; padding: 55px 0 48px; }
.case-modal-grid h2 { margin: 21px 0 0; font-size: clamp(54px, 9vw, 110px); line-height: .85; letter-spacing: -.08em; font-weight: 500; }
.case-modal-tagline { margin-top: 24px; color: #7d7972; font-size: 16px; }
.case-modal-copy { align-self: end; }
.case-modal-copy > p { margin: 0; color: #56534d; font-size: 14px; line-height: 1.75; }
.case-outcome { margin: 32px 0; padding-top: 18px; border-top: 1px solid var(--border); }
.case-outcome span { color: #77736d; font-size: 9px; letter-spacing: .16em; }
.case-outcome p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; }
.case-modal-image { position: relative; height: min(46vw, 470px); min-height: 230px; overflow: hidden; }

/* About */
.about-section { padding-top: clamp(78px, 10vw, 150px); padding-bottom: 0; overflow: hidden; }
.about-side-note { color: #7b776f; font-size: 11px; line-height: 1.6; text-align: right; }
.manifesto { max-width: 1370px; margin: clamp(70px, 11vw, 160px) 0 clamp(48px, 7vw, 100px); font-size: clamp(36px, 6.25vw, 88px); font-weight: 500; line-height: 1.09; letter-spacing: -.073em; }
.manifesto .word { will-change: opacity; }
.about-signoff { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding-bottom: clamp(60px, 9vw, 120px); }
.about-asterisk { font-size: 48px; line-height: .8; }
.about-signoff p { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -.04em; }
.about-signoff-mark { justify-self: end; color: #8d8981; font-size: 9px; letter-spacing: .15em; }
.values-marquee-window { margin: 0 calc(var(--gutter) * -1); padding: 28px 0 31px; overflow: hidden; border-top: 1px solid var(--border); }
.values-marquee { display: flex; align-items: center; width: max-content; animation: marquee-left 36s linear infinite; }
.values-marquee-window:hover .values-marquee { animation-play-state: paused; }
.value-item { display: flex; align-items: center; gap: 34px; padding: 0 27px; font-size: clamp(25px, 4vw, 52px); font-weight: 500; letter-spacing: -.055em; white-space: nowrap; }
.value-item i { font-size: .52em; font-style: normal; }

/* Insights */
.insights-section { position: relative; padding-top: clamp(75px, 10vw, 140px); padding-bottom: clamp(68px, 8vw, 110px); }
.insight-display { font-size: clamp(53px, 8vw, 110px); }
.insights-table { margin-top: clamp(60px, 8vw, 105px); border-top: 1px solid var(--border); }
.insight-row { position: relative; display: grid; grid-template-columns: 38px 1.15fr 3fr .55fr 25px; align-items: center; gap: 15px; min-height: 94px; border-bottom: 1px solid var(--border); transition: padding .45s var(--ease-premium), background .3s; }
.insight-row:hover { padding-left: 9px; padding-right: 9px; }
.insight-number, .insight-category, .insight-date { color: #827e76; font-size: 9px; letter-spacing: .12em; }
.insight-title { font-size: clamp(16px, 2.05vw, 25px); font-weight: 500; letter-spacing: -.045em; transition: transform .4s var(--ease-premium); }
.insight-row:hover .insight-title { transform: translateX(2px); }
.insight-date { text-align: right; }
.insight-arrow { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid transparent; border-radius: 50%; transition: transform .35s var(--ease-premium), border-color .25s; }
.insight-row:hover .insight-arrow { transform: translate(2px, -2px); border-color: #aaa69d; }
.insights-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; color: #88847d; font-size: 9px; letter-spacing: .13em; }
.insights-foot a { display: inline-flex; align-items: center; gap: 10px; color: #34322e; font-size: 11px; letter-spacing: 0; }
.cursor-image-reveal { position: fixed; z-index: 150; top: 0; left: 0; width: 245px; pointer-events: none; transform: translate3d(0, 0, 0); }
.cursor-image-frame { position: relative; width: 245px; height: 170px; overflow: hidden; background: #d6d3cd; }
.cursor-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.cursor-image-reveal > span { display: block; margin-top: 8px; color: #44423e; font-size: 8px; letter-spacing: .17em; }

/* Contact + footer */
.contact-section { position: relative; overflow: hidden; color: #f5f3ef; background: #0b0b0a; isolation: isolate; }
.contact-glow { position: absolute; z-index: -1; width: 54vw; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .26; animation: glow-drift 13s ease-in-out infinite alternate; }
.contact-glow-a { top: -45%; left: -10%; background: radial-gradient(circle, #a9a69c, transparent 63%); }
.contact-glow-b { right: -5%; bottom: -65%; background: radial-gradient(circle, #595750, transparent 64%); animation-delay: -6s; }
.contact-inner { padding-top: clamp(68px, 8.4vw, 120px); padding-bottom: 25px; }
.contact-overline { display: flex; align-items: center; justify-content: space-between; color: #8c8981; }
.contact-overline .eyebrow { color: #a7a39b; }
.contact-overline > span:last-child { font-size: 9px; letter-spacing: .14em; }
.contact-inner h2 { margin: clamp(60px, 8vw, 112px) 0 clamp(55px, 8vw, 112px); font-size: clamp(65px, 13vw, 190px); line-height: .82; letter-spacing: -.095em; font-weight: 500; text-align: center; }
.contact-inner h2 span { color: #8e8c85; }
.contact-bottom { display: flex; justify-content: space-between; align-items: center; padding-bottom: clamp(70px, 9vw, 130px); }
.contact-bottom p { margin: 0; color: #aaa69e; font-size: 13px; line-height: 1.55; }
.contact-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 45px; min-width: 205px; padding: 17px 19px 17px 22px; border: 1px solid rgb(245 243 239 / 45%); border-radius: 999px; font-size: 11px; transition: color .3s, background .3s; will-change: transform; }
.contact-button:hover { color: #0b0b0a; background: #f5f3ef; }
.contact-button svg { transition: transform .3s var(--ease-premium); }
.contact-button:hover svg { transform: translate(3px, -3px); }
.contact-index { display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgb(245 243 239 / 18%); color: #737169; font-size: 8px; letter-spacing: .15em; }
.footer-section { padding-top: 58px; padding-bottom: 25px; background: #0b0b0a; color: #f5f3ef; border-color: rgb(245 243 239 / 18%); }
.footer-main { display: grid; grid-template-columns: 1.45fr .8fr .8fr 1fr; gap: 5vw; padding-bottom: 75px; }
.footer-wordmark { display: inline-flex; align-items: flex-start; font-size: 24px; font-weight: 800; letter-spacing: .18em; }
.footer-wordmark span { margin: -2px 0 0 1px; font-size: 9px; }
.footer-brand-col > p { margin: 17px 0 25px; color: #97938b; font-size: 12px; line-height: 1.55; }
.footer-email { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; }
.footer-email svg { transition: transform .3s; }
.footer-email:hover svg { transform: translate(3px, -3px); }
.footer-directory, .footer-note { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.footer-label { margin-bottom: 8px; color: #79766e; font-size: 8px; letter-spacing: .17em; }
.footer-directory a { display: inline-flex; align-items: center; gap: 6px; color: #c5c1b8; font-size: 11px; transition: color .25s; }
.footer-directory a:hover { color: #fff; }
.footer-directory a svg { opacity: 0; transition: opacity .25s, transform .25s; }
.footer-directory a:hover svg { opacity: 1; transform: translate(2px, -2px); }
.footer-note p { margin: 0; color: #c5c1b8; font-size: 12px; line-height: 1.6; }
.footer-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 7px; color: #aaa69e; font-size: 9px; }
.footer-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #bcb9ae; box-shadow: 0 0 0 3px rgb(188 185 174 / 12%); }
.footer-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding-top: 18px; border-top: 1px solid rgb(245 243 239 / 18%); color: #77746c; font-size: 8px; letter-spacing: .14em; }
.footer-bottom span:nth-child(2) { text-align: center; }
.footer-bottom a { justify-self: end; transition: color .25s; }
.footer-bottom a:hover { color: #fff; }

/* Motion */
@keyframes cursor-blink { to { visibility: hidden; } }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes orbit-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes disc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -13px; } }
@keyframes glow-drift { from { transform: translate3d(-2%, -3%, 0) scale(.94); } to { transform: translate3d(5%, 4%, 0) scale(1.08); } }
@keyframes detail-in { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 1080px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .nav-actions { grid-column: 2; }
  .menu-toggle { display: inline-flex; }
  .hero-title { font-size: clamp(52px, 10vw, 108px); }
  .services-grid { gap: 35px; }
  .service-media-card { min-height: 360px; }
  .work-card-wrap { top: 75px; }
  .footer-main { grid-template-columns: 1.2fr .8fr .8fr; }
  .footer-note { grid-column: 1 / -1; padding-top: 5px; }
  .footer-note p br { display: none; }
}
@media (max-width: 760px) {
  :root { --gutter: 22px; }
  .nav-inner { height: 70px; }
  .wordmark { font-size: 17px; }
  .nav-cta { padding: 10px 12px; gap: 12px; font-size: 9px; }
  .menu-toggle { width: 39px; height: 39px; }
  .nav-actions { gap: 9px; }
  .hero-section { min-height: 93svh; padding-top: 112px; padding-bottom: 90px; }
  .hero-image-wash { background-position: 52% center; opacity: .37; }
  .hero-eyebrow { max-width: 300px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; gap: 7px; font-size: 8px; }
  .eyebrow-rule { width: 18px; }
  .hero-title { font-size: clamp(39px, 9.3vw, 70px); letter-spacing: -.075em; }
  .hero-description { max-width: 330px; margin-top: 24px; font-size: 13px; }
  .hero-actions { flex-direction: column; gap: 16px; margin-top: 25px; }
  .hero-bottomline { bottom: 18px; grid-template-columns: 1fr auto 1fr; font-size: 7px; letter-spacing: .1em; }
  .hero-coordinate { max-width: 130px; font-size: 6px; line-height: 1.5; }
  .orbit-a { width: 108vw; }
  .orbit-b { width: 82vw; }
  .orbit-c { width: 58vw; }
  .hero-center-disc { width: 30vw; }
  .hero-center-disc span { font-size: 9vw; }
  .trusted-top p { font-size: 10px; }
  .trusted-top .eyebrow { font-size: 8px; }
  .trusted-section { padding-top: 20px; padding-bottom: 21px; }
  .brand-item { min-width: 165px; }
  .brand-item span { font-size: 10px; }
  .section-heading-row { gap: 22px; }
  .section-heading-note { font-size: 10px; }
  .section-display { font-size: clamp(46px, 11vw, 75px); }
  .services-section, .work-section, .about-section, .insights-section { padding-top: 78px; }
  .services-grid { grid-template-columns: 1fr; gap: 42px; margin-top: 53px; }
  .service-row { padding: 21px 0 22px; grid-template-columns: 29px 1fr 22px; }
  .service-title { font-size: 24px; }
  .service-kicker { font-size: 10px; }
  .service-media-sticky { position: relative; top: auto; }
  .service-media-card { height: 72vw; min-height: 275px; max-height: 410px; }
  .service-detail { grid-template-columns: 1fr .75fr; gap: 18px; }
  .service-detail p { font-size: 11px; }
  .service-tags span { font-size: 8px; }
  .work-heading { flex-direction: column; }
  .work-heading > div { width: 100%; align-items: flex-end; }
  .work-heading .section-heading-note { max-width: 160px; }
  .work-stack { margin-top: 46px; padding-bottom: 5vh; }
  .work-card-wrap { top: 70px; height: 70svh; min-height: 470px; margin-bottom: 6vh; }
  .work-card-content { left: 25px; right: 18px; }
  .work-card-content h3 { font-size: clamp(54px, 12vw, 96px); }
  .work-card-kicker { font-size: 10px; }
  .case-link { margin-top: 27px; }
  .work-card-top, .work-card-bottom { font-size: 7px; letter-spacing: .1em; }
  .work-card-top span:last-child { max-width: 45%; text-align: right; }
  .work-endline { gap: 16px; font-size: 7px; }
  .work-endline a { font-size: 10px; white-space: nowrap; }
  .case-modal { max-height: 96svh; padding-top: 17px; }
  .case-modal-grid { grid-template-columns: 1fr; gap: 28px; padding: 37px 0 30px; }
  .case-modal-grid h2 { font-size: clamp(48px, 13vw, 83px); }
  .case-modal-copy > p { font-size: 12px; }
  .case-modal-image { height: 58vw; min-height: 200px; }
  .about-side-note { font-size: 10px; }
  .manifesto { margin: 65px 0 55px; font-size: clamp(35px, 8.2vw, 60px); line-height: 1.08; }
  .about-signoff { padding-bottom: 70px; }
  .about-asterisk { font-size: 37px; }
  .about-signoff p { font-size: 14px; }
  .values-marquee-window { padding: 22px 0 23px; }
  .value-item { padding: 0 18px; gap: 20px; font-size: clamp(22px, 6vw, 38px); }
  .insights-section .section-heading-row { flex-direction: column; }
  .insights-section .section-heading-row > div { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
  .insight-display { font-size: clamp(47px, 11vw, 71px); }
  .insights-table { margin-top: 47px; }
  .insight-row { grid-template-columns: 24px 1fr 23px; gap: 8px; min-height: 90px; padding: 13px 0; }
  .insight-category { display: none; }
  .insight-title { font-size: 17px; line-height: 1.15; }
  .insight-date { grid-column: 2; text-align: left; margin-top: -14px; font-size: 8px; }
  .insight-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .cursor-image-reveal { display: none; }
  .insights-foot { align-items: flex-start; gap: 22px; font-size: 7px; }
  .insights-foot a { max-width: 145px; font-size: 10px; }
  .contact-inner { padding-top: 70px; }
  .contact-overline > span:last-child { max-width: 100px; text-align: right; font-size: 7px; line-height: 1.5; }
  .contact-inner h2 { margin: 87px 0 64px; font-size: clamp(60px, 15vw, 100px); }
  .contact-bottom { gap: 18px; padding-bottom: 78px; }
  .contact-bottom p { font-size: 11px; }
  .contact-button { min-width: 176px; gap: 23px; padding: 15px 14px 15px 17px; font-size: 10px; }
  .contact-index { gap: 20px; font-size: 7px; letter-spacing: .08em; line-height: 1.5; }
  .contact-index span:last-child { text-align: right; }
  .footer-section { padding-top: 44px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 43px 20px; padding-bottom: 55px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-directory { gap: 12px; }
  .footer-note { grid-column: 1 / -1; }
  .footer-bottom { grid-template-columns: 1fr auto; row-gap: 14px; font-size: 7px; }
  .footer-bottom span:nth-child(2) { display: none; }
  .footer-bottom a { grid-column: 2; grid-row: 1; }
}
@media (max-width: 380px) {
  .hero-title { font-size: 37px; }
  .hero-coordinate { display: none; }
  .hero-bottomline { grid-template-columns: 1fr auto; }
  .hero-actions .text-link { font-size: 10px; }
  .work-card-content h3 { font-size: 49px; }
  .contact-inner h2 { font-size: 57px; }
  .contact-button { min-width: 160px; gap: 15px; }
}
@media (pointer: coarse) {
  .cursor-image-reveal { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}