/* Anna Honcharuk — "Main Character"
   Everything is drawn on a 1440 artboard: 1u = 1px at 1440 wide (capped at 1.333px).
   Phones (≤760px) use a 390 artboard. */

:root {
  --u: min(calc(100vw / 1440), 1.333px);
  --paper: #f3eee7;
  --stone: #ddd5ca;
  --sand: #e9e2d8;
  --ink: #141210;
  --ink-2: #1d1a17;
  --mute: #7c736a;
  --mute-dark: #8f867c;
  --powder: #a9bcd9;
  --line: rgba(20, 18, 16, .14);
  --line-dark: rgba(243, 238, 231, .16);
  --display: "Oswald", "Arial Narrow", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: calc(57 * var(--u));
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
@media (max-width: 760px) {
  :root { --u: calc(100vw / 390); --gutter: calc(18 * var(--u)); }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(90 * var(--u)); }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: max(15px, calc(16 * var(--u))); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--powder); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.muted { color: var(--mute); }
.dark .muted { color: var(--mute-dark); }

/* ---------- type ---------- */
.display {
  font-family: var(--display); font-weight: 500;
  font-size: calc(124 * var(--u)); line-height: .9; letter-spacing: -.01em; text-transform: uppercase;
}
.display em, .ct-title em, .hero-line em, .mf-text .w-em {
  font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em;
}
.display em { font-size: 1.04em; }
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: max(11px, calc(13 * var(--u))); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--powder); flex: none; }
.line { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.line > span { display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: calc(48 * var(--u)); min-height: 42px; padding: 0 calc(22 * var(--u));
  border-radius: 999px; font-size: max(14px, calc(15 * var(--u))); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
.btn .ico { width: 14px; height: 14px; transition: transform .3s var(--ease); }
@media (hover: hover) { .btn:hover .ico { transform: rotate(45deg); } }
.btn-light { background: var(--paper); color: var(--ink); }
@media (hover: hover) { .btn-light:hover { background: #fff; } }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-ghost { border: 1px solid currentColor; color: inherit; }
@media (hover: hover) { .btn-ghost:hover { background: rgba(243, 238, 231, .1); } }
.btn-lg { height: calc(60 * var(--u)); min-height: 50px; padding: 0 calc(30 * var(--u)); font-size: max(15px, calc(17 * var(--u))); }
.ico { width: 1em; height: 1em; flex: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(30 * var(--u)) var(--gutter);
  color: var(--paper);
  transition: transform .45s var(--ease), color .3s, background-color .3s;
}
.nav.scrolled { background: rgba(20, 18, 16, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.scrolled.on-light { background: rgba(243, 238, 231, .78); }
.menu-open .nav.scrolled { background: transparent; backdrop-filter: none; }
.nav.on-light { color: var(--ink); }
.nav.hide { transform: translateY(-110%); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; font-size: max(14px, calc(15 * var(--u))); letter-spacing: -.01em; justify-self: start; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid currentColor; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1; letter-spacing: -.02em; white-space: nowrap;
}
.brand-mark i { font-style: italic; }
.pill {
  position: relative; display: flex; align-items: center; gap: 2px; padding: 4px;
  height: 48px; border-radius: 999px;
  background: rgba(243, 238, 231, .14); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(243, 238, 231, .18);
}
.nav.on-light .pill { background: rgba(255, 255, 255, .6); border-color: var(--line); }
.pill a { position: relative; z-index: 1; padding: 0 16px; line-height: 40px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; transition: color .3s; }
.pill-bg { position: absolute; z-index: 0; top: 4px; height: 40px; left: 0; width: 0; border-radius: 999px; background: var(--paper); opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; }
.nav.on-light .pill-bg { background: var(--ink); }
.pill a.is-hot { color: var(--ink); }
.nav.on-light .pill a.is-hot { color: var(--paper); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.lang { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-decoration: none; padding: 8px 6px; opacity: .8; }
.lang:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.nav-cta { height: 44px; }
.nav.on-light .nav-cta { background: var(--ink); color: var(--paper); }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; position: relative; }
.menu-btn i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.menu-btn i:first-of-type { top: 18px; } .menu-btn i:last-of-type { top: 24px; }
.menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-3px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 35; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: min(calc(110 * var(--u)), max(88px, 15svh)) var(--gutter) calc(30 * var(--u) + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex; align-items: baseline; gap: 14px; text-decoration: none;
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: min(calc(64 * var(--u)), 7.6svh); line-height: 1; letter-spacing: -.03em; padding: min(10px, 1.2svh) 0; border-bottom: 1px solid var(--line-dark);
}
.menu nav a small { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--mute-dark); }
.menu-foot { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.menu-foot a { text-decoration: none; color: var(--mute-dark); }

/* ---------- hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: calc(760 * var(--u)); max-height: 1100px;
  background: #0e0d0c; color: var(--paper); overflow: hidden; isolation: isolate;
  touch-action: pan-y;
}
.hero-media { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero-media img, .hero-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.hero-color { opacity: 0; pointer-events: none; }
.hero-media canvas { opacity: 0; transition: opacity .6s; }
.hero-media canvas.ready { opacity: 1; }
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 9, 8, .78) 0%, rgba(10, 9, 8, .35) 34%, rgba(10, 9, 8, 0) 58%),
    linear-gradient(0deg, rgba(10, 9, 8, .62) 0%, rgba(10, 9, 8, 0) 42%),
    linear-gradient(180deg, rgba(10, 9, 8, .45) 0%, rgba(10, 9, 8, 0) 22%);
}
.hero-inner {
  position: absolute; z-index: 2; left: var(--gutter); bottom: calc(64 * var(--u)); right: var(--gutter);
  pointer-events: none;
}
.hero-inner a { pointer-events: auto; }
.kicker { display: flex; align-items: center; gap: 10px; font-size: max(12px, calc(14 * var(--u))); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-bottom: calc(22 * var(--u)); }
.hero-title {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: calc(212 * var(--u)); line-height: .86; letter-spacing: -.012em; margin-left: -.02em;
}
.hero-line { font-size: max(18px, calc(26 * var(--u))); line-height: 1.25; letter-spacing: -.015em; margin-top: calc(28 * var(--u)); max-width: calc(520 * var(--u)); }
.hero-line em { font-size: 1.18em; }
.hero-ctas { display: flex; gap: 12px; margin-top: calc(30 * var(--u)); flex-wrap: wrap; }
.hero-hint {
  position: absolute; z-index: 2; right: var(--gutter); bottom: calc(64 * var(--u));
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(243, 238, 231, .78);
  pointer-events: none;
}
.hero-hint i { width: 8px; height: 8px; border-radius: 50%; background: var(--powder); }
.hero-hint [data-touch] { display: none; }
.touch .hero-hint [data-touch] { display: inline; }
.touch .hero-hint [data-mouse] { display: none; }
.hero-hint.gone { opacity: 0; transition: opacity .8s; }

/* bar under the hero */
.bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: calc(96 * var(--u)); min-height: 64px; padding: 0 var(--gutter);
  background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--line-dark);
  font-family: var(--display); font-weight: 560; font-size: max(12px, calc(14 * var(--u))); letter-spacing: .1em; text-transform: uppercase;
}
.bar > span:last-child { justify-self: end; color: var(--mute-dark); }
.bar-scroll { display: inline-flex; align-items: center; gap: 12px; }
.bar-scroll b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.bar-scroll svg { width: 14px; height: 14px; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }

/* ---------- shared section ---------- */
section { position: relative; }
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
.dark { background: var(--ink); color: var(--paper); }
.sec-head { display: grid; gap: calc(26 * var(--u)); margin-bottom: calc(64 * var(--u)); }
.sec-intro { max-width: calc(440 * var(--u)); color: var(--mute); }
.dark .sec-intro { color: var(--mute-dark); }

/* ---------- manifesto ---------- */
.manifesto { padding: calc(170 * var(--u)) var(--gutter) calc(150 * var(--u)); text-align: center; }
.manifesto .label { margin-bottom: calc(48 * var(--u)); }
.mf-text {
  max-width: calc(1080 * var(--u)); margin: 0 auto;
  font-size: calc(60 * var(--u)); line-height: 1.16; font-weight: 500; letter-spacing: -.035em;
}
.mf-text .w { color: rgb(var(--wc, 185 175 164)); transition: color .25s linear; }
.mf-text .w-em { font-size: 1.16em; line-height: 1; }
.mf-foot {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(80 * var(--u)); align-items: end;
  max-width: calc(1180 * var(--u)); margin: calc(140 * var(--u)) auto 0; text-align: left;
  padding-top: calc(40 * var(--u)); border-top: 1px solid var(--line);
}
.mf-sub { font-size: max(16px, calc(19 * var(--u))); line-height: 1.5; color: #3b3530; max-width: calc(520 * var(--u)); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
.stats dt { font-family: var(--display); font-weight: 500; font-size: calc(96 * var(--u)); line-height: .9; letter-spacing: -.04em; }
.stats dd { font-size: max(12px, calc(13 * var(--u))); color: var(--mute); margin-top: 10px; line-height: 1.35; }

/* ---------- about ---------- */
.about {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(96 * var(--u)); align-items: center;
  padding: calc(60 * var(--u)) var(--gutter) calc(170 * var(--u));
}
.about-media { position: relative; padding-bottom: calc(120 * var(--u)); }
.about-main { width: 82%; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.about-main img, .about-small img, .off figure img { width: 100%; height: 100%; object-fit: cover; }
.about-main img { object-position: 30% 30%; }
.about-small {
  position: absolute; right: 0; bottom: 0; width: 40%; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden;
  outline: calc(10 * var(--u)) solid var(--paper);
}
.hey { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(150 * var(--u)); line-height: .9; letter-spacing: -.03em; margin: calc(26 * var(--u)) 0 calc(30 * var(--u)) -.04em; }
.about-copy > p:not(.label) { max-width: calc(520 * var(--u)); margin-bottom: 1em; font-size: max(16px, calc(18 * var(--u))); }
.about-copy > p.about-lead { font-size: max(21px, calc(30 * var(--u))); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.about-copy > p.muted { font-size: max(15px, calc(16 * var(--u))); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: calc(30 * var(--u)); }
.tags li { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; }

/* image unclip on scroll */
.reveal-img { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease); }
.reveal-img img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.reveal-img.in { clip-path: inset(0 0 0 0); }
.reveal-img.in img { transform: scale(1); }

/* ---------- services ---------- */
.services { padding: calc(150 * var(--u)) var(--gutter) calc(130 * var(--u)); }
.services .sec-head { grid-template-columns: 1fr auto; align-items: end; }
.services .sec-head .label { grid-column: 1 / -1; }
.sv-list { border-top: 1px solid var(--line-dark); counter-reset: sv; }
.sv-row {
  position: relative; display: grid; grid-template-columns: calc(90 * var(--u)) 1.5fr 1fr calc(60 * var(--u)); align-items: center; gap: calc(24 * var(--u));
  padding: calc(30 * var(--u)) 0; border-bottom: 1px solid var(--line-dark);
  transition: padding .45s var(--ease);
}
.sv-num { font-size: 13px; font-weight: 500; color: var(--mute-dark); letter-spacing: .06em; }
.sv-title {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: calc(54 * var(--u)); line-height: .95; letter-spacing: -.005em; transition: transform .45s var(--ease), color .3s;
}
.sv-desc { color: var(--mute-dark); font-size: max(15px, calc(16 * var(--u))); max-width: calc(300 * var(--u)); transition: color .3s; }
.sv-img {
  position: absolute; right: calc(84 * var(--u)); top: 50%; width: calc(130 * var(--u)); aspect-ratio: 9 / 13; z-index: 2;
  border-radius: 4px; overflow: hidden; pointer-events: none;
  transform: translateY(-50%) rotate(4deg) scale(.6); opacity: 0;
  transition: transform .5s var(--ease), opacity .35s;
}
.sv-img img { width: 100%; height: 100%; object-fit: cover; }
.sv-row::after {
  content: ""; justify-self: end; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--mute-dark);
  grid-column: 4; transition: background .3s, border-color .3s, transform .4s var(--ease);
}
@media (hover: hover) and (min-width: 761px) {
  .sv-row:hover .sv-title { transform: translateX(calc(16 * var(--u))); }
  .sv-row:hover .sv-desc { color: var(--paper); }
  .sv-row:hover .sv-img { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
  .sv-row:hover::after { background: var(--powder); border-color: var(--powder); transform: scale(1.3); }
}
.sv-foot { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-top: calc(40 * var(--u)); font-size: 14px; }
.niches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.niches span { color: var(--mute-dark); margin-right: 8px; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 500; }
.niches b { font-weight: 500; padding: 6px 13px; border: 1px solid var(--line-dark); border-radius: 999px; }

/* ---------- work ---------- */
.work { padding: calc(150 * var(--u)) var(--gutter) calc(120 * var(--u)); }
.work .sec-head { margin-bottom: calc(40 * var(--u)); }
.tabs {
  position: relative; display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 4px; margin-bottom: calc(56 * var(--u));
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .45);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; z-index: 1; flex: none; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: color .3s; }
.tabs button[aria-selected="true"] { color: var(--paper); }
.tabs-bg { position: absolute; top: 4px; left: 0; height: 40px; width: 0; border-radius: 999px; background: var(--ink); transition: transform .45s var(--ease), width .45s var(--ease); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(28 * var(--u)) calc(24 * var(--u)); align-items: start; }
.grid .tile:nth-child(4n + 2 of :not([hidden])) { margin-top: calc(90 * var(--u)); }
.grid .tile:nth-child(4n + 4 of :not([hidden])) { margin-top: calc(46 * var(--u)); }
.grid.anim .tile { animation: tileIn .7s var(--ease) both; }
.tile[hidden] { display: none; }
@keyframes tileIn { from { opacity: 0; transform: translateY(24px); } }
.tile-btn { display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 4px; background: var(--stone); cursor: zoom-in; }
.tile-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s; }
@media (hover: hover) { .tile-btn:hover img { transform: scale(1.04); } }
.tile figcaption { display: flex; justify-content: space-between; padding-top: 10px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.work-note { margin-top: calc(48 * var(--u)); font-size: 14px; }

/* ---------- brands ---------- */
.brands { padding: calc(150 * var(--u)) var(--gutter) calc(150 * var(--u)); }
.br-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(64 * var(--u)); border-top: 1px solid var(--line-dark); }
.br-list li {
  display: grid; grid-template-columns: calc(56 * var(--u)) 1fr auto; align-items: baseline; gap: 16px;
  padding: calc(20 * var(--u)) 0; border-bottom: 1px solid var(--line-dark);
}
.br-n { font-size: 12px; color: var(--mute-dark); letter-spacing: .06em; }
.br-name {
  font-family: var(--display); font-weight: 600; font-size: calc(46 * var(--u)); line-height: 1; letter-spacing: -.02em;
  transition: transform .45s var(--ease), color .3s;
}
.br-list li.br-next { display: block; padding: 0; }
.br-next a { text-decoration: none; display: grid; grid-template-columns: calc(56 * var(--u)) 1fr auto; align-items: baseline; gap: 16px; padding: calc(20 * var(--u)) 0; }
.br-next .br-name { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--powder); }
.br-cat { font-size: 13px; color: var(--mute-dark); text-align: right; }
@media (hover: hover) {
  .br-list li:hover .br-name { transform: translateX(10px); color: var(--powder); }
}

/* ---------- process ---------- */
.process { padding: calc(150 * var(--u)) var(--gutter) calc(120 * var(--u)); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.steps li { padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)) 0; border-right: 1px solid var(--line); }
.steps li + li { padding-left: calc(28 * var(--u)); }
.steps li:last-child { border-right: 0; }
.step-n { display: block; font-family: var(--serif); font-style: italic; font-size: calc(54 * var(--u)); line-height: 1; color: var(--mute); margin-bottom: calc(64 * var(--u)); }
.steps h3 { font-size: max(19px, calc(24 * var(--u))); font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.steps p { color: #4a433d; font-size: max(15px, calc(16 * var(--u))); }
.why { display: grid; grid-template-columns: 1fr 2fr; gap: calc(64 * var(--u)); margin-top: calc(130 * var(--u)); align-items: start; }
.why-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(64 * var(--u)); line-height: .95; letter-spacing: -.02em; }
.why ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(28 * var(--u)); }
.why li { padding: calc(26 * var(--u)); background: var(--sand); border-radius: 8px; transition: transform .4s var(--ease), background .3s; }
@media (hover: hover) { .why li:hover { transform: translateY(calc(-6 * var(--u))); background: var(--stone); } }
.why h4 { font-size: max(17px, calc(19 * var(--u))); font-weight: 600; letter-spacing: -.015em; margin-bottom: calc(60 * var(--u)); }
.why p { font-size: max(14px, calc(15 * var(--u))); color: #4a433d; }

/* ---------- off camera ---------- */
.off { padding: 0 var(--gutter) calc(150 * var(--u)); }
.off .label { margin-bottom: calc(32 * var(--u)); }
.off-strip { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: calc(20 * var(--u)); align-items: end; }
.off figure { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 4; }
.off figure:first-child { aspect-ratio: 16 / 12; }
.off figure:nth-child(3) { aspect-ratio: 3 / 4.6; }
.off figcaption {
  position: absolute; left: 14px; bottom: 12px; color: #fff; font-family: var(--serif); font-style: italic; font-size: max(18px, calc(22 * var(--u)));
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/* ---------- contact ---------- */
.contact { padding: calc(150 * var(--u)) var(--gutter) calc(110 * var(--u)); }
.ct-title { margin: calc(36 * var(--u)) 0 calc(80 * var(--u)); font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: calc(250 * var(--u)); line-height: .86; letter-spacing: -.015em; }
.ct-title em { display: block; font-size: .5em; line-height: 1.05; margin-top: .1em; color: var(--powder); }
.ct-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: calc(48 * var(--u)); align-items: start; padding-top: calc(40 * var(--u)); border-top: 1px solid var(--line-dark); }
.ct-text { font-size: max(17px, calc(20 * var(--u))); line-height: 1.45; max-width: calc(360 * var(--u)); }
.ct-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ct-mail { width: 100%; color: var(--mute-dark); font-size: 14px; margin-top: 6px; }
.copy.done { background: var(--powder); border-color: var(--powder); color: var(--ink); }
.ct-links { display: grid; gap: 0; }
.ct-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; font-size: max(17px, calc(20 * var(--u))); font-weight: 500;
}
.ct-links a:first-child { padding-top: 0; }
.ct-links small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-dark); font-weight: 500; }
.ct-links .ico { transition: transform .3s var(--ease); }
@media (hover: hover) { .ct-links a:hover .ico { transform: rotate(45deg); } }
.consult {
  display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap;
  margin-top: calc(100 * var(--u)); padding: calc(26 * var(--u)) calc(30 * var(--u)); border: 1px solid var(--line-dark); border-radius: 14px;
}
.consult p { max-width: calc(760 * var(--u)); color: var(--mute-dark); font-size: max(14px, calc(15 * var(--u))); }
.consult a { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- footer ---------- */
.foot { padding: 0 var(--gutter) calc(28 * var(--u)); overflow: hidden; }
.foot-word {
  font-family: var(--display); font-weight: 500; text-transform: uppercase; white-space: nowrap;
  font-size: calc(178 * var(--u)); line-height: .86; letter-spacing: -.01em; color: #26221f; text-align: center;
  padding-top: calc(30 * var(--u)); border-top: 1px solid var(--line-dark);
}
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: calc(28 * var(--u)); font-size: 13px; color: var(--mute-dark); }
.foot-row a { text-decoration: none; }
.foot-row a:hover { color: var(--paper); }

/* ---------- social icons ---------- */
.ico-s { width: 18px; height: 18px; flex: none; }
.nav-ico {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(243, 238, 231, .3); text-decoration: none; transition: background-color .25s, border-color .25s, color .25s;
}
.nav.on-light .nav-ico { border-color: var(--line); }
.nav-ico b { position: absolute; right: -6px; bottom: -4px; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; padding: 1px 4px; border-radius: 6px; background: var(--powder); color: var(--ink); line-height: 1.3; }
@media (hover: hover) { .nav-ico:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .nav.on-light .nav-ico:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
.soc { display: flex; flex-wrap: wrap; gap: 8px; }
.soc a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 16px 4px 4px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color .25s, color .25s, border-color .25s; }
.soc-i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); flex: none; }
.dark .soc a, .menu .soc a { border-color: var(--line-dark); }
.dark .soc-i, .menu .soc-i { background: var(--paper); color: var(--ink); }
@media (hover: hover) { .soc a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .soc a:hover .soc-i { background: var(--powder); color: var(--ink); }
  .dark .soc a:hover, .menu .soc a:hover { background: var(--paper); color: var(--ink); } }
.soc-about { margin-top: 14px; }
.soc-menu { flex-direction: row; flex-wrap: wrap; }
.soc-menu a { font-size: 15px; }
.soc-foot a { padding-right: 14px; font-size: 13px; color: var(--paper); }
.ct-links a { justify-content: flex-start; flex-wrap: nowrap; }
.ct-links .soc-i { width: 40px; height: 40px; }
.ct-l { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ct-links a:first-child { padding-top: 16px; }
.ct-links li:first-child a { padding-top: 0; }
.ct-mail a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 238, 231, .3); }
@media (max-width: 1100px) { .nav-ico { display: none; } }
@media (max-width: 760px) { .soc-foot { width: 100%; } .soc-about a .soc-t { font-size: 13px; } }

/* ---------- lightbox ---------- */
.lb-fig img { transition: opacity .25s; }
.lb-fig img.swap { opacity: 0; }
.lb-fig img:not([src]) { visibility: hidden; }
.lb { position: fixed; inset: 0; z-index: 60; background: rgba(14, 13, 12, .96); color: var(--paper); display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; animation: fade .3s; touch-action: pan-y; }
.lb[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.lb-fig { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; justify-content: center; padding: 64px 0 24px; }
.lb-fig img { max-height: calc(100svh - 120px); max-width: 100%; width: auto; border-radius: 4px; object-fit: contain; }
.lb-fig figcaption { font-size: 13px; color: var(--mute-dark); text-align: center; padding: 0 16px; }
.lb button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-dark); justify-self: center; font-size: 20px; transition: background .3s; }
@media (hover: hover) { .lb button:hover { background: rgba(243, 238, 231, .1); } }
.lb-close { position: absolute; top: 18px; right: 18px; font-size: 26px !important; }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.nf-main { max-width: 760px; display: grid; gap: 22px; }
.nf .display { font-size: clamp(56px, 10vw, 120px); }

/* ---------- load-in ---------- */
.js .hero-title .line > span, .js .sec-head .line > span, .js .ct-title .line > span { transform: translateY(105%); }
.js [data-in] { opacity: 0; transform: translateY(14px); }
.js [data-in].shown { opacity: 1; transform: none; }
.js .hero-hint.shown.gone { opacity: 0; }
.js .sec-head .line > span, .js .ct-title .line > span { transition: transform 1s var(--ease); }
.js .in .line > span, .js .sec-head.in .line > span { transform: none; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .pill a { padding: 0 11px; font-size: 13px; }
  .brand-name { display: none; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid .tile:nth-child(n of :not([hidden])) { margin-top: 0; }
  .grid .tile:nth-child(3n + 2 of :not([hidden])) { margin-top: calc(70 * var(--u)); }
  .why { grid-template-columns: 1fr; }
  .ct-grid { grid-template-columns: 1fr 1fr; }
  .ct-links { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { grid-template-columns: 1fr auto; padding: 14px var(--gutter); }
  .pill, .nav-cta, .brand-name { display: none; }
  .menu-btn { display: block; }
  .menu-open .nav { color: var(--paper); }
  .menu-open { overflow: hidden; }
  .display { font-size: calc(62 * var(--u)); }

  .hero { min-height: 620px; max-height: none; }
  .hero-media img, .hero-media canvas { object-position: 47% 30%; }
  .hero-shade { background: linear-gradient(0deg, rgba(10, 9, 8, .86) 0%, rgba(10, 9, 8, .5) 36%, rgba(10, 9, 8, 0) 62%), linear-gradient(180deg, rgba(10, 9, 8, .5) 0%, rgba(10, 9, 8, 0) 20%); }
  .hero-inner { left: var(--gutter); right: var(--gutter); width: auto; bottom: 74px; }
  .hero-title { font-size: calc(74 * var(--u)); }
  .hero-line { font-size: 19px; margin-top: 16px; max-width: 320px; }
  .kicker { margin-bottom: 12px; }
  .hero-ctas { margin-top: 20px; }
  .hero-ctas .btn { flex: 1; }
  .hero-hint { left: var(--gutter); right: var(--gutter); bottom: 22px; justify-content: center; text-align: center; font-size: 12px; }

  .bar { grid-template-columns: 1fr auto; font-size: 11px; height: 58px; min-height: 0; }
  .bar > span:first-child { display: none; }

  .manifesto { padding: 96px var(--gutter) 90px; text-align: left; }
  .manifesto .label { margin-bottom: 26px; }
  .mf-text { font-size: calc(33 * var(--u)); line-height: 1.17; }
  .mf-foot { grid-template-columns: 1fr; gap: 40px; margin-top: 70px; padding-top: 28px; }
  .stats dt { font-size: calc(62 * var(--u)); }

  .about { grid-template-columns: 1fr; gap: 40px; padding: 20px var(--gutter) 100px; }
  .about-media { padding-bottom: 70px; }
  .about-main { width: 84%; }
  .about-small { width: 44%; outline-width: 7px; }
  .hey { font-size: calc(96 * var(--u)); margin-top: 18px; }

  .services, .work, .brands, .process, .contact { padding-top: 96px; padding-bottom: 90px; }
  .services .sec-head { grid-template-columns: 1fr; }
  .sec-head { margin-bottom: 40px; gap: 18px; }
  .sv-row { grid-template-columns: 34px 1fr calc(72 * var(--u)); grid-template-rows: auto auto; gap: 6px 12px; padding: 20px 0; }
  .sv-num { grid-row: 1; align-self: start; padding-top: 6px; }
  .sv-title { grid-column: 2; font-size: calc(34 * var(--u)); }
  .sv-desc { grid-column: 2; font-size: 15px; }
  .sv-img { position: static; grid-column: 3; grid-row: 1 / 3; width: 100%; opacity: 1; transform: none; align-self: center; }
  .sv-row::after { display: none; }

  .tabs { margin-bottom: 32px; margin-right: calc(var(--gutter) * -1); border-radius: 999px 0 0 999px; border-right: 0; }
  .grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .grid .tile:nth-child(n of :not([hidden])) { margin-top: 0; }
  .grid .tile:nth-child(2n + 2 of :not([hidden])) { margin-top: 44px; }
  .tile { animation: none; }

  .br-list { grid-template-columns: 1fr; }
  .br-list li { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 14px 0; }
  .br-next a { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 14px 0; }
  .br-name { font-size: calc(36 * var(--u)); }
  .br-cat { font-size: 12px; }

  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; }
  .step-n { grid-row: 1 / 3; margin: 0; font-size: 36px; }
  .why { margin-top: 70px; gap: 28px; grid-template-columns: 1fr; }
  .why-title { font-size: 44px; }
  .why ul { grid-template-columns: 1fr; gap: 12px; }
  .why h4 { margin-bottom: 18px; }

  .off { padding-bottom: 96px; padding-right: 0; }
  .off-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-right: var(--gutter); scrollbar-width: none; }
  .off-strip::-webkit-scrollbar { display: none; }
  .off figure, .off figure:first-child, .off figure:nth-child(3) { flex: none; width: 70vw; aspect-ratio: 3 / 4; scroll-snap-align: start; }

  .ct-title { font-size: calc(98 * var(--u)); margin: 24px 0 48px; }
  .ct-grid { grid-template-columns: 1fr; gap: 36px; }
  .ct-actions .btn { flex: 1 1 100%; }
  .consult { margin-top: 64px; padding: 20px; }
  .foot-word { font-size: calc(48 * var(--u)); }
  .lb { grid-template-columns: 1fr; }
  .lb-prev, .lb-next { position: absolute; bottom: 20px; }
  .lb-prev { left: 24px; } .lb-next { right: 24px; }
  .lb-fig { padding: 70px 12px 90px; }
  .lb-fig img { max-height: calc(100svh - 180px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal-img { clip-path: none; }
  .reveal-img img { transform: none; }
}