/* Mad Genius Labs — hand-built rebuild of the design export (2026-07).
   All values transcribed from the reference page; do not eyeball-change them. */

/* ---------- fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ArchivoBlack-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ArchivoBlack-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SpaceMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SpaceMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/SpaceMono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/SpaceMono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens & base ---------- */
:root {
  --bg: #f1eee6;
  --ink: #101010;
  --acc: #c9f24b;
  --muted: #6f6b60;
  --muted-dark: #b9b5a8;
  --muted-foot: #8a867a;
  --pad-x: clamp(16px, 4vw, 40px);
  --mq-dur: 22s;
  --hero-grid:
    repeating-linear-gradient(0deg, rgba(16, 16, 16, .05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(16, 16, 16, .05) 0 1px, transparent 1px 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  min-width: 320px;
  overflow-x: clip;
}
a { color: var(--ink); text-decoration: none; }
a:hover { opacity: .7; }
::selection { background: var(--acc); }
.pad-x { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--acc);
  padding: 10px 16px; z-index: 100; font-size: 12px; letter-spacing: 1.5px;
}
.skip-link:focus { left: 0; opacity: 1; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.process :focus-visible, .site-footer :focus-visible, .mobile-menu :focus-visible { outline-color: var(--acc); }

@keyframes mgl-marquee { to { transform: translateX(-50%); } }
@keyframes mgl-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 24px; flex-wrap: wrap;
  padding: 14px var(--pad-x) 0;
  background-image: var(--hero-grid);
}
.kicker {
  flex: 1 1 0; min-width: 0;
  font-size: 11px; letter-spacing: 2.5px; padding: 10px 0; color: var(--muted);
}
.header-nav {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 26px; font-size: 11.5px; letter-spacing: 1.5px;
}
.header-nav a { padding: 9px 10px; font-weight: 700; transition: background .12s; }
.header-nav a:hover { background: var(--acc); color: var(--ink); opacity: 1; }
.header-nav .nav-cta {
  background: var(--ink); color: var(--acc); padding: 11px 16px; font-weight: 400;
  transition: background .15s, color .15s;
}
.header-nav .nav-cta:hover { background: var(--acc); color: var(--ink); opacity: 1; }
.menu-btn {
  display: none;
  flex: none; background: var(--ink); color: var(--acc); border: none;
  padding: 13px 18px; font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 1.5px; cursor: pointer;
}

/* ---------- mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--acc);
  display: flex; flex-direction: column; padding: 20px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu-top span { font-size: 12px; letter-spacing: 2px; }
.menu-close {
  background: transparent; border: 2px solid var(--acc); color: var(--acc);
  font-family: 'Space Mono', monospace; font-size: 20px; width: 48px; height: 48px; cursor: pointer;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; margin-top: 44px; font-family: 'Archivo Black', sans-serif; }
.mobile-menu nav a { color: var(--acc); font-size: 36px; padding: 10px 0; }
.mobile-menu-foot { margin-top: auto; font-size: 11px; letter-spacing: 2px; color: var(--muted-foot); }

/* ---------- hero ---------- */
.hero {
  padding: clamp(48px, 6.5vw, 96px) var(--pad-x) clamp(28px, 5vw, 56px);
  background-image: var(--hero-grid);
}
.hero-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-copy { flex: 1 1 460px; min-width: 0; }
.hero-title {
  margin: 0; font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(48px, 9.2vw, 136px); line-height: .88; letter-spacing: -.02em;
}
.hero-title span { display: block; }
.line-outline { color: transparent; -webkit-text-stroke: 2.5px var(--ink); }
.line-mark { margin-top: .05em; }
.line-accent { display: inline !important; background: var(--acc); padding: 0 .09em; margin-left: -.09em; }
.waiting {
  margin-top: clamp(0px, 3vw, 34px); font-size: 12.5px; letter-spacing: 1px;
  display: flex; align-items: center; gap: 10px;
}
.cursor { display: inline-block; width: .62em; height: 1.15em; background: var(--ink); animation: mgl-blink 1.1s steps(1) infinite; }

.hero-fig {
  flex: 0 1 auto;
  margin-left: auto;
  margin-right: clamp(12px, calc(20vw - 100px), 380px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fig-frame { position: relative; width: clamp(250px, 30vw, 460px); aspect-ratio: 1 / 1; }
.fig-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fig-frame img { position: absolute; inset: 15%; width: 70%; height: 70%; display: block; }
.fig-caption { font-size: 10.5px; letter-spacing: 2px; color: var(--muted); }

/* ---------- marquee ---------- */
.marquee { background: var(--ink); color: var(--acc); overflow: hidden; padding: 12px 0; border-top: 2px solid var(--ink); }
.marquee-track {
  display: flex; white-space: nowrap; width: max-content;
  animation: mgl-marquee var(--mq-dur) linear infinite;
  font-size: 14px; letter-spacing: 2px;
}
.marquee-track span { padding-right: 40px; }

/* ---------- section heads ---------- */
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
}
.label { font-size: 11.5px; letter-spacing: 2px; }
.label.muted { color: var(--muted); }
.label.accent, a.label.accent { color: var(--acc); }
.head-right { display: flex; gap: 24px; align-items: baseline; }

/* ---------- services ---------- */
.services { padding: clamp(40px, 6vw, 64px) 0 0; }
.services .section-head { padding: 0 var(--pad-x) 16px; }
.service-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 18px var(--pad-x);
  border-top: 2px solid var(--ink);
  transition: background .15s, color .15s;
  cursor: default;
}
.service-row:hover { background: var(--ink); color: var(--acc); }
.svc-n { flex: 0 0 44px; font-size: 12px; }
.svc-name { flex: 1 1 300px; font-family: 'Archivo Black', sans-serif; font-size: clamp(22px, 3.2vw, 36px); letter-spacing: -.5px; }
.svc-desc { flex: 1 1 260px; font-size: 12.5px; line-height: 1.55; }
.svc-arrow { flex: 0 0 auto; font-size: 22px; margin-left: auto; }
.services-endcap { border-top: 2px solid var(--ink); }

/* ---------- selected work (shipped hidden) ---------- */
.work { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(40px, 6vw, 64px); }
.work .section-head { padding-bottom: 16px; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.work-card { background: var(--bg); border: 1px solid var(--ink); }
.work-img {
  height: 200px; border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(45deg, rgba(16, 16, 16, .08) 0 10px, transparent 10px 20px);
  display: flex; align-items: center; justify-content: center;
}
.work-img span { font-size: 11px; }
.work-body { padding: 18px; }
.work-tag { font-size: 11px; background: var(--acc); padding: 3px 8px; }
.work-body h3 { margin: 12px 0 6px; font-family: 'Archivo Black', sans-serif; font-size: 20px; font-weight: 400; }
.work-body p { margin: 0; font-size: 12.5px; line-height: 1.6; }

/* ---------- process + about ---------- */
.process {
  background: var(--ink); color: var(--bg);
  padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(40px, 6vw, 64px);
}
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 20px; }
.process-card { background: var(--ink); border: 1px solid var(--bg); padding: 22px; }
.pc-n { font-family: 'Archivo Black', sans-serif; font-size: 48px; color: var(--acc); }
.process-card h3 { margin: 10px 0 8px; font-size: 14px; letter-spacing: 1.5px; font-weight: 700; }
.process-card p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--muted-dark); }
.about { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; margin-top: clamp(36px, 5vw, 56px); }
.about-copy { flex: 1 1 420px; }
.about-copy h2 {
  margin: 0 0 12px; font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(28px, 4vw, 42px); letter-spacing: -1px;
}
.about-copy p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted-dark); max-width: 680px; }

/* ---------- contact ---------- */
.contact {
  background: var(--acc);
  padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(40px, 6vw, 64px);
}
.contact-title {
  margin: 14px 0 8px; font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(38px, 7vw, 68px); letter-spacing: -2px;
}
.contact-lede { margin: 0 0 28px; font-size: 13px; letter-spacing: 1px; max-width: 600px; line-height: 1.7; }
.contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.contact-form input, .contact-form textarea {
  background: transparent; border: 2px solid var(--ink); padding: 14px;
  font-family: 'Space Mono', monospace; font-size: 13px; color: var(--ink);
  outline: none; min-width: 0; border-radius: 0;
}
.contact-form textarea { resize: none; }
.contact-form input:focus, .contact-form textarea:focus { background: var(--bg); }
.contact-form ::placeholder { color: var(--ink); opacity: .55; }
.submit-btn {
  background: var(--ink); color: var(--acc); border: none; padding: 17px; text-align: center;
  font-family: 'Space Mono', monospace; font-size: 14px; letter-spacing: 2px; cursor: pointer;
  transition: letter-spacing .2s;
}
.submit-btn:hover { letter-spacing: 4px; }
.contact-alt { margin-top: 24px; font-size: 12px; letter-spacing: 1px; }
.contact-alt a { text-decoration: underline; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--bg); padding: clamp(18px, 2.5vw, 28px) 0; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px 28px; flex-wrap: wrap; margin: 0 var(--pad-x);
}
.foot-brand { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 1px; color: var(--muted-dark); }
.foot-brand img { width: 34px; height: auto; display: block; }
.footer-inner nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 22px; font-size: 11px; letter-spacing: 1.5px; }
.footer-inner nav a { color: var(--bg); padding: 10px 0; }
.footer-inner nav a:hover { color: var(--acc); opacity: 1; }
.footer-inner nav a.accent { color: var(--acc); }
.footer-inner nav a.accent:hover { opacity: .8; }
.foot-top { color: var(--acc); font-size: 11px; letter-spacing: 1.5px; padding: 10px 0; }

/* ---------- reveal-on-scroll ----------
   Visible by default (progressive enhancement). The hidden initial state only
   applies once JS adds `reveal-armed` to <html>, so if JS never runs the content
   is simply shown without animation — it is never permanently invisible. */
.reveal-armed [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal-armed [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- responsive ----------
   Wide desktop (>1150px): original design values above.
   901–1150px: hero stays side-by-side; headline at natural width, figure
   floats centered in the remaining space (the export stacked here — fixed).
   761–900px: stacked hero, proportionate figure.
   <=760px: the export's designed mobile layout (figure-led hero, menu button). */

/* 761–1150px: keep the hero side-by-side all the way down (the export stacked
   below 1150 and left a large empty gap). The headline shrinks a little and the
   figure scales with the viewport so the two always fit on one row. */
@media (max-width: 1150px) and (min-width: 761px) {
  .hero { padding-top: clamp(32px, 4.5vw, 64px); }
  .hero-row { flex-wrap: nowrap; gap: clamp(16px, 3vw, 40px); }
  /* headline keeps its natural width (does NOT grow) and the figure takes equal
     auto margins, so it sits centred in the leftover space next to the text
     rather than being pushed out to the right edge. */
  .hero-copy { flex: 0 1 auto; min-width: 0; }
  .hero-title { font-size: clamp(44px, 8vw, 104px); }
  .hero-fig { flex: 0 0 auto; margin-left: auto; margin-right: auto; }
  .fig-frame { width: clamp(190px, 27vw, 300px); }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .kicker { display: none; }
}
@media (max-width: 760px) {
  .header-nav { display: none; }
  .menu-btn { display: block; }
  .hero-row { justify-content: center; }
  .hero-copy { order: 2; flex: 1 1 100%; }
  .hero-title { display: none; }
  .waiting { justify-content: center; margin-top: 0; }
  .hero-fig { margin-left: auto; margin-right: auto; }
  .fig-frame { width: min(80vw, 430px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .cursor { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}