.x3m-home {
  --bg: #f3f1e9;
  --bg-soft: #ebe9e0;
  --panel: #faf8f1;
  --panel-light: #e8e6dd;
  --text: #171917;
  --muted: #656b64;
  --line: rgba(23, 25, 23, 0.13);
  --line-strong: rgba(23, 25, 23, 0.25);
  --ink: #171917;
  color: var(--text);
  background: var(--bg);
}

.x3m-home .noise { opacity: 0.045; mix-blend-mode: multiply; }
.x3m-home .cursor-glow { background: rgba(199, 255, 74, 0.18); }

.x3m-home .site-header.scrolled {
  border-color: var(--line);
  background: rgba(247, 245, 238, 0.88);
}

.x3m-home .hero {
  min-height: 100svh;
  border-color: var(--line);
  background: #f3f1e9;
}

.x3m-home .hero::before {
  top: auto;
  right: -12rem;
  bottom: -22rem;
  left: auto;
  width: 54rem;
  height: 54rem;
  border: 1px solid rgba(23, 25, 23, 0.1);
  background: transparent;
  box-shadow: 0 0 0 7rem rgba(23, 25, 23, 0.018), 0 0 0 14rem rgba(23, 25, 23, 0.012);
}

.x3m-home .hero-grid {
  opacity: 0.3;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc((100vw - 4rem) / 6) 100%;
  -webkit-mask-image: none;
  mask-image: none;
}

.x3m-home .hero-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(28rem, 0.85fr);
  gap: clamp(3rem, 6vw, 7rem);
}

.x3m-home .eyebrow,
.x3m-home .section-kicker { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.x3m-home .hero h1 {
  max-width: 63rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 7.6vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.84;
}

.x3m-home .hero-accent {
  margin-top: 0.12em;
  color: var(--text);
  font-family: Inter, "SF Pro Display", sans-serif;
  font-size: 0.72em;
  font-weight: 650;
  letter-spacing: -0.07em;
}

.x3m-home .hero-accent::after { color: var(--acid-dark); content: "."; }
.x3m-home .hero-lead { color: #50564f; }
.x3m-home .button-ghost { background: rgba(255, 255, 255, 0.34); }
.x3m-home .button-primary {
  color: #f7f5ef;
  background: #171917;
}
.x3m-home .button-primary:hover { background: #303430; }

.studio-proof {
  position: relative;
  min-height: 34rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--line-strong);
  background: #eae8df;
  box-shadow: 1.25rem 1.25rem 0 #d8d6cc;
}

.studio-proof-head,
.studio-proof-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.studio-proof-head strong { color: #77834f; font-weight: 600; }
.studio-proof-head strong::before { color: var(--acid-dark); content: "● "; }

.studio-proof-body {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 27rem;
  overflow: hidden;
  background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
}

.studio-proof-mark {
  position: relative;
  z-index: 2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9rem, 18vw, 15rem);
  line-height: 0.7;
  letter-spacing: -0.16em;
}

.studio-proof-mark span { color: var(--acid-dark); }
.studio-proof-note { position: absolute; z-index: 3; max-width: 12rem; padding: 0.65rem 0.75rem; border: 1px solid var(--line-strong); background: #f8f6ef; font-size: 0.68rem; line-height: 1.4; }
.studio-proof-note b { display: block; margin-bottom: 0.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.5rem; letter-spacing: 0.08em; }
.studio-proof-note-a { top: 12%; left: 8%; }
.studio-proof-note-b { right: 7%; bottom: 10%; }
.studio-proof-foot { border-top: 1px solid var(--line); border-bottom: 0; color: var(--muted); }

.x3m-home .manifesto,
.x3m-home .scale,
.x3m-home .competencies { background: #e8e6dd; }

.x3m-home .services,
.x3m-home .works,
.x3m-home .process,
.x3m-home .contact,
.x3m-home .site-footer { background: #f3f1e9; }

.x3m-home .service-row:hover::before { background: rgba(23, 25, 23, 0.035); }

.x3m-home .work-card {
  min-height: 34rem;
  border-radius: 0;
  background: #f8f6ef;
  box-shadow: 0.7rem 0.7rem 0 rgba(23, 25, 23, 0.08);
}

.x3m-home .work-card-large { min-height: 0; }
.x3m-home .work-meta { color: #6a7068; background: #ebe9e1; }
.x3m-home .work-copy { color: var(--text); background: #f8f6ef; }
.x3m-home .work-copy p { color: #38413b; }
.x3m-home .work-copy span { color: #666c65; }

.x3m-home .project-shot {
  min-height: 0;
  padding: clamp(1rem, 2vw, 2rem);
  background: #dedcd3;
}

.x3m-home .project-shot .product-vision { box-shadow: 0 1.4rem 3rem rgba(23, 25, 23, 0.14); }
.x3m-home .project-shot > :not(.product-vision) { display: none; }
.x3m-home .work-card-link:hover .product-vision img { transform: scale(1.012); }

.x3m-home .product-vision-switch { pointer-events: none; }

.x3m-home .scope-card {
  color: #f5f4ee;
  background: #191c19;
}

.x3m-home .contact-shell {
  color: #f3f3eb;
  border-radius: 0;
  background: #191c19;
}

.x3m-home .contact-link { background: rgba(255, 255, 255, 0.035); }
.x3m-home .menu-toggle span { background: var(--text); }
.x3m-home .site-header .header-cta:hover {
  color: #f7f5ef;
  border-color: #171917;
  background: #171917;
}

@media (max-width: 920px) {
  .x3m-home .main-nav { color: var(--text); background-color: #f3f1e9; background-image: none; }
  .x3m-home .hero-layout { grid-template-columns: 1fr; }
  .studio-proof { width: calc(100% - 1rem); max-width: 42rem; justify-self: end; }
}

@media (max-width: 620px) {
  .studio-proof { min-height: 27rem; box-shadow: 0.65rem 0.65rem 0 #d8d6cc; }
  .studio-proof-body { min-height: 20rem; }
  .studio-proof-mark { font-size: 10rem; }
  .studio-proof-note { max-width: 9rem; font-size: 0.58rem; }
  .x3m-home .project-shot { padding: 0.55rem; }
  .x3m-home .work-copy-linked > i { display: none; }
}