/* v11 route bridge: keep every public route in the Tommy Tang dark studio world. */
:root {
  --route-bg: #0b0d0e;
  --route-panel: #121617;
  --route-panel-2: #171b1c;
  --route-paper: #f1eee7;
  --route-muted: #9aa19a;
  --route-soft: #c7cec6;
  --route-line: rgba(241,238,231,.16);
  --route-coral: #ff5a4f;
  --route-lime: #c9ef72;
  --route-blue: #8da8ff;
  --route-serif: "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --route-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --route-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

body.route-page,
body.route-classic {
  margin: 0;
  overflow-x: hidden;
  border-top: 3px solid var(--route-coral);
  color: var(--route-paper);
  background: var(--route-bg);
  font-family: var(--route-sans);
}
body.route-page *, body.route-classic * { box-sizing: border-box; }
body.route-page a, body.route-classic a { color: inherit; }
body.route-page .site-header, body.route-classic .site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--route-line); background: rgba(11,13,14,.9); backdrop-filter: blur(18px); }
body.route-page .site-header__inner { width: min(1320px, calc(100% - 64px)); min-height: 76px; }
body.route-page .wordmark { color: var(--route-paper); font: 600 17px var(--route-sans); letter-spacing: .02em; }
body.route-page .wordmark em { color: var(--route-coral); }
body.route-page .wordmark sup { color: #89918a; }
body.route-page .site-nav { color: #b8bdb7; font: 11px var(--route-mono); letter-spacing: .02em; }
body.route-page .site-nav a:hover, body.route-page .site-nav a[aria-current="page"] { color: var(--route-coral); }
body.route-page .language-button, body.route-page .menu-button { border-radius: 0; border-color: var(--route-line); color: var(--route-paper); background: transparent; font: 10px var(--route-mono); }
body.route-page .page-hero { padding: 112px 0 104px; border-bottom: 1px solid var(--route-line); background: var(--route-bg); }
body.route-page .route-shell { width: min(1320px, calc(100% - 64px)); }
body.route-page .page-hero h1 { max-width: 900px; color: var(--route-paper); font: 600 clamp(50px, 7vw, 92px)/.96 var(--route-sans); letter-spacing: -.08em; }
body.route-page .page-hero h1 em { color: var(--route-coral); font-style: normal; }
body.route-page .eyebrow { color: var(--route-coral); font: 10px var(--route-mono); letter-spacing: .16em; }
body.route-page .page-hero__grid { margin-top: 34px; }
body.route-page .page-hero__lead { color: #aab1aa; font-size: 16px; line-height: 1.85; }
body.route-page .page-hero__aside { border-left-color: var(--route-coral); color: #8f9790; font: 11px/1.7 var(--route-mono); }
body.route-page .section { padding: 104px 0; border-bottom-color: var(--route-line); background: var(--route-bg); }
body.route-page .section--paper { color: var(--route-paper); border-color: var(--route-line); background: var(--route-panel); }
body.route-page .section__head h2, body.route-page .section h2 { color: var(--route-paper); font-family: var(--route-serif); }
body.route-page .section__head p { color: var(--route-muted); font-size: 13px; line-height: 1.75; }
body.route-page .card, body.route-page .matrix__item, body.route-page .timeline__step, body.route-page .price-card, body.route-page .approval__note { border-color: var(--route-line); background: var(--route-panel); }
body.route-page .card:hover, body.route-page .price-card:hover { border-color: var(--route-coral); }
body.route-page .card__index, body.route-page .timeline__day, body.route-page .matrix__number, body.route-page .price-card__kicker { color: var(--route-coral); }
body.route-page .card h3, body.route-page .timeline__step h3, body.route-page .price-card h3 { color: var(--route-paper); font-family: var(--route-serif); }
body.route-page .card p, body.route-page .timeline__step p, body.route-page .price-card p, body.route-page .matrix__item p { color: var(--route-muted); }
body.route-page .tag { border-color: var(--route-line); border-radius: 0; color: var(--route-soft); font: 9px var(--route-mono); }
body.route-page .price-card--featured { color: var(--route-bg); border-color: var(--route-coral); background: var(--route-coral); }
body.route-page .price-card--featured h3, body.route-page .price-card--featured p, body.route-page .price-card--featured ul { color: var(--route-bg); }
body.route-page .approval__note { color: var(--route-lime); border-color: var(--route-lime); }
body.route-page .approval__list li { border-color: var(--route-line); }
body.route-page .approval__list span { color: var(--route-muted); }
body.route-page .lab-console { border-color: var(--route-line); background: var(--route-panel); box-shadow: 10px 10px 0 rgba(255,90,79,.22); }
body.route-page .lab-console__bar { border-color: var(--route-line); color: #8f9790; font: 10px var(--route-mono); }
body.route-page .lab-console__dot { background: var(--route-lime); }
body.route-page .lab-console__input { border-color: var(--route-line); }
body.route-page .lab-console label { color: #8f9790; font: 9px var(--route-mono); }
body.route-page .lab-console select, body.route-page .lab-console textarea { border-color: var(--route-line) !important; border-radius: 0; color: var(--route-paper) !important; background: #0c0f10 !important; }
body.route-page .lab-console__output pre { color: var(--route-lime); font: 11px/1.75 var(--route-mono); }
body.route-page .button--acid { border-radius: 0; color: #fff; background: var(--route-coral); border-color: var(--route-coral); }
body.route-page .disclosure { color: #7f8780; font: 10px/1.65 var(--route-mono); }
body.route-page .site-footer { border-top: 1px solid var(--route-line); color: #89918a; background: #080a0b; }
body.route-page .site-footer__brand { color: var(--route-paper); }
body.route-page .site-footer__links a:hover { color: var(--route-coral); }

/* The classic about/contact pages use a different HTML vocabulary, but the same visual system. */
body.route-classic .wrap { width: min(1320px, calc(100% - 64px)); }
body.route-classic .site-header { border-bottom: 1px solid var(--route-line); }
body.route-classic .wordmark-mark { color: #fff; border-radius: 0; background: var(--route-coral); transform: rotate(-4deg); }
body.route-classic .wordmark-mark span { color: #fff; }
body.route-classic .wordmark-copy strong { color: var(--route-paper); }
body.route-classic .wordmark-copy small { color: #89918a; }
body.route-classic .desktop-nav a, body.route-classic .mobile-nav a, body.route-classic .lang-toggle { color: #b8bdb7; }
body.route-classic .desktop-nav a:hover, body.route-classic .mobile-nav a:hover, body.route-classic .lang-toggle:hover { color: var(--route-coral); }
body.route-classic .button-outline { border-color: rgba(241,238,231,.35); border-radius: 0; color: var(--route-paper); background: transparent; }
body.route-classic .button-outline:hover { border-color: var(--route-coral); color: #fff; background: var(--route-coral); }
body.route-classic .page-hero, body.route-classic .inner-page-hero { min-height: 0; padding: 112px 0 104px; border-bottom: 1px solid var(--route-line); background: var(--route-bg); }
body.route-classic .page-hero-grid, body.route-classic .hero-layout { grid-template-columns: minmax(0,1fr) minmax(300px,.55fr); gap: 70px; align-items: end; }
body.route-classic .page-hero h1, body.route-classic .hero h1 { max-width: 850px; color: var(--route-paper); font: 600 clamp(50px, 7vw, 92px)/.96 var(--route-sans); letter-spacing: -.08em; }
body.route-classic .page-hero h1 em, body.route-classic .hero h1 em { color: var(--route-coral); font-style: normal; }
body.route-classic .eyebrow, body.route-classic .route-kicker { color: var(--route-coral); font: 10px var(--route-mono); letter-spacing: .16em; }
body.route-classic .page-hero-lede { max-width: 650px; color: #aab1aa; font-size: 16px; line-height: 1.85; }
body.route-classic .page-hero-aside { border-left: 1px solid var(--route-coral); border-radius: 0; color: #8f9790; background: transparent; box-shadow: none; font: 11px/1.7 var(--route-mono); }
body.route-classic .section-pad, body.route-classic .route-section { padding: 104px 0; border-bottom: 1px solid var(--route-line); background: var(--route-bg); }
body.route-classic .route-section.alt { background: var(--route-panel); }
body.route-classic .route-title { grid-template-columns: minmax(0,1fr) .65fr; gap: 50px; align-items: end; }
body.route-classic .route-title h2 { color: var(--route-paper); font: 500 clamp(40px, 5.4vw, 76px)/.98 var(--route-serif); letter-spacing: -.075em; }
body.route-classic .route-title .accent { color: var(--route-coral); }
body.route-classic .route-title > p { color: var(--route-muted); font-size: 14px; line-height: 1.8; }
body.route-classic .matrix { border-top-color: var(--route-line); }
body.route-classic .matrix-card { min-height: 300px; border-color: var(--route-line); border-radius: 0; background: var(--route-panel); box-shadow: none; }
body.route-classic .matrix-card:hover { border-color: var(--route-coral); background: var(--route-panel-2); box-shadow: 8px 8px 0 rgba(255,90,79,.18); }
body.route-classic .matrix-card b { color: var(--route-coral); font: 10px var(--route-mono); }
body.route-classic .matrix-card h3 { color: var(--route-paper); font-family: var(--route-serif); }
body.route-classic .matrix-card p, body.route-classic .matrix-card li { color: var(--route-muted); }
body.route-classic .proof-ladder { border-top-color: var(--route-line); }
body.route-classic .proof-row { border-color: var(--route-line); }
body.route-classic .proof-row strong { color: var(--route-paper); }
body.route-classic .proof-row span, body.route-classic .proof-row small { color: var(--route-muted); }
body.route-classic .simple-form { border-color: var(--route-line); border-radius: 0; background: var(--route-panel); box-shadow: 10px 10px 0 rgba(255,90,79,.18); }
body.route-classic .simple-form label { color: var(--route-soft); }
body.route-classic .simple-form input, body.route-classic .simple-form textarea, body.route-classic .simple-form select { border-color: var(--route-line); border-radius: 0; color: var(--route-paper); background: #0c0f10; }
body.route-classic .simple-form input:focus, body.route-classic .simple-form textarea:focus, body.route-classic .simple-form select:focus { border-color: var(--route-coral); box-shadow: 0 0 0 3px rgba(255,90,79,.12); }
body.route-classic .contact-card { border-color: var(--route-line); border-radius: 0; color: var(--route-paper); background: var(--route-panel); box-shadow: none; }
body.route-classic .contact-card h2 { color: var(--route-paper); font-family: var(--route-serif); }
body.route-classic .contact-card p { color: var(--route-muted); }
body.route-classic .contact-card .accent { color: var(--route-coral); }
body.route-classic .button-primary { border-radius: 0; color: #fff; background: var(--route-coral); box-shadow: 7px 7px 0 rgba(255,90,79,.2); }
body.route-classic .site-footer { border-top: 1px solid var(--route-line); color: #89918a; background: #080a0b; }
body.route-classic .footer-brand p, body.route-classic .footer-grid p, body.route-classic .footer-grid a, body.route-classic .footer-bottom { color: #89918a; }
body.route-classic .footer-label { color: #ff8d84; }

@media (max-width: 820px) {
  body.route-page .route-shell, body.route-classic .wrap { width: min(100% - 34px, 600px); }
  body.route-page .site-nav { top: 68px; background: rgba(11,13,14,.98); }
  body.route-page .page-hero, body.route-classic .page-hero, body.route-classic .inner-page-hero { padding: 76px 0 74px; }
  body.route-page .page-hero h1, body.route-classic .page-hero h1, body.route-classic .hero h1 { font-size: clamp(43px, 12vw, 64px); }
  body.route-page .page-hero__grid, body.route-classic .page-hero-grid, body.route-classic .hero-layout, body.route-classic .route-title { grid-template-columns: 1fr; gap: 24px; }
  body.route-page .section, body.route-classic .section-pad, body.route-classic .route-section { padding: 76px 0; }
  body.route-page .section__head, body.route-classic .route-title { display: block; }
  body.route-page .section__head p, body.route-classic .route-title > p { margin-top: 18px; }
  body.route-page .card-grid, body.route-page .pricing-grid, body.route-classic .matrix { grid-template-columns: 1fr; }
  body.route-page .lab-console__body { grid-template-columns: 1fr; }
  body.route-page .lab-console__input { border-right: 0; border-bottom: 1px solid var(--route-line); }
  body.route-classic .matrix-card { min-height: 0; }
  body.route-classic .simple-form { padding: 20px; }
}
