/* ==========================================================================
   trevorheshka.com — COMPACT home page mockup (2026-10-03)
   Loaded after the live style.css. Only targets thc-* marker classes that
   _tools/build.py appends to the live bundle. No behaviour is changed.
   ========================================================================== */

/* ---------- Nav: 64px -> 56px ---------- */
.thc-nav { height: 56px !important; }

/* ---------- Hero: denser, terminal beside copy, above the fold ---------- */
.thc-hero { padding-top: 64px !important; padding-bottom: 20px !important; }
.thc-pills { margin-top: 12px !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px !important; }
.thc-h1 { margin-top: 14px !important; }
.thc-h1-main { font-size: 13vw !important; }
.thc-h1-sub { margin-top: 8px !important; font-size: 24px !important; }
.thc-h1-sub br { display: none; }
.thc-h1-sub > span + br + span::before { content: " / "; font-style: normal; color: rgba(255,255,255,.25); }
.thc-h1-tags { margin-top: 8px !important; }
.thc-intro { margin-top: 14px !important; padding-top: 14px !important; gap: 14px !important; }
.thc-intro-p { font-size: 15px !important; line-height: 1.5 !important; }
.thc-cta { padding: 10px 18px !important; }
.thc-hero-right { margin-top: 8px !important; }
/* mobile: drop the duplicate TH / SSL badge next to the CTA (brand already in nav + headline) */
@media (max-width: 639px) { .thc-intro > div:last-child > div:last-child { display: none !important; } }

/* terminal: same component, shorter window + slightly smaller type */
/* fixed height sized to the full 893-char script, so the hero no longer grows/shrinks while it types */
.thc-term-body { min-height: 512px !important; max-height: 512px !important; padding: 14px 14px 0 !important; }
.thc-term-text { max-height: 464px !important; font-size: 10px !important; line-height: 1.5 !important; }

@media (min-width: 768px) {
  .thc-h1-main { font-size: 64px !important; }
  .thc-h1-sub { font-size: 28px !important; }
  .thc-term-body { min-height: 424px !important; max-height: 424px !important; padding: 16px 18px 0 !important; }
  .thc-term-text { max-height: 376px !important; font-size: 10.5px !important; line-height: 1.5 !important; }
}
@media (min-width: 1024px) {
  .thc-hero { padding-top: 72px !important; padding-bottom: 24px !important; }
  .thc-hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important; gap: 40px !important; align-items: center !important; }
  .thc-hero-left, .thc-hero-right { grid-column: auto !important; }
  .thc-hero-right { margin: 0 !important; }
  .thc-h1-main { font-size: 72px !important; }
}
@media (min-width: 1280px) {
  .thc-h1-main { font-size: 84px !important; }
}

/* ---------- Marquee: thinner ---------- */
.thc-marquee { padding-top: 6px !important; padding-bottom: 6px !important; }
.thc-marquee span { font-size: 11px !important; }

/* ---------- Work / live previews ---------- */
.thc-work { padding-top: 28px !important; padding-bottom: 32px !important; }
.thc-work-head { margin-bottom: 10px !important; gap: 12px !important; }
.thc-work-label { margin-bottom: 6px !important; }
.thc-work-h2 { font-size: 30px !important; line-height: 1 !important; }
.thc-work-h2 br { display: none; }
.thc-work-h2 > span::before { content: " — "; color: rgba(255,255,255,.25); font-style: normal; }
.thc-filter { padding: 6px 14px !important; font-size: 11px !important; }
.thc-count { margin-bottom: 12px !important; }

.thc-grid { gap: 16px !important; }
.thc-card > div { border-radius: 18px !important; }
.thc-prev { height: 236px !important; }
.thc-prev-img { height: 194px !important; }
.thc-card-body { padding: 14px 16px 16px !important; }
.thc-card-body > div:first-child { margin-bottom: 4px !important; }
.thc-card-title { font-size: 22px !important; }
.thc-card-type { margin-bottom: 6px !important; font-size: 12px !important; }
.thc-card-desc { margin-bottom: 10px !important; font-size: 13px !important; line-height: 1.5 !important; }
.thc-card-chips { margin-bottom: 12px !important; gap: 6px !important; }
.thc-card-chips > span { padding: 2px 10px !important; font-size: 10.5px !important; }
.thc-card-body > div:last-child a, .thc-card-body > div:last-child button { padding-top: 7px !important; padding-bottom: 7px !important; }
.thc-card-body > div:last-child button { height: 32px !important; width: 32px !important; padding: 0 !important; }
.thc-strip { margin-top: 16px !important; padding: 8px 16px !important; }
.thc-strip span { font-size: 11px !important; }

/* mobile: previews become a swipeable row instead of 6 stacked cards */
@media (max-width: 767px) {
  .thc-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
              margin: 0 -24px; padding: 4px 24px 10px; scroll-padding-left: 24px; }
  .thc-grid > .thc-card { flex: 0 0 86%; scroll-snap-align: start; }
  .thc-count > div::after { content: " | SWIPE →"; color: rgba(255,255,255,.45); }
}
@media (min-width: 768px) {
  .thc-work-head { flex-direction: row !important; align-items: flex-end !important; }
  .thc-work-h2 { font-size: 36px !important; }
}
@media (min-width: 1024px) {
  .thc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
}

/* ---------- Capabilities: condensed cards, items as chips ---------- */
.thc-pad { padding-top: 36px !important; padding-bottom: 36px !important; }
.thc-cap-head { margin-bottom: 18px !important; gap: 10px !important; }
.thc-cap-head > div > div:first-child { margin-bottom: 8px !important; }
.thc-cap-h2 { font-size: 30px !important; line-height: 1 !important; }
.thc-cap-h2 br { display: none; }
.thc-cap-p { font-size: 14px !important; line-height: 1.55 !important; }
.thc-cap-card { padding: 16px 18px !important; }
.thc-cap-top { margin-bottom: 10px !important; }
.thc-cap-top > div:first-child { height: 30px !important; width: 30px !important; }
.thc-h3 { font-size: 22px !important; }
.thc-cap-card p { margin-top: 6px !important; font-size: 12.5px !important; line-height: 1.5 !important; }
.thc-cap-list { margin-top: 12px !important; padding-top: 12px !important; display: flex; flex-wrap: wrap; gap: 6px; }
.thc-cap-list > * { margin: 0 !important; padding: 2px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px;
                    background: rgba(255,255,255,.03); font-size: 11.5px !important; gap: 6px !important; }
@media (min-width: 768px) {
  .thc-cap-h2 { font-size: 40px !important; }
  .thc-cap-head { grid-template-columns: 0.8fr 1.2fr !important; align-items: end; }
}

/* ---------- Process & proof: one row instead of a tall sticky column + stacked cards ---------- */
.thc-proc { gap: 18px !important; }
.thc-proc-left { position: static !important; }
.thc-proc-h2 { margin-top: 8px !important; font-size: 34px !important; line-height: 1 !important; }
.thc-proc-h2 br { display: none; }
.thc-proc-h2 > span { margin: 0 .22em; }
.thc-proc-p { margin-top: 10px !important; font-size: 14px !important; }
.thc-proc-steps { margin-top: 12px !important; gap: 8px !important; }
.thc-proc-steps > div { padding: 8px 12px !important; }
.thc-proc-right { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.thc-proc-right > * { margin: 0 !important; }
.thc-proof { padding: 14px 16px !important; border-radius: 16px !important; }
.thc-proof-n { font-size: 32px !important; }
.thc-proof > div:nth-child(2) { margin-top: 8px !important; font-size: 11px !important; letter-spacing: .12em !important; }
.thc-proof > div:nth-child(3) { margin-top: 4px !important; font-size: 12px !important; line-height: 1.45 !important; }
.thc-proof > svg { top: 14px !important; right: 14px !important; }
.thc-proof:nth-child(3) .thc-proof-n { font-size: 24px !important; line-height: 1.33 !important; }
.thc-verified { grid-column: 1 / -1; padding: 12px 16px !important; border-radius: 16px !important; }
.thc-verified > div > div:last-child > div:last-child { margin-top: 4px !important; font-size: 13px !important; line-height: 1.5 !important; }
@media (max-width: 767px) {
  .thc-proc-right > .thc-proof:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .thc-proc { grid-template-columns: 0.75fr 1.25fr !important; align-items: center; }
  .thc-proc-h2 { font-size: 44px !important; }
}
@media (min-width: 1024px) {
  .thc-proc-right { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ---------- Contact footer: smaller wordmark, tighter form ---------- */
.thc-foot-stack { gap: 18px !important; }
.thc-foot-stack > div:first-child { gap: 10px !important; }
.thc-foot-h2 { font-size: 13vw !important; line-height: .9 !important; }
.thc-foot-grid { gap: 20px !important; padding-top: 20px !important; }
.thc-foot-left > * + * { margin-top: 14px !important; }
.thc-foot-p { margin-top: 10px !important; font-size: 15px !important; line-height: 1.5 !important; }
.thc-foot-left a { padding: 10px 12px !important; }
.thc-foot-stats { gap: 10px !important; }
.thc-foot-stats > div { padding: 12px 14px !important; }
.thc-foot-stats > div > div:last-child { margin-top: 4px !important; }
.thc-form-card { padding: 18px !important; }
.thc-form-head { margin-bottom: 12px !important; }
.thc-form > * + * { margin-top: 10px !important; }
.thc-form .space-y-2 > * + * { margin-top: 4px !important; }
.thc-form .gap-4 { gap: 10px !important; }
.thc-form input, .thc-form select { padding-top: 8px !important; padding-bottom: 8px !important; }
.thc-form textarea { height: 76px !important; padding-top: 8px !important; }
.thc-form button[type="submit"] { padding-top: 11px !important; padding-bottom: 11px !important; }
@media (min-width: 768px) {
  .thc-foot-h2 { font-size: 64px !important; }
  .thc-foot-grid { align-items: start; }
}