/* ==========================================================================
   Utilities — small helpers Bootstrap doesn't ship.
   ========================================================================== */

.section {
  padding-block: var(--section-spacing);
}

.page-header {
  padding-block: calc(var(--section-spacing) * 0.75);
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

/* Page header with a darkened photo:
   <section class="page-header page-header-image" style="background-image: url('assets/...')">
   (set the image inline so its path resolves from the page, not from this stylesheet) */
.page-header-image {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 12vw, 8.5rem) clamp(3.5rem, 8vw, 5.5rem);
  background-color: var(--zt-black);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #ece7da;
}

.page-header-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.78) 50%, rgba(10, 10, 10, 0.5) 100%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--zt-gold-rgb), 0.18), transparent 55%);
}

.page-header-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--zt-gold-rgb), 0.6), transparent);
}

.page-header-image .section-title,
.page-header-image h1 {
  color: #fff;
}

.page-header-lead {
  max-width: 40rem;
  color: rgba(236, 231, 218, 0.8);
}

.breadcrumb-gold {
  --bs-breadcrumb-divider-color: rgba(var(--zt-gold-rgb), 0.6);
  --bs-breadcrumb-item-active-color: var(--zt-gold);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.breadcrumb-gold a {
  color: rgba(236, 231, 218, 0.75);
  text-decoration: none;
}

.breadcrumb-gold a:hover {
  color: var(--zt-gold);
}

/* Arrow text link: "Learn more →" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--brand-text);
  text-decoration: none;
}

.link-arrow i {
  transition: transform var(--transition-base);
}

.link-arrow:hover i {
  transform: translateX(4px);
}

/* Section headings: small gold label + title */
.section-head {
  max-width: 44rem;
  margin: 0 auto 3rem;
}

.section-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.section-title {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
}

.section-intro {
  font-size: 1.075rem;
  color: var(--bs-secondary-color);
}

/* Pill above the hero title */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-text);
  background: var(--bs-primary-bg-subtle);
  border: 1px solid var(--bs-primary-border-subtle);
}

/* Brand gold — theme-aware (deeper gold on light backgrounds for contrast) */
.text-gold,
.text-primary {
  color: var(--brand-text) !important;
}

/* Metallic gold text, like the logo */
.text-gradient {
  background: var(--zt-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Thin gold rule, like the line under "ZERO TOUCH" in the logo */
.gold-divider {
  width: 64px;
  height: 2px;
  border: 0;
  margin: 1rem 0;
  background: var(--zt-gold);
  opacity: 1;
}

.gold-divider.mx-auto {
  margin-inline: auto;
}

/* Black section that stays black in either theme */
.section-dark {
  background: var(--zt-black);
  color: #ece7da;
}

/* Scroll-reveal (toggled by js/modules/animate.js) */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}