/* Marketing kit-specific tweaks on top of the root system */
@import url('../../colors_and_type.css');

html, body { background: var(--tk-white); margin: 0; }
* { box-sizing: border-box; }

/* Container */
.tk-container { max-width: 1440px; margin: 0 auto; padding: 0 80px; }
@media (max-width: 900px) { .tk-container { padding: 0 32px; } }

/* Photo placeholder — grayscale-tinted block; replace with real <img> */
.tk-photo {
  position: relative;
  background:
    linear-gradient(135deg, rgba(27,30,35,0.85) 0%, rgba(128,125,107,0.55) 55%, rgba(27,30,35,0.7) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 6px);
  filter: grayscale(1);
  overflow: hidden;
}
.tk-photo--light {
  background:
    linear-gradient(160deg, rgba(180,180,175,0.95) 0%, rgba(120,120,115,0.85) 60%, rgba(60,60,58,0.95) 100%);
  filter: grayscale(1);
}
.tk-photo__caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: var(--tk-white);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Nav link */
.tk-nav-link {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 8px 0;
  font-family: var(--tk-font-body);
  font-weight: 500;
  transition: color var(--tk-dur-1) var(--tk-ease);
}
.tk-nav-link:hover { color: var(--tk-sandstone); }
.tk-nav-link.is-active { color: var(--tk-sandstone); }

/* Eyebrow shared */
.tk-eyebrow {
  font-family: var(--tk-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* RTL niceties */
[dir="rtl"] .tk-h1, [dir="rtl"] h1,
[dir="rtl"] .tk-h2, [dir="rtl"] h2 { font-family: var(--tk-font-arabic); }

/* Section vertical rhythm */
.tk-section { padding: 120px 0; }
.tk-section--tight { padding: 80px 0; }
.tk-section--loose { padding: 160px 0; }

/* Page transitions */
.tk-page { animation: fadeUp 400ms cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero three-bar entry */
.tk-hero-bar {
  opacity: 0;
  transform: translateX(60px);
  transform-origin: right center;
  animation: tk-hero-bar-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes tk-hero-bar-in {
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tk-hero-bar { animation: none; opacity: 1; transform: none; }
}