/* utilities.css: replaces the 728 inline style="" attributes that were
 * scattered through the pages. One class per unique declaration.
 * Loaded last so these keep the precedence the inline attributes had. */

.vh-text-primary {
  color: var(--primary);
}

.vh-text-secondary {
  color: var(--secondary);
}

.vh-text-accent {
  color: #ff9c00;
}

.vh-text-ink {
  color: #0b1320;
}

.vh-heading-ink {
  color: #0b1320;
  letter-spacing: -0.5px;
}

.vh-tight {
  letter-spacing: -0.5px;
}

.vh-lh-1 {
  line-height: 1;
}

.vh-fw-300 {
  font-weight: 300;
}

.vh-text-sm {
  font-size: 0.85rem;
  line-height: 1.5;
}

.vh-text-muted-sm {
  color: #475569;
  font-size: 0.85rem;
}

.vh-footer-text {
  color: #94a3b8;
  line-height: 1.8;
  font-size: 0.95rem;
}

.vh-sq-32 {
  width: 32px;
  height: 32px;
}

.vh-sq-45 {
  width: 45px;
  height: 45px;
}

.vh-sq-48 {
  width: 48px;
  height: 48px;
}

.vh-sq-56 {
  width: 56px;
  height: 56px;
}

.vh-sq-64 {
  width: 64px;
  height: 64px;
}

.vh-sq-72 {
  width: 72px;
  height: 72px;
}

.vh-delay-0 {
  transition-delay: 0.0s;
}

.vh-delay-1 {
  transition-delay: 0.1s;
}

.vh-delay-2 {
  transition-delay: 0.2s;
}

.vh-delay-3 {
  transition-delay: 0.3s;
}

.vh-delay-4 {
  transition-delay: 0.4s;
}

.vh-delay-5 {
  transition-delay: 0.5s;
}

.vh-delay-6 {
  transition-delay: 0.6s;
}

.vh-delay-7 {
  transition-delay: 0.7s;
}

.vh-delay-8 {
  transition-delay: 0.8s;
}

.vh-delay-9 {
  transition-delay: 0.9s;
}

.vh-pe-none {
  pointer-events: none;
}

.vh-pe-auto {
  pointer-events: auto;
}

.vh-w-20 {
  width: 20%;
}

.vh-w-40 {
  width: 40%;
}

.vh-w-20-rel {
  width: 20%;
  position: relative;
}

.vh-list-bullet {
  color: #ff9c00;
  font-size: 2.2rem;
  line-height: 1;
  margin-right: 8px;
}

.vh-brand-accent {
  color: #ff9c00;
  font-size: 1.1rem;
  letter-spacing: 0px;
}

.vh-brand-dark {
  color: #333;
  font-size: 1.1rem;
  letter-spacing: 0px;
}

.vh-brand-light {
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0px;
}

.vh-btn-whatsapp {
  width: 38px;
  height: 38px;
  background-color: #128C7E;
  border: none;
  box-shadow: 0 4px 10px rgba(18,140,126,0.2);
}

.vh-btn-accent {
  width: 38px;
  height: 38px;
  background-color: #ff9c00;
  border: none;
  box-shadow: 0 4px 10px rgba(255,156,0,0.2);
}

.vh-btn-ghost {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  transition: 0.3s;
}

.vh-btn-ink {
  background: #0b1320;
  color: #fff;
  padding: 12px 30px;
  transition: 0.3s;
}

.vh-icon-accent-45 {
  width: 45px;
  height: 45px;
  background: rgba(255,156,0,0.15);
  color: #ff9c00;
}

.vh-icon-accent-50 {
  width: 50px;
  height: 50px;
  background: rgba(255, 156, 0, 0.1);
  color: #ff9c00;
}

.vh-icon-accent-70 {
  width: 70px;
  height: 70px;
  background-color: rgba(255, 156, 0, 0.1);
}

.vh-step-badge {
  width: 45px;
  height: 45px;
  font-weight: bold;
}

.vh-footer-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
  margin: 40px 0 30px 0;
}

.vh-card-soft {
  background-color: #f8f9fa;
  transition: transform 0.3s;
}

.vh-thumb-160 {
  height: 160px;
  object-fit: cover;
}

.vh-bg-offwhite {
  background-color: #fcfcfc;
}

.vh-callout {
  background: #f8f9fa;
  border-left: 4px solid #ff9c00;
}

.vh-bg-accent {
  background: #ff9c00;
}

.vh-badge-accent {
  background: #ff9c00;
  margin-top: -2px;
  font-size: 0.75rem;
}

.vh-underline-accent {
  border-bottom: 3px solid var(--accent);
}

.vh-hero-glow {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255,156,0,0.15) 0%, rgba(255,255,255,0) 70%);
  z-index: 0;
}

.vh-hero-img {
  max-width: 400px;
  z-index: 2;
}

.vh-float-badge {
  width: 80px;
  height: 80px;
  top: 10%;
  right: 10%;
  z-index: 3;
  animation: float 3s ease-in-out infinite;
}

.vh-scroll-x {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* The client strip is the longer of the two, so it takes longer to go round
   and moves at about the same pace as the press strip. */
.vh-marquee-rev {
  animation-duration: 50s;
  animation-direction: reverse;
}

/* Hover states previously implemented with inline onmouseover/onmouseout JS */

.vh-btn-ghost:hover {
  background: #ff9c00;
  border-color: #ff9c00;
}

.vh-btn-ink:hover {
  background: #ff9c00;
}

.vh-card-soft:hover {
  transform: translateY(-10px);
}

/* --- Classes the markup already used but nothing defined ----------------- */
.text-accent {
  color: #ff9c00;
}

.bg-accent {
  background-color: #ff9c00;
}

.bg-accent-subtle {
  background-color: rgba(255, 156, 0, 0.12);
}

.tracking-wider {
  letter-spacing: 0.08em;
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

/* Filled call-to-action button.  Distinct from .vh-btn-accent, which is the
   38x38 icon button in the header bar and drawer footer. */
.vh-btn-cta {
  background-color: #ff9c00;
  border: 1px solid #ff9c00;
  color: #fff;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.vh-btn-cta:hover,
.vh-btn-cta:focus {
  background-color: #e08900;
  border-color: #e08900;
  color: #fff;
  transform: translateY(-2px);
}