:root {
  --background: oklch(0.992 0.001 90);
  --foreground: oklch(0.18 0.005 270);
  --muted-fg: oklch(0.50 0.005 270);
  --muted: oklch(0.955 0.002 90);
  --hairline: oklch(0.85 0.003 90);
  --font-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; border-color: var(--hairline); }
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-feature-settings: "ss01", "cv11";
}
::selection { background: var(--foreground); color: var(--background); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.muted { color: var(--muted-fg); }
.muted-dark { color: rgba(255,255,255,.5); }
.italic-light { font-style: italic; font-weight: 300; }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}

.eyebrow {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--muted-fg); margin: 0;
}

.hairline { border-top: 1px solid var(--hairline); }
.hairline-h { display:inline-block; height:1px; width:2.5rem; background:var(--hairline); }
.hairline-h--sm { width:2rem; margin-top:.75rem; flex-shrink:0; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .container { padding: 0 2.5rem; } }

/* NAV */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
.nav__inner {
  max-width: 1400px; margin: 0 auto; padding: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { font-size: 1rem; letter-spacing: -.01em; font-weight: 500; }
.nav__links { display: none; gap: 2rem; font-size: .875rem; }
.nav__links a { color: rgba(0,0,0,.7); transition: color .5s ease; position: relative; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background: var(--foreground); transform: scaleX(0); transform-origin: left;
  transition: transform .5s ease; }
.nav__links a:hover { color: var(--foreground); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__mobile { font-size:.875rem; text-decoration: underline; text-underline-offset: 4px; }
.nav__hairline { max-width:1400px; margin:0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) {
  .nav__inner { padding: 2rem 2.5rem; }
  .nav__hairline { padding: 0 2.5rem; }
  .brand { font-size: 1.125rem; }
  .nav__links { display: flex; }
  .nav__mobile { display: none; }
}

/* HERO */
.hero { position: relative; padding: 7rem 0 4rem; }
.hero__grid {
  max-width: 1500px; margin: 0 auto;
  padding-left: 1.5rem; padding-right: 0;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem; align-items: stretch;
}
.hero__copy { grid-column: span 12; display:flex; flex-direction:column; justify-content:flex-end; }
.hero__media { grid-column: span 12; margin-top: 3rem; padding-right: 1.5rem; }
.hero__media figure { margin: 0; display:flex; justify-content:center; }
.hero__media img { width: 100%; height: auto; object-fit: contain; }

.eyebrow-row { display:flex; align-items:center; gap:1rem; margin-bottom: 2rem; }
.hero__title {
  font-size: 11vw; line-height: 1.02; letter-spacing: -0.02em;
}
.hero__sub { margin-top: 2rem; display:flex; align-items:flex-start; gap:1.5rem; max-width: 28rem; font-size: 1rem; line-height: 1.6; }
.hero__sub p { margin: 0; }

.hero__manifesto { max-width: 1400px; margin: 7rem auto 0; padding: 0 1.5rem; }
.hairline-top { border-top: 1px solid var(--hairline); padding-top: 3rem;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.manifesto__eye { grid-column: span 12; }
.manifesto__title { grid-column: span 12; font-size: 1.875rem; max-width: 56rem; line-height: 1.05; }

@media (min-width: 768px) {
  .hero { padding: 12rem 0 8rem; }
  .hero__grid { padding-left: 2.5rem; gap: 3rem; }
  .hero__sub { font-size: 1.125rem; }
  .hero__manifesto { padding: 0 2.5rem; margin-top: 9rem; }
  .hairline-top { gap: 2.5rem; padding-top: 4rem; }
  .manifesto__eye { grid-column: span 3; }
  .manifesto__title { grid-column: span 9; font-size: 3rem; }
  .hero__title { font-size: 9.5vw; line-height: .95; }
  .eyebrow-row { margin-bottom: 4rem; }
  .hero__sub { margin-top: 4rem; }
  .hairline-h { width: 4rem; }
}
@media (min-width: 1024px) {
  .hero__copy { grid-column: span 7; padding-right: 2.5rem; }
  .hero__media { grid-column: span 5; margin-top: 0; padding-right: 0; }
  .hero__media img { height: 95vh; max-height: 1100px; object-fit: cover; }
  .hero__title { font-size: 7vw; }
  .manifesto__title { font-size: 3.75rem; }
}
@media (min-width: 1280px) { .hero__title { font-size: 108px; } }

/* SECTION */
.section { padding: 6rem 0; }
.section--top-line { border-top: 1px solid var(--hairline); }
.section--muted { background: color-mix(in oklab, var(--muted) 40%, transparent); }
@media (min-width: 768px) { .section { padding: 9rem 0; } }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
@media (min-width:768px){ .grid { gap: 2.5rem; } }
.head { margin-bottom: 4rem; }
@media (min-width:768px){ .head { margin-bottom: 6rem; } }
.head__eye { grid-column: span 12; }
.head__title { grid-column: span 12; font-size: 2.25rem; max-width: 64rem; }
.head__title--sm { font-size: 1.875rem; max-width: 64rem; line-height: 1.05; }
.head__title--upper { text-transform: uppercase; letter-spacing: -0.02em; }
@media (min-width: 768px) {
  .head__eye { grid-column: span 3; }
  .head__title { grid-column: span 9; font-size: 3.75rem; }
  .head__title--sm { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .head__title { font-size: 4.5rem; }
  .head__title--sm { font-size: 3.75rem; }
}
.positioning__p { margin-top: 2.5rem; font-size: 1.125rem; max-width: 42rem; line-height: 1.6; }
@media (min-width: 768px) { .positioning__p { margin-top: 3.5rem; font-size: 1.5rem; } }

/* SERVICES */
.services { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); }
@media (min-width: 768px) { .services { grid-template-columns: 1fr 1fr; } }
.service { position: relative; padding: 2rem; border-bottom: 1px solid var(--hairline); transition: background .2s; }
.service:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
@media (min-width: 768px) {
  .service { padding: 3rem; }
  .service:nth-child(odd) { border-right: 1px solid var(--hairline); }
}
.service__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.service__top .eyebrow { padding-top: .75rem; }
.num {
  font-family: var(--font-display); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  font-size: 3rem; color: color-mix(in oklab, var(--muted-fg) 60%, transparent);
}
@media (min-width: 768px) { .num { font-size: 3.75rem; } }
.num--it { font-style: italic; font-size: 1.875rem; }
.service__title { margin: 2.5rem 0 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; text-transform: lowercase; }
@media (min-width:768px){ .service__title { margin-top: 4rem; font-size: 1.875rem; } }
.service__desc { margin-top: 1rem; max-width: 28rem; }
.service__k { margin-top: 1.5rem; color: rgba(0,0,0,.7); }

/* PROCESS */
.process { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); }
@media (min-width: 768px) { .process { grid-template-columns: repeat(4, 1fr); } }
.process li { padding: 2rem; border-bottom: 1px solid var(--hairline); }
@media (min-width: 768px) {
  .process li { padding: 2.5rem; }
  .process li:not(:last-child) { border-right: 1px solid var(--hairline); }
}
.process h3 { margin: 2.5rem 0 .75rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; text-transform: lowercase; }
@media (min-width:768px){ .process h3 { margin-top: 4rem; font-size: 1.5rem; } }
.process p { margin: 0; font-size: .875rem; line-height: 1.6; }
@media (min-width:768px){ .process p { font-size: 1rem; } }

/* PROJECTS */
.logos { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
@media (min-width: 768px) { .logos { grid-template-columns: repeat(3, 1fr); } }
.logo-cell {
  position: relative; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: .5rem; overflow: hidden;
}
.logo-cell img { object-fit: contain; opacity: .9; transition: transform .3s, opacity .3s; }
.logo-cell:hover img { transform: scale(1.05); opacity: 1; }

/* CONTACT */
.section--dark { background: var(--foreground); color: var(--background); padding: 6rem 0; }
@media (min-width:768px){ .section--dark { padding: 9rem 0; } }
.contact__eye { color: rgba(255,255,255,.6); margin-bottom: 2.5rem; }
@media (min-width:768px){ .contact__eye { margin-bottom: 4rem; } }
.contact__title { font-size: 2.25rem; max-width: 64rem; text-transform: uppercase; }
@media (min-width:768px){ .contact__title { font-size: 3.75rem; } }
@media (min-width:1024px){ .contact__title { font-size: 4.5rem; } }
.contact__grid {
  margin-top: 5rem; display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); padding-top: 3rem;
}
@media (min-width:768px){ .contact__grid { margin-top: 7rem; gap: 2.5rem; padding-top: 4rem; } }
.contact__lead { grid-column: span 12; font-size: 1.125rem; color: rgba(255,255,255,.8); line-height: 1.6; margin: 0; }
.contact__list { grid-column: span 12; list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1.5rem; font-size: 1.125rem; }
@media (min-width:768px){
  .contact__lead { grid-column: span 5; font-size: 1.25rem; }
  .contact__list { grid-column: 7 / span 7; font-size: 1.5rem; }
}
.contact__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.15); padding-bottom: 1rem;
  transition: border-color .2s;
}
.contact__list a:hover { border-bottom-color: #fff; }
.contact__list .eyebrow { color: rgba(255,255,255,.5); transition: color .2s; }
.contact__list a:hover .eyebrow { color: #fff; }

.contact__footer {
  margin-top: 4rem; display: flex; flex-direction: column; align-items: center; gap: 3rem;
}
@media (min-width:768px){ .contact__footer { margin-top: 6rem; gap: 4rem; } }
.contact__logo { width: 100%; max-width: 260px; filter: invert(1); }
@media (min-width:768px){ .contact__logo { max-width: 420px; } }
.contact__footer p { font-size: .75rem; color: rgba(255,255,255,.6); text-align: center; line-height: 1.6; margin: 0; }
@media (min-width:768px){ .contact__footer p { font-size: .875rem; } }

/* ANIMATIONS */
@keyframes editorial-rise { from { opacity:0; transform: translateY(24px);} to { opacity:1; transform:none;} }
@keyframes editorial-fade { from { opacity:0;} to { opacity:1;} }
.anim-rise { opacity: 0; animation: editorial-rise .8s cubic-bezier(.22,1,.36,1) forwards; }
.anim-fade { opacity: 0; animation: editorial-fade 1.1s ease-out forwards; }
.reveal { opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anim-rise, .anim-fade, .reveal {
    opacity: 1 !important; transform: none !important;
    animation: none !important; transition: none !important;
  }
}