/* ============================================================================
   tikit.live — City landing / directory ([tikit_city])
   Reuses the .tk-* card + grid system from brand.css; adds only the hero and
   per-page rhythm.
   ========================================================================== */

.tkc { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.tkc-hero {
  text-align: center;
  padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 44px);
}
.tkc-eyebrow {
  font-family: var(--tk-font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tk-amber);
}
.tkc-h1 {
  font-family: var(--tk-font-display);
  font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.02; margin: 14px 0 0; color: var(--tk-ink);
}
.tkc-lead {
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  color: var(--tk-muted); max-width: 54ch; margin: 18px auto 0; line-height: 1.55;
}
.tkc-hero .tk-hero-cta { margin-top: 26px; }

.tkc-sec { padding: clamp(30px, 4vw, 48px) 0; }
.tkc-sec + .tkc-sec { border-top: 1px solid var(--tk-line); }
.tkc-sechead { margin-bottom: 22px; }
.tkc-kicker {
  font-family: var(--tk-font-mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tk-amber); display: block; margin-bottom: 6px;
}
.tkc-sechead h2 {
  font-family: var(--tk-font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin: 0; color: var(--tk-ink);
}
.tkc-sechead p { margin: 6px 0 0; color: var(--tk-muted); }

.tkc-cta { text-align: center; padding: clamp(40px, 6vw, 72px) 0; }
.tkc-cta h2 { font-family: var(--tk-font-display); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 10px; color: var(--tk-ink); }
.tkc-cta p { color: var(--tk-muted); margin: 0 0 22px; }