/* toolforge.ai — Home v2 (editorial)
   Source: claude.ai/design project 716b75b2, "Toolforge Home v2.dc.html",
   green accent swapped for Signal Red #C8102E (PMS 186 C) per instruction. */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ==== design-system tokens (verbatim from tokens/colors|typography|spacing|motion.css) ==== */
:root {
  /* base — papers */
  --paper-100: #F4F2EC; /* page */
  --paper-50:  #FCFBF7; /* cards / table surfaces */
  --white:     #FFFFFF; /* card hover raise */
  --tint-red:  #F5E7E3; /* highlighted data row */
  --paper-soft: #DDDACB; /* mono details on ink */
  --paper-muted:#B7B5A8; /* body text on ink */

  /* base — inks */
  --ink-900: #1A1915; /* primary text, ink panels, solid buttons */
  --ink-600: #52514A; /* body / secondary text */
  --ink-400: #6B6A60; /* nav links, muted */
  --ink-300: #8A887C; /* faint (footer, table chrome) */

  /* base — lines */
  --line-200: #DEDBD0; /* hairline borders */
  --line-100: #EFEDE4; /* table row rules */
  --line-strong: #C9C6B9; /* ghost button borders */
  --rule: #E9E6DC;    /* ruled-paper background lines */

  /* base — signal reds (the brand anchor) */
  --red-600: #C8102E; /* Signal Red · PMS 186 C · anchor: labels, CTAs, emphasis */
  --red-800: #9A0C23; /* hover / pressed */
  --red-300: #E06C79; /* accent on ink panels */

  /* semantic */
  --surface-page: var(--paper-100);
  --surface-card: var(--paper-50);
  --surface-raise: var(--white);
  --surface-ink: var(--ink-900);
  --border-hairline: var(--line-200);
  --border-rule: var(--line-100);
  --border-strong: var(--line-strong);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-400);
  --text-faint: var(--ink-300);
  --text-on-ink: var(--paper-100);
  --text-on-ink-muted: var(--paper-muted);
  --text-on-accent: var(--paper-100);
  --accent: var(--red-600);
  --accent-strong: var(--red-800);
  --accent-on-ink: var(--red-300);
  --tint-accent: var(--tint-red);

  /* typography */
  --font-display: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --size-hero: 64px;     --lh-hero: 1.06;  --track-hero: -1.2px;
  --size-h2: 44px;       --lh-h2: 1.12;    --track-h2: -.8px;
  --size-h2-panel: 54px; --track-h2-panel: -1px;
  --size-h3: 24px;       --lh-h3: 1.25;
  --size-pull: 30px;     --lh-pull: 1.4;
  --size-body-lg: 19px;  --lh-body-lg: 1.65;
  --size-body: 18px;     --lh-body: 1.75;
  --size-small: 16px;    --lh-small: 1.62;
  --size-btn: 15px;
  --size-mono-label: 13px;
  --size-mono-nav: 13px;
  --size-mono-data: 13px;
  --size-mono-caption: 12.5px;

  /* spacing */
  --space-2: 8px; --space-3: 12px; --space-4: 14px; --space-5: 22px;
  --space-6: 26px; --space-7: 30px; --space-8: 44px; --space-10: 56px;
  --space-12: 80px; --space-16: 110px;
  --pad-page-x: 48px;
  --pad-nav: 22px 48px;
  --pad-card: 44px 40px 48px;
  --pad-btn: 16px 28px;

  /* motion */
  --dur-fast: .2s;
  --dur-med: .25s;
  --marquee-dur: 40s;

  /* legacy aliases (site classes below) */
  --cream: var(--paper-100);
  --paper: var(--paper-50);
  --ink: var(--ink-900);
  --body: var(--ink-600);
  --muted: var(--ink-400);
  --faint: var(--ink-300);
  --hair: var(--line-200);
  --hair-soft: var(--line-100);
  --border-mid: var(--line-strong);
  --red: var(--red-600);
  --red-dark: var(--red-800);
  --red-light: var(--red-300);
  --red-tint: var(--tint-red);
  --dark-body: var(--paper-muted);
  --dark-mono: var(--paper-soft);
  --serif: var(--font-display);
  --mono: var(--font-mono);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  min-height: 100vh;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
a[href^="tel:"] { white-space: nowrap; }

/* grid children may never force horizontal scroll */
.hero > *, .premise > *, .services > *, .engineer > *, .contact > * { min-width: 0; }

@keyframes tfMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- nav ---- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  border-bottom: 1px solid var(--hair);
}
.nav-logo { height: 28px; display: block; }
.nav-links {
  display: flex;
  gap: 32px;
  font: 400 13px var(--mono);
}
.nav-links a { color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--red); }
.nav-cta {
  background: var(--ink);
  color: var(--cream);
  font: 500 14px var(--mono);
  padding: 12px 22px;
  cursor: pointer;
  transition: background .2s;
}
.nav-cta:hover { background: var(--red); color: var(--cream); }

/* ---- hero ---- */
.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  border-bottom: 1px solid var(--hair);
}
.hero-copy { padding: 92px 64px 84px 48px; }
.kicker {
  font: 500 13px var(--mono);
  color: var(--red);
  margin-bottom: 34px;
  letter-spacing: .4px;
}
.hero h1 {
  margin: 0 0 30px;
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -1.2px;
  font-weight: 500;
  max-width: 760px;
  text-wrap: pretty;
}
.hero h1 em { color: var(--red); font-weight: 500; }
.hero-sub {
  margin: 0 0 44px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--body);
  max-width: 600px;
  text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 14px; align-items: center; }
.btn-primary {
  background: var(--red);
  color: var(--cream);
  font: 500 15px var(--mono);
  padding: 16px 28px;
  cursor: pointer;
  transition: background .2s;
  display: inline-block;
}
.btn-primary:hover { background: var(--red-dark); color: var(--cream); }
.btn-ghost {
  border: 1px solid var(--border-mid);
  color: var(--ink);
  font: 400 15px var(--mono);
  padding: 16px 28px;
  cursor: pointer;
  transition: all .2s;
  display: inline-block;
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); }

/* ---- market scan card ---- */
.hero-panel {
  border-left: 1px solid var(--hair);
  padding: 48px 48px 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: repeating-linear-gradient(0deg, transparent 0 27px, var(--rule) 27px 28px);
}
.scan { background: var(--paper); border: 1px solid var(--hair); }
.scan-head {
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hair);
  font: 500 11.5px var(--mono);
  color: var(--faint);
}
.scan-cols {
  display: grid;
  grid-template-columns: 44px 1fr 76px 70px;
  padding: 10px 20px 4px;
  font: 500 11px var(--mono);
  color: var(--faint);
  gap: 0 12px;
}
.scan-row {
  display: grid;
  grid-template-columns: 44px 1fr 76px 70px;
  padding: 9px 20px;
  font: 400 13px var(--mono);
  gap: 0 12px;
  color: var(--body);
  border-top: 1px solid var(--hair-soft);
}
.scan-row.you { color: var(--red); background: var(--red-tint); }
.scan-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--hair);
  font: 400 11.5px var(--mono);
  color: var(--faint);
}
.tr { text-align: right; }

/* ---- marquee ---- */
.marquee {
  border-bottom: 1px solid var(--hair);
  padding: 24px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: tfMarquee 40s linear infinite;
  align-items: center;
}
.marquee-track img {
  height: 28px;
  opacity: .4;
  transition: opacity .2s;
}
.marquee-track img:hover { opacity: .85; }

/* ---- premise ---- */
.premise {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 80px;
  padding: 110px 48px;
  border-bottom: 1px solid var(--hair);
}
.sect-label {
  font: 500 13px var(--mono);
  color: var(--red);
  margin-bottom: 22px;
}
.premise h2 {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -.8px;
  line-height: 1.12;
  position: sticky;
  top: 40px;
  text-wrap: pretty;
}
.premise-body {
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--body);
}
.premise-body p { margin: 0; }
.premise-body strong { color: var(--ink); font-weight: 500; }
.premise-body em { color: var(--red); }

/* ---- services ---- */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair);
  border-bottom: 1px solid var(--hair);
}
.services-intro { background: var(--cream); padding: 44px 40px 48px; }
.services-intro .sect-label { margin-bottom: 18px; }
.services-intro h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -.8px;
  line-height: 1.1;
}
.svc {
  background: var(--paper);
  padding: 44px 40px 48px;
  transition: background .25s;
}
.svc:hover { background: #FFFFFF; }
.svc-idx { font: 500 13px var(--mono); color: var(--red); margin-bottom: 22px; }
.svc h3 { margin: 0 0 12px; font-size: 24px; font-weight: 600; line-height: 1.25; }
.svc p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--body); }

/* ---- engineer ---- */
.engineer {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  padding: 110px 48px;
  align-items: center;
  border-bottom: 1px solid var(--hair);
}
.engineer img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  filter: grayscale(1);
}
.engineer .sect-label { margin-bottom: 24px; }
.engineer-lede {
  margin: 0 0 26px;
  font-size: 30px;
  line-height: 1.4;
  font-weight: 500;
  text-wrap: pretty;
}
.engineer-body {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--body);
  text-wrap: pretty;
}

/* ---- contact ---- */
.contact { display: grid; grid-template-columns: 1fr 1fr; }
.contact-img {
  width: 100%;
  height: 100%;
  min-height: 540px;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
}
.contact-panel {
  background: var(--ink);
  color: var(--cream);
  padding: 80px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.contact-panel .sect-label { color: var(--red-light); margin-bottom: 0; }
.contact-panel h2 {
  margin: 0;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.05;
}
.contact-panel p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--dark-body);
  max-width: 440px;
  text-wrap: pretty;
}
.contact-lines {
  font: 400 15px var(--mono);
  line-height: 2.1;
  color: var(--dark-mono);
}
.contact-lines a { color: var(--dark-mono); }
.contact-lines a:hover { color: var(--red-light); }
.contact-cta {
  background: var(--cream);
  color: var(--ink);
  font: 500 15px var(--mono);
  padding: 16px 26px;
  width: max-content;
  cursor: pointer;
  transition: all .2s;
  display: inline-block;
}
.contact-cta:hover { background: var(--red); color: var(--cream); }

/* ---- footer ---- */
.footer {
  display: flex;
  justify-content: space-between;
  padding: 26px 48px;
  font: 400 12.5px var(--mono);
  color: var(--faint);
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .hero h1 { font-size: 52px; }
  .premise, .engineer { gap: 48px; }
}
@media (max-width: 900px) {
  .nav { padding: 18px 24px; }
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 64px 24px 56px; }
  .hero h1 { font-size: 42px; }
  .hero-panel { border-left: none; border-top: 1px solid var(--hair); padding: 32px 24px; }
  .premise { grid-template-columns: 1fr; padding: 72px 24px; gap: 36px; }
  .premise h2 { position: static; font-size: 36px; }
  .services { grid-template-columns: 1fr; }
  .engineer { grid-template-columns: 1fr; padding: 72px 24px; gap: 40px; }
  .engineer img { max-width: 320px; margin: 0 auto; }
  .contact { grid-template-columns: 1fr; }
  .contact-img { min-height: 320px; }
  .contact-panel { padding: 56px 24px; }
  .contact-panel h2 { font-size: 40px; }
  .footer { padding: 22px 24px; flex-direction: column; gap: 6px; }
}
@media (max-width: 430px) {
  .scan-head { flex-wrap: wrap; gap: 2px 12px; padding: 12px 14px; }
  .scan-cols, .scan-row {
    grid-template-columns: 32px 1fr 52px 44px;
    gap: 0 8px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .scan-row { font-size: 12px; }
  .scan-foot { padding: 10px 14px; }
}