/* =============================================================================
 * TurnKey Venues — brand stylesheet
 * Derived from the founders' Luxury 3-page deck (2026).
 *
 * Palette is locked: deep navy bg, luxury gold accents, cream body text,
 * jewel-tone event-category cards. No deviations without a brand-kit update.
 * ============================================================================= */

:root {
  /* --- Core palette --- */
  /* 2026-06-11 (v2) — committed to the deck's actual pattern:
     pure-black base with translucent navy CELLS containing content.
     Every section gets a bordered cell so the page reads as a sequence
     of intentional containers instead of floating content on a void. */
  --tk-bg:            #000000;   /* page bg — pure black */
  --tk-bg-cell:       rgba(15, 34, 55, 0.55);   /* translucent navy cell */
  --tk-bg-cell-2:     rgba(20, 42, 67, 0.75);   /* solid-er cell variant */
  --tk-bg-cell-hover: rgba(28, 56, 87, 0.85);   /* hover state */
  --tk-bg-2:          #0a1929;   /* legacy alias — solid cell bg */
  --tk-bg-3:          #14283f;   /* legacy alias — hover/elevated */
  --tk-gold:          #d4af37;   /* luxury gold — wordmark, headlines, accents */
  --tk-gold-2:        #e6c34a;   /* gold hover / brighter */
  --tk-gold-dim:      #8c7a3a;   /* gold muted / borders at rest */
  --tk-fg:            #e8e8ec;   /* body text */
  --tk-fg-dim:        #a8a8b5;   /* secondary text */
  --tk-fg-muted:      #6e6e7a;   /* tertiary / captions */
  --tk-rule:          #2a2a3a;   /* hairlines and dividers */

  /* --- Event-category jewel tones (low saturation, lifted from deck) --- */
  --tk-cat-wedding:   #2d1f3a;   /* deep purple */
  --tk-cat-concert:   #1a2440;   /* navy blue */
  --tk-cat-community: #1d3a2e;   /* forest green */
  --tk-cat-corporate: #3a2d1f;   /* bronze */
  --tk-cat-private:   #252830;   /* slate */

  /* --- Typography --- */
  --tk-font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --tk-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tk-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* --- Layout tokens --- */
  --tk-max-w:        1240px;
  --tk-radius-sm:    4px;
  --tk-radius-md:    8px;
  --tk-radius-lg:    14px;
  --tk-shadow:       0 12px 40px rgba(0, 0, 0, 0.35);
}

/* --- Google Fonts (deferred load) ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Reset + base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--tk-bg);
  color: var(--tk-fg);
  font-family: var(--tk-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* The body now carries a faint architectural backdrop — radial vignettes
   suggest depth (dome, light source) without an image asset. The pure-black
   floor stays underneath, navy cells sit on top. */
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(63, 184, 198, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, 0.03) 0%, transparent 45%),
    var(--tk-bg);
  color: var(--tk-fg);
  overflow-x: hidden;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tk-gold); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--tk-gold-2); }

/* --- Typography hierarchy ------------------------------------------------- */
/* 2026-06-11: reduced display-headline sizes site-wide for a more refined,
   professional feel. Section headlines now fit on a single line at desktop
   widths instead of dominating the viewport. The hero wordmark stays big
   (it's the brand focal point) — only section-level h2/display-splits are
   scaled down. */
h1, h2, h3, h4, h5 {
  font-family: var(--tk-font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 0.5em;
  color: var(--tk-fg);
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; }
h4 { font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; }
p  { margin: 0 0 1em; }

/* The signature display split — white start, gold end (used for section
   headlines like "A TurnKey Solution For Unforgettable Events"). Sized
   down from clamp(3rem, 8vw, 6.5rem) so headlines fit on one line and
   feel more polished than billboard-loud. */
.tk-display-split {
  font-family: var(--tk-font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  font-size: clamp(1.75rem, 3.5vw, 2.85rem);
}
.tk-display-split .tk-gold { color: var(--tk-gold); }
.tk-display-split .tk-white { color: var(--tk-fg); }

/* Section label — small uppercase tracker above big headlines */
.tk-section-label {
  font-family: var(--tk-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tk-fg-dim);
  margin: 0 0 0.5rem;
}

/* --- Layout primitives --------------------------------------------------- */
.tk-container {
  max-width: var(--tk-max-w);
  margin: 0 auto;
  padding: 0 2rem;
}
.tk-section { padding: 4rem 0; position: relative; }
.tk-section--lg { padding: 6rem 0; }
/* Used by the first capability section so it tucks directly under the hero.
   Zero top padding + collapsed divider top margin = section title sits
   immediately under the hero's last line of copy, no negative gap. */
.tk-section--flush { padding-top: 0; }
.tk-section--flush .tk-section-divider { margin-top: 0; margin-bottom: 2.25rem; }

.tk-rule {
  border: 0;
  border-top: 1px solid var(--tk-gold-dim);
  margin: 3rem 0;
}
.tk-rule-thin {
  border: 0;
  border-top: 1px solid var(--tk-rule);
  margin: 2rem 0;
}

/* Sacred-geometry divider — Vesica Piscis flanked by horizontal rules.
   Replaces plain hr for a more symbolic section break. The SVG uses
   currentColor so it inherits the gold-dim from this wrapper. */
.tk-sacred-rule {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 3rem auto;
  color: var(--tk-gold-dim);
}
.tk-sacred-rule svg { width: 100%; height: auto; }

/* --- Buttons + CTAs ------------------------------------------------------ */
.tk-btn {
  position: relative;
  /* isolation: isolate establishes a new stacking context so the gold-sweep
     ::before can sit BEHIND the text without leaking behind the page bg. */
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--tk-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Bumped from 0.9rem 2rem so short labels like "INQUIRE" / "BOOK"
     don't crowd the button border (Shock's 2026-06-11 feedback). */
  padding: 0.95rem 2.5rem;
  min-width: 140px;
  border: 1.5px solid var(--tk-gold);
  border-radius: var(--tk-radius-sm);
  background: transparent;
  color: var(--tk-gold);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-decoration: none;
  overflow: hidden;
}
.tk-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, 0.35),
              transparent);
  transition: left 0.6s ease;
  z-index: -1;   /* push BEHIND the button text so the sweep doesn't hide it */
}
.tk-btn:hover {
  background: var(--tk-gold);
  color: var(--tk-bg);
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.35),
              0 0 0 1px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}
.tk-btn:hover::before { left: 100%; }
.tk-btn:active { transform: translateY(0); }
.tk-btn--solid {
  background: var(--tk-gold);
  color: var(--tk-bg);
}
.tk-btn--solid:hover {
  background: var(--tk-gold-2);
  color: var(--tk-bg);
}

/* --- Header / navigation ------------------------------------------------- */
.tk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tk-rule);
}
.tk-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  max-width: var(--tk-max-w);
  margin: 0 auto;
}
.tk-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tk-brand__mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.tk-brand__wordmark {
  font-family: var(--tk-font-display);
  letter-spacing: 0.2em;
  font-size: 1.25rem;
  color: var(--tk-gold);
  text-decoration: none;
}
.tk-brand__wordmark .tk-sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--tk-fg-dim);
  margin-top: -0.15em;
}
.tk-nav { display: flex; gap: 2rem; align-items: center; }
.tk-nav a {
  position: relative;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tk-fg-dim);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}
.tk-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  height: 1px;
  width: 0;
  background: var(--tk-gold);
  transform: translateX(-50%);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tk-nav a:hover, .tk-nav a.is-active {
  color: var(--tk-gold);
}
.tk-nav a:hover::after, .tk-nav a.is-active::after { width: 100%; }
/* Nav link's button (Inquire CTA) shouldn't get the underline */
.tk-nav a.tk-btn::after { display: none; }
/* And the nav-button hover must invert text to dark (the generic nav-link
   hover above was overriding .tk-btn:hover because of higher specificity,
   leaving gold text on gold background — invisible). This restores
   readable dark text on the gold fill. */
.tk-nav a.tk-btn:hover {
  color: var(--tk-bg);
}
.tk-brand:hover .tk-brand__wordmark { color: var(--tk-gold-2); }
.tk-brand__wordmark { transition: color 0.25s ease; }
.tk-nav__cta { margin-left: 1rem; }

/* Mobile nav toggle */
.tk-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--tk-gold-dim);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-gold);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 1.25rem;
}

/* --- Hero --------------------------------------------------------------- */
/* Reworked 2026-06-11 to match the deck's horizontal layout:
   [ blueprint key ][ wordmark + sub + divider + tagline + lede ][ callout ]
   Plus a faint radial-gradient backdrop that suggests the deck's
   architectural-dome watermark without a heavy background image. */
.tk-hero {
  position: relative;
  /* 2rem bottom padding gives the lede text breathing room before the
     gold border closes the hero band. Was 0 which sat the gold rule
     right against the lede. */
  padding: 5rem 0 2rem;
  overflow: hidden;
  background: #000000;
  /* Clean gold border closes the hero band (proof stats section was
     removed). Hairline accent that anchors the bottom edge so the hero
     feels intentionally framed instead of bleeding into the body. */
  border-bottom: 1px solid var(--tk-gold);
  box-shadow: 0 1px 0 0 rgba(212, 175, 55, 0.15),
              0 8px 32px -4px rgba(0, 0, 0, 0.6);
}
/* Removed the bottom blue cross-fade gradient — was painting a darker
   navy band at the very bottom of the hero that read as "gap" before the
   next section. The hero is black, the body is black-on-navy gradient,
   the boundary is clean without the fade. */
/* Architectural depth — radial vignettes only. The sacred geometry itself
   lives in .tk-hero__mandala behind the wordmark (so it can rotate). */
.tk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 60%, rgba(63, 184, 198, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(212, 175, 55, 0.07) 0%, transparent 60%);
  pointer-events: none;
}
/* Faint giant wordmark watermark in the bg, like the deck's.
   Centered vertically + slightly smaller so its top/bottom edges align
   with the foreground wordmark area. Was anchored bottom-30%-with-translate
   which made it extend ~128px BELOW the lede line, creating the perceived
   "gap" between hero and next section. */
.tk-hero::after {
  content: 'TURNKEY';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--tk-font-display);
  font-size: clamp(6rem, 14vw, 14rem);
  letter-spacing: 0.15em;
  color: rgba(63, 184, 198, 0.10);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}
.tk-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
}
.tk-hero__key {
  width: 100%;
  max-width: 280px;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.5s ease;
  will-change: transform, filter;
  /* Idle drop-shadow so the key always has subtle glow on the page */
  filter: drop-shadow(0 0 12px rgba(127, 229, 238, 0.2))
          drop-shadow(0 0 28px rgba(63, 184, 198, 0.12));
}
.tk-hero__key:hover {
  transform: rotate(-3deg) translateY(-6px) scale(1.06);
  filter: drop-shadow(0 0 24px rgba(127, 229, 238, 0.55))
          drop-shadow(0 0 48px rgba(63, 184, 198, 0.4))
          drop-shadow(0 0 72px rgba(63, 184, 198, 0.2));
}
.tk-hero__key:hover .tk-key-glow ellipse:first-child { opacity: 0.18; }
.tk-hero__key:hover .tk-key-circuit { animation: tkCircuitPulse 1.6s ease-in-out infinite; }
.tk-hero__key:hover .tk-key-pulse circle { animation: tkPulseDot 1.2s ease-in-out infinite; }

/* ---- Mandala behind the wordmark (the symbol that maps to the business) ---- */
/* Sits absolutely positioned behind the wordmark column. Slow constant
   rotation gives the page a heartbeat without being distracting. */
.tk-hero__mandala {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(420px, 55vw, 720px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  color: rgba(63, 184, 198, 0.18);   /* tints SVG via currentColor */
  pointer-events: none;
  z-index: 1;
  animation: tkMandalaSpin 120s linear infinite;
  transition: color 0.6s ease;
}
.tk-hero:hover .tk-hero__mandala {
  color: rgba(127, 229, 238, 0.26);
}

/* Pull the wordmark + copy to sit ON TOP of the mandala */
.tk-hero__copy {
  position: relative;
  z-index: 3;
}
.tk-hero__copy { text-align: left; }
.tk-hero__wordmark {
  font-family: var(--tk-font-display);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  letter-spacing: 0.22em;
  color: var(--tk-gold);
  margin: 0;
  line-height: 0.9;
}
.tk-hero__sub {
  font-family: var(--tk-font-display);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  letter-spacing: 0.5em;
  color: var(--tk-fg);
  margin: 0.4rem 0 0;
}
.tk-hero__divider {
  margin: 1.5rem 0 1rem;
  width: 60px;
  border: 0;
  border-top: 1px solid var(--tk-gold);
}
.tk-hero__tagline {
  margin: 0 0 0.25rem;
  font-family: var(--tk-font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--tk-gold);
  text-transform: uppercase;
}
.tk-hero__lede {
  font-size: 0.92rem;
  color: var(--tk-fg-dim);
  letter-spacing: 0.05em;
  margin: 0;
}

/* "Immediate Revenue Generation" callout */
.tk-callout {
  display: inline-block;
  margin-top: 2rem;
  border: 1px solid var(--tk-gold);
  padding: 0.85rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--tk-fg);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Link variant (used on homepage hero) — cursor pointer + glow + lift on hover */
.tk-callout--link { cursor: pointer; }
.tk-callout--link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
              rgba(212, 175, 55, 0.18) 0%,
              transparent 50%,
              rgba(63, 184, 198, 0.12) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
.tk-callout--link:hover {
  border-color: var(--tk-gold-2);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.3),
              0 0 0 1px rgba(212, 175, 55, 0.55),
              0 0 28px -6px rgba(212, 175, 55, 0.45);
}
.tk-callout--link:hover::before { opacity: 1; }
.tk-callout--link:hover .tk-callout__label { color: var(--tk-gold-2); }
.tk-callout__label, .tk-callout__value { transition: color 0.25s ease; }
.tk-callout__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--tk-gold);
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--tk-gold-dim);
  margin-bottom: 0.5rem;
}
.tk-callout__value {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--tk-fg);
  text-transform: uppercase;
}

/* --- Section dividers with centered text ----------------------------- */
.tk-section-divider {
  position: relative;
  text-align: center;
  margin: 3rem 0;
}
.tk-section-divider::before,
.tk-section-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--tk-gold-dim);
}
.tk-section-divider::before { left: 0; }
.tk-section-divider::after { right: 0; }
.tk-section-divider__text {
  display: inline-block;
  padding: 0 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tk-gold);
}

/* --- Capability card grid ------------------------------------------- */
.tk-cards-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.tk-cards-row--4 { grid-template-columns: repeat(4, 1fr); margin-top: 1rem; }

.tk-cap-card {
  text-align: center;
  padding: 1rem 0.5rem;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: default;
}
.tk-cap-card:hover { transform: translateY(-3px); }
.tk-cap-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--tk-gold);
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  font-family: var(--tk-font-display);
  color: var(--tk-gold);
  font-size: 1rem;
  letter-spacing: 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
}
.tk-cap-card:hover .tk-cap-card__icon {
  border-color: var(--tk-gold-2);
  color: var(--tk-gold-2);
  box-shadow: 0 0 18px 2px rgba(212, 175, 55, 0.35),
              inset 0 0 8px rgba(212, 175, 55, 0.15);
  transform: scale(1.08);
}
.tk-cap-card__title {
  font-family: var(--tk-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tk-fg);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.tk-cap-card__sub {
  font-size: 0.78rem;
  color: var(--tk-fg-dim);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* "Your property. Your vision." pull-quote band — flanked by minor caps */
.tk-band {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: center;
  margin: 2rem 0 3rem;
}
.tk-band__quote {
  font-family: var(--tk-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--tk-gold);
}
.tk-band__quote .tk-white { color: var(--tk-fg); }

/* --- Event category cards (jewel-tone) ----------------------------- */
.tk-cat-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.tk-cat-card {
  position: relative;
  border: 1px solid var(--tk-gold-dim);
  border-radius: var(--tk-radius-md);
  padding: 2rem 1.25rem;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}
/* Animated gold sweep on hover (very subtle, runs once per hover) */
.tk-cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
              transparent 30%,
              rgba(212, 175, 55, 0.07) 50%,
              transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.tk-cat-card:hover {
  transform: translateY(-6px);
  border-color: var(--tk-gold);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(212, 175, 55, 0.18),
              0 0 26px -8px rgba(212, 175, 55, 0.3);
}
.tk-cat-card:hover::before { transform: translateX(100%); }
.tk-cat-card:hover .tk-cat-card__title { color: var(--tk-gold-2); }
.tk-cat-card__title {
  font-family: var(--tk-font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tk-gold);
  margin: 0 0 0.7rem;
  line-height: 1.2;
}
.tk-cat-card__body {
  font-size: 0.85rem;
  color: var(--tk-fg-dim);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.tk-cat-card--wedding   { background: var(--tk-cat-wedding); }
.tk-cat-card--concert   { background: var(--tk-cat-concert); }
.tk-cat-card--community { background: var(--tk-cat-community); }
.tk-cat-card--corporate { background: var(--tk-cat-corporate); }
.tk-cat-card--private   { background: var(--tk-cat-private); }

/* --- Buzzhive ticketing partner band ---------------------------- */
/* TurnKey ↔ BuzzHive cross-pollination per the exclusivity agreement.
   Shows on the homepage and is foundational on the Event Promotion page.
   Sacred-geometry watermark layered in low opacity (Flower of Life). */
.tk-partner-band {
  position: relative;
  border-top: 1px solid var(--tk-gold-dim);
  border-bottom: 1px solid var(--tk-gold-dim);
  padding: 3rem 0;
  text-align: center;
  margin: 4rem 0;
  background:
    url('/images/sacred-flower-of-life.svg') center / 380px auto no-repeat,
    linear-gradient(to right, transparent, rgba(212, 175, 55, 0.05), transparent);
  color: rgba(212, 175, 55, 0.07);  /* tints the FoL via currentColor */
  overflow: hidden;
}
.tk-partner-band > * { position: relative; z-index: 1; color: var(--tk-fg); }
.tk-partner-band__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tk-gold);
  margin-bottom: 0.6rem;
}
.tk-partner-band__headline {
  font-family: var(--tk-font-display);
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  color: var(--tk-fg);
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
  line-height: 1.15;
}
.tk-partner-band__sub {
  font-size: 0.95rem;
  color: var(--tk-fg-dim);
  max-width: 620px;
  margin: 0 auto;
  letter-spacing: 0.02em;
}

/* --- Footer ----------------------------------------------------- */
/* Margin-top removed 2026-06-11 — the closing CTA section now provides
   its own bottom buffer, and a separate 4rem footer margin was leaving
   a visible gap of pure background between the navy closing band and
   the footer. Pages without a closing-section variant still look fine
   because their final sections already have 4-6rem bottom padding. */
.tk-footer {
  background: var(--tk-bg);
  border-top: 1px solid var(--tk-rule);
  padding: 3rem 0 2rem;
  margin-top: 0;
}
.tk-footer__inner {
  max-width: var(--tk-max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}
.tk-footer__brand {
  font-family: var(--tk-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.25em;
  color: var(--tk-gold);
}
.tk-footer__brand .tk-sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--tk-fg-dim);
  margin-top: -0.15em;
}
.tk-footer__tag {
  margin-top: 1rem;
  color: var(--tk-fg-muted);
  font-size: 0.85rem;
  max-width: 360px;
}
.tk-footer__col h5 {
  font-family: var(--tk-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tk-gold);
  margin: 0 0 1rem;
}
.tk-footer__col ul { list-style: none; padding: 0; margin: 0; }
.tk-footer__col li { margin-bottom: 0.5rem; }
.tk-footer__col a {
  color: var(--tk-fg-dim);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}
.tk-footer__col a:hover { color: var(--tk-fg); }
.tk-footer__legal {
  max-width: var(--tk-max-w);
  margin: 2rem auto 0;
  padding: 1.5rem 2rem 0;
  border-top: 1px solid var(--tk-rule);
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--tk-fg-muted);
  letter-spacing: 0.05em;
}

/* --- Forms (used on contact + owner-inquiry) -------------------- */
.tk-form { max-width: 640px; }
.tk-form__row { margin-bottom: 1.5rem; }
.tk-form__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tk-gold);
  margin-bottom: 0.5rem;
}
.tk-form__input,
.tk-form__select,
.tk-form__textarea {
  width: 100%;
  background: var(--tk-bg-2);
  border: 1px solid var(--tk-rule);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-fg);
  font-family: var(--tk-font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  transition: border-color 0.15s ease;
}
.tk-form__input:focus,
.tk-form__select:focus,
.tk-form__textarea:focus {
  outline: none;
  border-color: var(--tk-gold);
}
.tk-form__textarea { min-height: 140px; resize: vertical; }
.tk-radio-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tk-radio-card {
  flex: 1 1 200px;
  cursor: pointer;
}
.tk-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.tk-radio-card__face {
  display: block;
  border: 1px solid var(--tk-rule);
  border-radius: var(--tk-radius-md);
  padding: 1rem;
  text-align: center;
  transition: all 0.15s ease;
}
.tk-radio-card__face strong {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  color: var(--tk-fg);
}
.tk-radio-card__face span {
  font-size: 0.78rem;
  color: var(--tk-fg-muted);
}
.tk-radio-card input:checked + .tk-radio-card__face {
  border-color: var(--tk-gold);
  background: rgba(212, 175, 55, 0.06);
}

/* =============================================================================
   RESPONSIVE — mobile + phone-landscape playbook
   ============================================================================= */
/* Mirrors BuzzHive's 2026-06-07 mobile patterns:
     - 960px catches iPhone landscape (780-932px) + iPad portrait (810px).
       iPad landscape (1024px+) stays on desktop.
     - 640px is the small-phone breakpoint.
     - 380px is the extra-narrow nav rule.
     - html/body get overflow-x: hidden globally to contain stray-width
       elements. NEVER use `max-width: 100vw` — iOS Safari doesn't recalc
       vw on rotation and the page gets stuck in portrait dimensions
       after rotating to landscape. (Caught on Baytek's event page
       2026-06-03 — same fix lives in BuzzHive app.css.)
     - Grid tracks that contain wide content use minmax(0, 1fr) instead
       of plain 1fr so a wide child can't push the grid past the viewport. */
html, body { overflow-x: hidden; }

@media (max-width: 960px) {
  /* Header — go static (no longer sticky) and let the nav wrap. Matches
     BuzzHive's .site-header @ ≤960 pattern. */
  .tk-header { position: static; }
  .tk-header__inner {
    flex-wrap: wrap;
    row-gap: 0.75rem;
    padding: 0.85rem 1.25rem;
  }
  .tk-nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .tk-nav a {
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
    letter-spacing: 0.08em;
  }
  .tk-nav a.tk-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.72rem;
    min-width: 0;
  }
  /* Grid containment — minmax(0, 1fr) prevents wide children from
     pushing the grid past the viewport. */
  .tk-cards-row    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-cards-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-cat-cards    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-band         { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .tk-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Hero collapses to single column */
  .tk-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    gap: 2rem;
  }
  .tk-hero__copy { text-align: center; }
  .tk-hero__divider { margin-left: auto; margin-right: auto; }
  .tk-hero__key { max-width: 200px; margin: 0 auto; }
  .tk-hero__mandala { width: clamp(320px, 92vw, 520px); }
}

@media (max-width: 640px) {
  .tk-nav-toggle { display: inline-flex; }
  .tk-cards-row    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-cards-row--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tk-cat-cards    { grid-template-columns: minmax(0, 1fr); }
  .tk-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .tk-footer__legal { flex-direction: column; gap: 0.5rem; text-align: center; }
  .tk-section, .tk-section--lg { padding: 3rem 0; }
  .tk-hero { padding: 3rem 0 2rem; }
  .tk-container { padding: 0 1.25rem; }
  h1 { font-size: 2.25rem; }
  .tk-hero__wordmark { font-size: clamp(2.75rem, 13vw, 5rem); }
}

/* Extra-narrow nav at small-phone widths — mirrors BuzzHive's 380px rule. */
@media (max-width: 380px) {
  .tk-nav a { font-size: 0.7rem; padding: 0.3rem 0.4rem; }
  .tk-nav { gap: 0.35rem; }
  .tk-nav a.tk-btn { padding: 0.4rem 0.7rem; font-size: 0.68rem; }
}

/* =============================================================================
   RESPONSIVE — new components added 2026-06-11 (the BuzzHive-grade rebuild)
   ============================================================================= */
@media (max-width: 960px) {
  .tk-cell { padding: 2rem 1.5rem; }
  .tk-partner-feature { padding: 2rem 1.5rem; }
  .tk-closing { padding: 3rem 1.5rem; }
  .tk-why__icon { width: 42px; height: 42px; font-size: 1.2rem; }
}
@media (max-width: 640px) {
  .tk-cell { padding: 1.5rem 1.25rem; }
  .tk-partner-feature { padding: 1.5rem 1.25rem; }
  .tk-closing { padding: 2.5rem 1.25rem; }
  .tk-proof { padding: 1.5rem 1rem; }
  .tk-totop { right: 1rem; bottom: 1rem; width: 42px; height: 42px; font-size: 1.25rem; }
  .tk-path { padding: 1.75rem 1.25rem; }
  .tk-partner-feature__head h3 { font-size: 1.5rem; }
}

/* --- Helpers ------------------------------------------------- */
.tk-center { text-align: center; }
.tk-gold { color: var(--tk-gold); }
.tk-mt-0 { margin-top: 0; }
.tk-mb-0 { margin-bottom: 0; }

/* =============================================================================
   CONTAINED CELLS — the BuzzHive-grade content density pattern
   ============================================================================= */
/* Every major content block lives inside a `.tk-cell` so the page reads as a
   sequence of bordered containers, not floating content. Translucent navy
   bg + 1px gold border + subtle gold-glow shadow + inner padding.
   2026-06-11: added a subtle hex-tessellation pattern as background-image
   (SVG data URI, very low opacity) for texture without distraction. */
.tk-cell {
  background-color: var(--tk-bg-cell);
  background-image: url('/images/pattern-hex.svg');
  background-repeat: repeat;
  background-size: 100px 86px;
  border: 1px solid var(--tk-gold-border, rgba(212, 175, 55, 0.4));
  border-radius: var(--tk-radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              inset 0 0 0 1px rgba(212, 175, 55, 0.04);
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tk-cell--solid { background: var(--tk-bg-cell-2); }

/* Jewel-tone cell variants — matches the deck's color-grouping pattern.
   Use sparingly for content that's meant to be visually distinct
   (e.g. the 3 "Why TurnKey" cards, the 3 path-routing cards). */
.tk-cell--teal   {
  background: linear-gradient(160deg, rgba(15, 60, 70, 0.65), rgba(8, 38, 48, 0.85));
  border-color: rgba(63, 184, 198, 0.5);
}
.tk-cell--teal:hover   { border-color: #6dd5dc; }

.tk-cell--blue   {
  background: linear-gradient(160deg, rgba(26, 36, 64, 0.65), rgba(15, 22, 48, 0.85));
  border-color: rgba(99, 142, 200, 0.45);
}
.tk-cell--blue:hover   { border-color: #95b8e0; }

.tk-cell--amber  {
  background: linear-gradient(160deg, rgba(58, 45, 31, 0.65), rgba(38, 27, 18, 0.85));
  border-color: rgba(212, 175, 55, 0.55);
}
.tk-cell--amber:hover  { border-color: var(--tk-gold-2); }

.tk-cell--green  {
  background: linear-gradient(160deg, rgba(29, 58, 46, 0.6), rgba(15, 38, 27, 0.85));
  border-color: rgba(126, 201, 157, 0.45);
}
.tk-cell--green:hover  { border-color: #a5dbb8; }

.tk-cell--purple {
  background: linear-gradient(160deg, rgba(45, 31, 58, 0.65), rgba(28, 18, 38, 0.85));
  border-color: rgba(155, 110, 200, 0.4);
}
.tk-cell--purple:hover { border-color: #c4a3e0; }

.tk-cell--slate  {
  background: linear-gradient(160deg, rgba(37, 40, 48, 0.7), rgba(22, 24, 30, 0.85));
  border-color: rgba(160, 165, 180, 0.35);
}
.tk-cell--slate:hover  { border-color: #b9bdcc; }

/* ===================== PROOF STATS BAND (post-hero) ====================== */
/* Right after the hero: 4-up grid of credibility metrics. Matches
   BuzzHive's "active promoters / events / tickets sold" pattern but lifted
   into the TurnKey aesthetic — labels in gold caps, values in big display
   font, contained in a single bordered cell. */
.tk-proof {
  /* Margin top = 0 so the proof cell tucks immediately under the hero,
     where the giant TURNKEY watermark ends. Negative-margin overlap was
     the bug last time; 0 keeps everything aligned cleanly. */
  margin-top: 0;
  margin-bottom: 3rem;
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  text-align: center;
}
@media (max-width: 960px) { .tk-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tk-proof { grid-template-columns: minmax(0, 1fr); } }
.tk-proof__item { padding: 0.5rem; }
.tk-proof__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tk-fg-dim);
  margin: 0 0 0.5rem;
}
.tk-proof__value {
  font-family: var(--tk-font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: 0.04em;
  color: var(--tk-gold);
  line-height: 1;
  margin: 0;
}

/* ===================== "WHY US" 3-FEATURE GRID ====================== */
/* BuzzHive's "Free Forever / Stripe Pays / Door Tools" lives in big bordered
   cards with an icon square + bold caps title + body copy. Same pattern here. */
.tk-why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 960px) { .tk-why { grid-template-columns: minmax(0, 1fr); } }
.tk-why__card {
  background-color: var(--tk-bg-cell);
  background-image: url('/images/pattern-hex.svg');
  background-repeat: repeat;
  background-size: 100px 86px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--tk-radius-lg);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tk-why__card:hover {
  border-color: var(--tk-gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55),
              0 0 32px -8px rgba(212, 175, 55, 0.25);
}
.tk-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--tk-radius-md);
  color: var(--tk-gold);
  margin-bottom: 1.25rem;
  font-family: var(--tk-font-display);
  font-size: 1.4rem;
  transition: all 0.3s ease;
}
.tk-why__card:hover .tk-why__icon {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--tk-gold);
  transform: scale(1.05);
}
.tk-why__title {
  font-family: var(--tk-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--tk-fg);
  margin: 0 0 0.65rem;
  line-height: 1.2;
}
.tk-why__body {
  color: var(--tk-fg-dim);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
}

/* ===================== CAPABILITY CARDS — UPGRADED TO CELLS ====================== */
/* Override of the existing .tk-cap-card to give each capability its own
   bordered translucent cell rather than floating icon+text. */
.tk-cards-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 wide, 2 rows = 6 cards */
  gap: 1rem;
  margin: 2.5rem 0 0;
}
.tk-cards-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2rem;
}
.tk-cap-card {
  background-color: var(--tk-bg-cell);
  background-image: url('/images/pattern-hex.svg');
  background-repeat: repeat;
  background-size: 80px 70px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--tk-radius-md);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease;
  cursor: default;
}
.tk-cap-card:hover {
  border-color: var(--tk-gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5),
              0 0 24px -8px rgba(212, 175, 55, 0.25);
}
.tk-cap-card__sub { line-height: 1.5; }

@media (max-width: 960px) {
  .tk-cards-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-cards-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tk-cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================== BUZZHIVE PARTNER — RESTRUCTURED AS FEATURE CELL ====================== */
/* Was a thin horizontal band — now a substantial 2-column featured cell
   so the BuzzHive integration earns visual weight commensurate with its
   role in the business model. */
.tk-partner-feature {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
    var(--tk-bg-cell-2);
  border: 1px solid var(--tk-gold);
  border-radius: var(--tk-radius-lg);
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 960px) {
  .tk-partner-feature { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
.tk-partner-feature__head .tk-section-label { margin-bottom: 0.75rem; }
.tk-partner-feature__head h3 {
  font-family: var(--tk-font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  line-height: 1.15;
}
.tk-partner-feature__head p {
  color: var(--tk-fg-dim);
  font-size: 1rem;
  margin: 0 0 1.5rem;
}
.tk-partner-feature__steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tk-partner-feature__steps li {
  border-left: 2px solid var(--tk-gold);
  padding: 0.75rem 0 0.75rem 1.25rem;
  margin-bottom: 0.85rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0 4px 4px 0;
}
.tk-partner-feature__steps li:last-child { margin-bottom: 0; }
.tk-partner-feature__steps strong {
  display: block;
  font-family: var(--tk-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--tk-gold);
  margin-bottom: 0.2rem;
}
.tk-partner-feature__steps span {
  font-size: 0.88rem;
  color: var(--tk-fg-dim);
}

/* ===================== THREE-PATH ROUTING — TALLER, MORE CONTENT ====================== */
.tk-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 960px) { .tk-paths { grid-template-columns: minmax(0, 1fr); } }
.tk-path {
  display: flex;
  flex-direction: column;
  background-color: var(--tk-bg-cell-2);
  background-image: url('/images/pattern-hex.svg');
  background-repeat: repeat;
  background-size: 100px 86px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--tk-radius-lg);
  padding: 2.25rem 1.75rem;
  text-decoration: none;
  color: var(--tk-fg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease;
}
.tk-path::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(212, 175, 55, 0.1) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.tk-path:hover {
  border-color: var(--tk-gold);
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6),
              0 0 30px -8px rgba(212, 175, 55, 0.3);
}
.tk-path:hover::before { transform: translateX(100%); }
.tk-path__num {
  font-family: var(--tk-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--tk-gold-dim);
  margin-bottom: 0.5rem;
}
.tk-path__title {
  font-family: var(--tk-font-display);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: var(--tk-gold);
  margin: 0 0 0.85rem;
  line-height: 1.15;
}
.tk-path__body {
  color: var(--tk-fg-dim);
  font-size: 0.95rem;
  margin: 0 0 2rem;
  flex-grow: 1;
}
.tk-path__cta {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tk-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.25s ease;
}
.tk-path:hover .tk-path__cta { gap: 0.85rem; }
.tk-path__cta::after { content: '→'; }

/* ===================== CLOSING CTA — FULL-BLEED BuzzHive pattern ====================== */
/* Spans the entire viewport width (no card/cell border). Dark navy gradient
   backdrop with cyan + gold radial highlights to match BuzzHive's
   atmospheric closing section. */
.tk-closing-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* break out of any parent container */
  margin-right: calc(50% - 50vw);
  padding: 7rem 2rem;
  background:
    radial-gradient(ellipse at 25% 100%, rgba(63, 184, 198, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(20, 42, 67, 0.5) 0%, transparent 70%),
    #0a1929;
  border-top: 1px solid rgba(212, 175, 55, 0.4);
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  overflow: hidden;
  text-align: center;
}
.tk-closing-section__inner {
  max-width: var(--tk-max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* Legacy .tk-closing class kept for backward-compatibility on other pages */
.tk-closing {
  background:
    radial-gradient(ellipse at center, rgba(63, 184, 198, 0.07) 0%, transparent 70%),
    var(--tk-bg-cell-2);
  border: 1px solid var(--tk-gold);
  border-radius: var(--tk-radius-lg);
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tk-closing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 2rem;
}
.tk-closing__bars { display: block; }
.tk-closing__label {
  font-family: var(--tk-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tk-gold);
}
.tk-closing__headline {
  font-family: var(--tk-font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0 0 1.5rem;
  font-weight: 400;
}
.tk-closing__headline .tk-gold { color: var(--tk-gold); }
.tk-closing__headline .tk-white { color: var(--tk-fg); }

.tk-closing__lede {
  color: var(--tk-fg-dim);
  max-width: 560px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Pill-shaped button variant — matches BuzzHive's closing CTA shape */
.tk-btn--pill {
  border-radius: 9999px;
  padding: 1.15rem 3rem;
  font-size: 1rem;
  background: var(--tk-gold);
  color: var(--tk-bg);
  border-color: var(--tk-gold);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35),
              0 0 0 1px rgba(212, 175, 55, 0.5);
}
.tk-btn--pill:hover {
  background: var(--tk-gold-2);
  border-color: var(--tk-gold-2);
  color: var(--tk-bg);
  box-shadow: 0 14px 40px rgba(212, 175, 55, 0.5),
              0 0 0 1px rgba(212, 175, 55, 0.65),
              0 0 36px -6px rgba(212, 175, 55, 0.45);
  transform: translateY(-2px);
}

.tk-closing__helpers {
  margin: 2rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tk-fg-muted);
  font-family: ui-monospace, 'IBM Plex Mono', monospace;
}
.tk-closing__helpers a {
  color: var(--tk-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.tk-closing__helpers a:hover { color: var(--tk-gold-2); }
.tk-closing__sep { margin: 0 1rem; color: var(--tk-fg-muted); }

@media (max-width: 960px) {
  .tk-closing-section { padding: 5rem 1.5rem; }
}
@media (max-width: 640px) {
  .tk-closing-section { padding: 4rem 1.25rem; }
  .tk-closing { padding: 3.5rem 1.25rem; }
  .tk-closing__helpers {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }
  .tk-closing__sep { display: none; }
  .tk-btn--pill { padding: 1rem 2rem; font-size: 0.9rem; }
}

/* ===================== BACK-TO-TOP FLOATING BUTTON ====================== */
.tk-totop {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 100;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tk-gold);
  color: var(--tk-bg);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4),
              0 0 0 1px rgba(212, 175, 55, 0.5);
}
.tk-totop.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.tk-totop:hover {
  background: var(--tk-gold-2);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.55),
              0 0 0 1px rgba(212, 175, 55, 0.7);
}

/* ===================== SECTION CHROME — bigger eyebrow rhythm ====================== */
/* The "WHY US"-style eyebrow + gold-rule pattern that BuzzHive uses to
   introduce every section. */
.tk-eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.tk-eyebrow-rule::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--tk-gold);
  flex-shrink: 0;
}
.tk-eyebrow-rule .tk-section-label {
  color: var(--tk-gold);
  margin: 0;
}

/* =============================================================================
   ANIMATIONS — keyframes for the symbol-driven motion across the site
   ============================================================================= */

/* The mandala behind the wordmark rotates very slowly — gives the hero
   a subtle heartbeat without being distracting. */
@keyframes tkMandalaSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Key circuit traces pulse when the user hovers the key */
@keyframes tkCircuitPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Bright dots along the key gently pulse on hover */
@keyframes tkPulseDot {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* Partner-band CTA pulse — draws the eye to the BuzzHive handoff */
@keyframes tkPartnerGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(212, 175, 55, 0.15); }
  50%      { box-shadow: 0 0 28px rgba(212, 175, 55, 0.32); }
}

/* Fade-up — used for sections to animate in as they scroll into view */
@keyframes tkFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion: respect the OS-level preference */
@media (prefers-reduced-motion: reduce) {
  .tk-hero__mandala,
  .tk-key-circuit,
  .tk-key-pulse circle,
  .tk-cat-card,
  .tk-btn,
  .tk-cap-card,
  .tk-cap-card__icon,
  .tk-hero__key {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================================================
   ADDITIONAL HOVER EFFECTS — partner band + radio cards
   ============================================================================= */

.tk-partner-band__headline { transition: color 0.3s ease; }
.tk-partner-band:hover .tk-partner-band__headline { color: var(--tk-gold-2); }
.tk-partner-band:hover .tk-btn {
  animation: tkPartnerGlow 2s ease-in-out infinite;
}

.tk-radio-card__face {
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tk-radio-card:hover .tk-radio-card__face {
  border-color: var(--tk-gold-dim);
  background: rgba(212, 175, 55, 0.03);
  transform: translateY(-2px);
}

/* Footer links subtly brighten on hover */
.tk-footer__col a { transition: color 0.2s ease, padding-left 0.2s ease; }
.tk-footer__col a:hover { color: var(--tk-gold); padding-left: 4px; }