/* ===========================================================================
   Traction Labs — studio site
   Dark only, one accent. Direction 2: the product's own output carries the
   page, so the cover art is the first thing above the fold and the studio's
   positions follow underneath.
   ======================================================================== */

:root {
  --ground: #0A0A0B;
  --surface: #121214;
  --surface-2: #17171A;
  --ink: #F0EDE6;
  --dim: #A8A39A;
  --faint: #6E6A63;
  --line: #232327;
  --amber: #FF7A1A;
  --katha: #FF6B1A;
}
* { box-sizing: border-box; }
main, section, article, div, figure { min-width: 0; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
  border-radius: 4px;
}
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 24px 0;
}
/* The masthead carries the real lockup — TRACTION with the flask standing in
   for the word LABS — as inline SVG, so it stays crisp at any density and
   needs no image request. Height is fixed and width follows the aspect ratio,
   which is what keeps it steady when the nav wraps. */
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.wordmark svg {
  display: block;
  height: 22px;
  width: auto;
}
@media (max-width: 560px) { .wordmark svg { height: 19px; } }
nav { display: flex; gap: 18px; color: var(--dim); font-size: 14px; }
nav a { text-decoration: none; }

.hero {
  padding: 34px 0 36px;
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr);
  gap: 36px;
  align-items: end;
}
.hero-copy { padding-bottom: 24px; }
.eyebrow {
  margin: 0 0 16px;
  color: var(--amber);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; overflow-wrap: break-word; }
h1 {
  margin-bottom: 22px;
  max-width: 680px;
  font-size: clamp(38px, 4.9vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 600;
}
.lead { color: var(--dim); font-size: 19px; max-width: 560px; }
.cover-mosaic {
  display: grid;
  grid-template-columns: repeat(5, minmax(70px, 1fr));
  gap: 10px;
  align-items: end;
}
.cover-mosaic img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 6px;
  background: var(--surface-2);
}
.cover-mosaic img:nth-child(2n) { transform: translateY(30px); }
.cover-mosaic img:nth-child(5n) { transform: translateY(-20px); }

.katha-panel {
  margin: 34px auto 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,107,26,0.07), transparent 34%), var(--surface);
}
.product {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 44px 0 52px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 42px;
}
.app-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.app-heading img { width: 56px; height: 56px; border-radius: 14px; }
.app-heading span { color: var(--katha); font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
h2 { font-size: clamp(27px, 3.1vw, 40px); line-height: 1.1; letter-spacing: -0.018em; margin-bottom: 18px; font-weight: 600; }
.product-copy { color: var(--dim); font-size: 18px; max-width: 660px; }
.product-copy p { margin-bottom: 16px; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-decoration: none;
  font-weight: 500;
}
.button.primary { border-color: color-mix(in srgb, var(--katha) 65%, var(--line)); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
figure { margin: 0; min-width: 0; }
figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--surface-2);
}
figcaption {
  margin-top: 7px;
  color: var(--faint);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.band {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 58px 0;
}
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.proof article {
  padding: 22px;
  min-height: 190px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
h3 { font-size: 19px; line-height: 1.25; margin-bottom: 10px; font-weight: 500; }
.proof p, .now p, .contact p { color: var(--dim); margin-bottom: 0; }
.now-contact {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}
.now, .contact {
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
}
.stamp { color: var(--amber); font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; margin-bottom: 12px; }
footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  display: flex;
  justify-content: space-between;
  gap: 22px;
  font-size: 14px;
}
footer div { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 880px) {
  .hero, .product, .now-contact { grid-template-columns: 1fr; }
  .hero { align-items: start; }
  .hero-copy { padding-bottom: 0; }
  .cover-mosaic { grid-template-columns: repeat(4, 1fr); }
  .cover-mosaic img:nth-child(n) { transform: none; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .proof { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .shell, .product, .band, footer { width: calc(100% - 28px); max-width: 1180px; overflow: hidden; }
  header { align-items: flex-start; flex-direction: column; }
  nav { flex-wrap: wrap; row-gap: 8px; }
  .hero { padding-top: 28px; gap: 28px; }
  h1 { font-size: clamp(34px, 10vw, 44px); letter-spacing: -0.018em; }
  h2 { font-size: clamp(28px, 9vw, 40px); }
  h1, h2, h3, p { max-width: min(330px, 100%); }
  .lead, .product-copy { max-width: min(330px, 100%); }
  .cover-mosaic { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cover-mosaic, .gallery-grid { width: min(330px, 100%); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  figcaption { white-space: normal; overflow-wrap: anywhere; }
  .proof { grid-template-columns: 1fr; }
  .proof article { min-height: auto; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}