/* pages.css: every page/section style for the site.
 * Extracted from the inline <style> blocks that were duplicated across the pages.
 * Rule order follows index.html, whose header and mega-menu markup every page now shares. */

.hero-home {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,248,255,0.95) 100%), url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2000&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  padding: 180px 0 100px 0;
  min-height: 80vh;
}

.service-pricing-card {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  height: 100%;
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.service-pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: 0.3s;
}

.service-pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.service-pricing-card:hover::before {
  opacity: 1;
}

.popular-pill {
  background: rgba(42, 160, 239, 0.1);
  color: var(--primary);
  border-radius: 50px;
  padding: 5px 15px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
  transition: 0.2s;
}

.popular-pill:hover {
  background: var(--primary);
  color: #fff;
}

.why-choose-card {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  height: 100%;
  border: 1px solid rgba(0,0,0,0.03);
}

.hero-premium {
  background: linear-gradient(135deg, #0b1320 0%, #1a2a40 50%, #0b1320 100%);
  position: relative;
  padding: 160px 0 80px 0;
  color: white;
  overflow: hidden;
}

.hero-premium::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 156, 0, 0.15) 0%, rgba(0,0,0,0) 70%);
  z-index: 1;
}

.hero-premium::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 50%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 156, 0, 0.15) 0%, rgba(0,0,0,0) 70%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.trust-badge-top {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
  margin-bottom: 25px;
}

.hero-search-wrapper {
  background: #fff;
  border-radius: 50px;
  padding: 8px 8px 8px 25px;
  display: flex;
  align-items: center;
  max-width: 750px;
  margin: 40px auto 20px auto;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.hero-search-input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 1.1rem;
  color: #333;
  background: transparent;
}

.hero-search-input::placeholder {
  color: #999;
}

.hero-search-btn {
  background-color: #ff9c00;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 35px;
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.hero-search-btn:hover {
  background-color: #e68c00;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 156, 0, 0.4);
}

.service-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
}

.service-chip {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  backdrop-filter: blur(5px);
}

.service-chip:hover {
  background: #ff9c00;
  color: #fff;
  border-color: #ff9c00;
}

.trust-strip {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: inline-flex;
  flex-wrap: wrap;
  padding: 12px 30px;
  gap: 40px;
  justify-content: center;
}

.trust-strip-item {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.trust-strip-icon {
  color: #ff9c00;
  font-size: 1.2rem;
  margin-right: 10px;
}

.brand-primary-color {
  color: #ff9c00 !important;
}

.header-transparent {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.header-transparent.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #eee !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.header-transparent .nav-link {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500;
  padding: 25px 15px !important;
  transition: color 0.3s;
}

.header-transparent .nav-link:hover {
  color: #ff9c00 !important;
}

.header-transparent.scrolled .nav-link {
  color: #333 !important;
}

.header-transparent.scrolled .nav-link:hover {
  color: #ff9c00 !important;
}

.header-transparent .navbar-brand .text-dark {
  color: #fff !important;
}

.header-transparent.scrolled .navbar-brand .text-dark {
  color: #212529 !important;
}

.mega-dropdown {
  position: static !important;
}

.mega-menu {
  width: 100%;
  left: 0;
  right: 0;
  padding: 30px 0;
  border-top: 3px solid #ff9c00;
  border-radius: 0 0 15px 15px;
}

.mega-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu-list li {
  margin-bottom: 15px;
}

.mega-menu-link {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  color: #444;
  padding: 8px 15px;
  border-radius: 8px;
  transition: all 0.2s;
}

.mega-menu-link:hover {
  background: rgba(255, 156, 0, 0.08);
  color: #ff9c00;
}

.mega-icon {
  font-size: 1.5rem;
  color: #ff9c00;
  margin-right: 15px;
  line-height: 1;
}

.mega-text h6 {
  margin: 0 0 3px 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.mega-text small {
  color: #888;
  font-size: 0.8rem;
}

.btn-header-contact {
  background: #ff9c00;
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  padding: 10px 25px;
  border: none;
  transition: all 0.3s;
}

.btn-header-contact:hover {
  background: #e68c00;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255,156,0,0.3);
}

.hover-bg-light:hover {
  background-color: rgba(255, 156, 0, 0.1) !important;
  color: #ff9c00 !important;
}

.dropdown-item {
  transition: all 0.2s;
}

.about-premium-card {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.02);
  position: relative;
  z-index: 1;
}

.about-premium-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,156,0,0.1) 0%, rgba(255,255,255,0) 100%);
  border-radius: 20px;
  z-index: -1;
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: slideMarquee 25s linear infinite;
  align-items: center;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-item {
  padding: 0 40px;
}

.new-header-nav .nav-item:hover .nav-link,
        .new-header-nav .nav-link.active {
  color: #ff9c00 !important;
}

.new-mega-menu a:hover {
  color: #ff9c00 !important;
}

.glass-header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
  border-radius: 50px;
  margin-top: 20px;
  padding: 5px 20px !important;
  transition: all 0.3s ease;
}

.glass-header.scrolled {
  margin-top: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.95) !important;
}

.new-header-nav .nav-link {
  padding-left: 0.7rem !important;
  padding-right: 0.7rem !important;
  color: #333 !important;
  font-size: 0.9rem;
  font-weight: 700 !important;
  padding: 10px 15px !important;
  transition: 0.3s ease;
}

.new-header-nav .nav-link:hover {
  color: #ff9c00 !important;
}

/* The entry for the page being shown. The underline is the same one hovering
   draws (.nav-link::before), held open -- a second bar of its own sat a little
   lower and a little wider, so hovering the current entry showed two. */
.nav-link.active-link {
  color: #ff9c00 !important;
  position: relative;
}

.new-header-nav .nav-link.active-link::before,
.new-header-nav .nav-item:hover > .nav-link::before,
.new-header-nav .nav-link[aria-expanded="true"]::before {
  width: 70%;
}

.footer-premium {
  background: linear-gradient(135deg, #0b1320 0%, #162436 100%);
  position: relative;
  overflow: hidden;
  border-top: 4px solid #ff9c00;
}

.footer-premium::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,156,0,0.1) 0%, rgba(255,156,0,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.footer-premium::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(18,140,126,0.1) 0%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.footer-col-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 25px;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 3px;
  background: #ff9c00;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.footer-col-wrapper:hover .footer-col-title::after {
  width: 55px;
}

.footer-link {
  color: #94a3b8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.footer-link i {
  font-size: 0.7rem;
  margin-right: 8px;
  color: #ff9c00;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.footer-link:hover {
  color: #fff;
  transform: translateX(5px);
}

.footer-link:hover i {
  opacity: 1;
  transform: translateX(0);
}

.footer-social-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

.footer-social-btn:hover {
  background: #ff9c00;
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(255, 156, 0, 0.3);
  border-color: #ff9c00;
}

.footer-bottom-links a {
  color: #64748b;
  text-decoration: none;
  font-size: 0.85rem;
  transition: 0.3s ease;
}

.footer-bottom-links a:hover {
  color: #ff9c00;
}

.glass-contact-box {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 25px;
  margin-top: 30px;
  transition: all 0.3s ease;
}

.glass-contact-box:hover {
  border-color: rgba(255, 156, 0, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.new-mega-menu {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
  border-top: 3px solid #ff9c00 !important;
  min-width: 650px;
  border-radius: 0 0 12px 12px !important;
  padding: 20px 25px !important;
}

.new-mega-menu .mega-col-title {
  color: #1e293b !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px;
  font-weight: 700;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 12px !important;
}

.new-mega-menu .mega-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: #ff9c00;
  border-radius: 2px;
}

.new-mega-menu ul li a {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: #475569 !important;
  font-weight: 500;
  font-size: 0.85rem;
}

.new-mega-menu ul li a i {
  opacity: 0.7;
  color: #94a3b8;
  transition: 0.2s ease;
  margin-right: 10px !important;
  font-size: 0.7rem !important;
}

.new-mega-menu ul li a:hover {
  background: #fff7ed;
  color: #ea580c !important;
  transform: translateX(4px);
}

.new-mega-menu ul li a:hover i {
  opacity: 1;
  transform: scale(1.2);
  color: #ea580c;
}

#serviceTabs::-webkit-scrollbar {
  display: none;
}

#serviceTabs {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

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

.pricing-matrix {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
  overflow: hidden;
  border: 1px solid #edf2f7;
  border-collapse: separate;
  border-spacing: 0;
}

.pricing-matrix th, .pricing-matrix td {
  padding: 16px 20px;
  border-bottom: 1px solid #edf2f7;
  vertical-align: middle;
}

.pricing-matrix tbody tr:last-child td {
  border-bottom: none;
}

.pricing-matrix th {
  background: #ffffff;
  border-bottom: 2px solid #e2e8f0;
}

.pricing-matrix td.feature-name {
  text-align: left;
  font-weight: 500;
  color: #334155;
  border-right: 1px solid #edf2f7;
  font-size: 0.95rem;
}

.pricing-matrix .plan-header {
  text-align: center;
  border-right: 1px solid #edf2f7;
  padding-top: 25px;
  padding-bottom: 25px;
}

.pricing-matrix .plan-header.popular {
  background: #fffaf0;
  border-top: 4px solid #ff9c00;
}

.pricing-matrix td.check-cell {
  text-align: center;
  border-right: 1px solid #edf2f7;
}

.pricing-matrix td.check-cell.popular-col {
  background: #fffaf0;
}

.check-icon {
  color: #10b981;
  font-size: 1.3rem;
  font-weight: bold;
}

.cross-icon {
  color: #cbd5e1;
  font-size: 1.1rem;
}

.text-value {
  font-weight: 600;
  color: #475569;
  font-size: 0.9rem;
}

.pricing-matrix tbody tr:hover td {
  background: #f8fafc;
}

.pricing-matrix tbody tr:hover td.popular-col {
  background: #fff7ed;
}

html, body {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100vw;
}

@media (min-width: 1200px) {
  .navbar .dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    display: block;
  }

  .dropdown-menu {
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px);
    display: block;
    transition: all 0.3s ease;
    margin-top: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    background: #fff;
    padding: 15px 0;
  }

}

@media (max-width: 1199.98px) {
  .navbar-collapse {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    max-height: 75vh;
    overflow-y: auto;
  }

  .header-transparent .navbar-collapse .nav-link {
    color: #333 !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid #eee;
  }

  .header-transparent .navbar-collapse .nav-link:hover {
    color: #ff9c00 !important;
  }

  .dropdown-menu {
    border: none;
    box-shadow: none;
    background: #f8f9fa;
    padding: 10px;
    margin-top: 0;
    border-radius: 8px;
  }

  .mega-menu {
    padding: 10px 0 !important;
    border: none !important;
    border-radius: 8px !important;
  }

  .mega-menu .container {
    padding: 0 !important;
  }

  .mega-menu h6.text-uppercase {
    margin-top: 15px;
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
    color: #ff9c00 !important;
  }

  .mega-menu-list li {
    margin-bottom: 5px;
  }

  .btn-header-contact {
    width: 100%;
    margin-top: 15px;
  }

  .custom-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: flex-start !important;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .custom-tabs::-webkit-scrollbar {
    display: none;
  }

  .custom-tabs .nav-item {
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .mobile-slider-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    scrollbar-width: none;
    justify-content: flex-start !important;
  }

  .mobile-slider-row::-webkit-scrollbar {
    display: none;
  }

  .mobile-slider-row > div {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: center;
  }

  .glass-header {
    margin-top: 10px !important;
    border-radius: 12px !important;
    padding: 10px 15px !important;
  }

  .new-mega-menu {
    min-width: 100% !important;
    padding: 15px !important;
  }

  .new-mega-menu .col-6 {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 20px;
  }

}

@media (max-width: 768px) {
  .hero-search-wrapper {
    flex-direction: column;
    border-radius: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.95);
  }

  .hero-search-input {
    margin-bottom: 15px;
    text-align: center;
    padding: 10px 0;
    font-size: 1rem;
  }

  .hero-search-btn {
    width: 100%;
    justify-content: center;
    border-radius: 12px;
  }

  .hero-search-wrapper i.bi-search {
    display: none;
  }

  .service-chip {
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  .hero-premium h1 {
    font-size: 2.2rem !important;
  }

  body {
    overflow-x: hidden;
  }

  .trust-strip {
    padding: 10px 15px;
    gap: 15px;
  }

  .trust-strip-item {
    font-size: 0.8rem;
    justify-content: center;
    width: 100%;
  }

}

@keyframes slideMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

}

/* ==========================================================================
   Navigation menu
   Ten top-level entries with up to four columns beneath them.  The bar expands
   at xl (1200px); below that the whole nav becomes a slide-in drawer
   (Bootstrap's .offcanvas-xl), because ten entries need about 1020px of their
   own and will not sit beside the logo and buttons on a narrower bar.
   ========================================================================== */

/* --------------------------------------------------------------- desktop -- */
@media (min-width: 1200px) {
  /* Room for the logo, ten entries and the action buttons. */
  #mainHeader > .container {
    max-width: min(1560px, calc(100% - 2.5rem));
  }

  #mainHeader .navbar > .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* offcanvas-xl turns static here; it still has to fill the bar so that the
     nav's mx-auto centring works. */
  .vh-drawer > .offcanvas-body {
    flex-grow: 1;
  }

  /* The drawer chrome only exists on small screens. */
  .vh-caret,
  .vh-foot-label {
    display: none !important;
  }

  /* Two-word labels such as "Dubai Setup" must not wrap onto a second line. */
  .new-header-nav > .nav-item > .nav-link {
    white-space: nowrap;
  }

  .new-mega-menu {
    max-width: calc(100vw - 3rem);
    padding: 22px 26px !important;
  }

  .new-mega-menu-wide {
    min-width: 1020px !important;
  }

  .new-mega-menu-sm {
    min-width: 300px !important;
  }

  /* Multi-column panels are wider than their nav item, so they anchor to the
     navbar and centre on it instead of hanging off the item's left edge. */
  .navbar-nav > .nav-item.has-mega {
    position: static;
  }

  .has-mega > .new-mega-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(15px);
  }

  .navbar .dropdown.has-mega:hover > .new-mega-menu {
    transform: translateX(-50%) translateY(0);
  }

  /* Narrow panels on the right of the bar align to their item's right edge so
     they stay on screen.  Bootstrap's .dropdown-menu-end cannot do this here:
     it only applies with [data-bs-popper], which its JS sets and this CSS-only
     hover menu never has. */
  .new-mega-menu-sm.new-mega-menu-right {
    left: auto;
    right: 0;
  }

  /* A hairline between columns, so the groups read as separate lists. */
  .new-mega-menu .row > [class^="col-"] + [class^="col-"] {
    border-left: 1px solid #f1f5f9;
  }
}

/* Between 1200px and 1400px the bar is tight: the logo, ten entries and the
   buttons need about 1070px and only ~1060px is free, so the links, the gutter
   and the button margin all give up a few pixels. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .new-header-nav .nav-link {
    padding: 10px 7px !important;
    font-size: 0.8rem;
  }

  #mainHeader .navbar > .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #navbarNav > .offcanvas-body > .vh-drawer-foot {
    margin-left: 0.5rem !important;
  }
}

/* --- Column headings (both layouts) ------------------------------------- */
.new-mega-menu .mega-col-title {
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8 !important;
  margin-bottom: 12px;
  padding-bottom: 8px;
}

.new-mega-menu .mega-col-title::after {
  width: 24px;
  height: 2px;
}

.new-mega-menu ul li a {
  padding: 7px 10px;
  line-height: 1.35;
  border-radius: 8px;
}

.new-mega-menu ul li a i {
  flex-shrink: 0;
  font-size: 0.62rem !important;
  margin-right: 8px !important;
}

/* ----------------------------------------------------------- the drawer -- */
@media (max-width: 1199.98px) {
  .vh-drawer {
    width: min(340px, 88vw) !important;
    border: 0 !important;
    box-shadow: 0 0 60px rgba(15, 23, 42, 0.25);
  }

  .vh-drawer,
  .vh-drawer > .offcanvas-body {
    background: #fff;
  }

  /* --- drawer header --- */
  .vh-drawer-head {
    padding: 18px 20px;
    border-bottom: 1px solid #eef2f7;
  }

  .vh-drawer-head .btn-close {
    --bs-btn-close-opacity: 0.5;
    padding: 0.6rem;
  }

  /* --- drawer body --- */
  .vh-drawer > .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .vh-drawer .navbar-nav {
    align-items: stretch !important;
    margin: 0 !important;
    width: 100%;
  }

  .vh-drawer .navbar-nav > .nav-item {
    width: 100%;
    border-bottom: 1px solid #f1f5f9;
  }

  .vh-drawer .navbar-nav > .nav-item:last-of-type {
    border-bottom: 0;
  }

  /* --- top-level rows --- */
  .new-header-nav > .nav-item > .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 10px !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
    text-align: left;
  }

  /* Bootstrap's caret is a triangle stuck to the text; use a real chevron on
     the right edge that turns as the row opens. */
  .new-header-nav .dropdown-toggle::after {
    display: none !important;
  }

  .vh-caret {
    font-size: 0.7rem;
    color: #94a3b8;
    transition: transform 0.25s ease, color 0.25s ease;
  }

  .new-header-nav > .nav-item > .nav-link[aria-expanded="true"] {
    color: #ff9c00 !important;
  }

  .new-header-nav > .nav-item > .nav-link[aria-expanded="true"] .vh-caret {
    transform: rotate(180deg);
    color: #ff9c00;
  }

  /* The desktop underline does not belong on a full-width row: the row is
     marked by its colour alone. */
  .new-header-nav .nav-link::before,
  .new-header-nav .nav-link.active-link::before {
    display: none !important;
  }

  /* --- the panel, as an indented sub-list --- */
  .new-mega-menu,
  .new-mega-menu-wide,
  .new-mega-menu-sm {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    /* The rail that ran down the side of the list was a long pale line with
       nothing to anchor it; the small indent alone says these belong to the
       row above. */
    padding: 0 0 4px 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    float: none !important;
    transform: none !important;
  }

  /* Bootstrap toggles these open on tap; nothing here may keep them hidden. */
  .vh-drawer .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  .new-mega-menu .row > [class^="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
  }

  /* In the drawer the heading is a quiet label over its group, without the
     little bar it carries on the wide menu. */
  .new-mega-menu .mega-col-title {
    margin: 10px 0 2px;
    padding-bottom: 0;
    font-size: 0.66rem !important;
  }

  .new-mega-menu .mega-col-title::after {
    display: none;
  }

  .new-mega-menu .row > [class^="col-"]:first-child .mega-col-title {
    margin-top: 2px;
  }

  /* Comfortable to tap, without the airy gaps that made the list drift. */
  .new-mega-menu ul li a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 7px 6px;
    font-size: 0.875rem;
    color: #475569 !important;
  }

  .new-mega-menu ul li a:active {
    background: #fff7ed;
  }

  /* --- drawer footer --- */
  .vh-drawer-foot {
    position: sticky;
    bottom: 0;
    margin: auto -12px 0;
    padding: 12px;
    gap: 10px !important;
    background: #fff;
    border-top: 1px solid #eef2f7;
  }

  .vh-drawer-foot .btn {
    flex: 1;
    gap: 8px;
    width: auto !important;
    height: 46px !important;
    font-weight: 600;
    font-size: 0.9rem;
  }

  .vh-foot-label {
    display: inline;
  }
}

/* The glass bar's blur has to live on a pseudo-element.  backdrop-filter on
   .glass-header itself would make it the containing block for position:fixed
   descendants, which collapses the drawer inside it to the height of the bar. */
.glass-header {
  position: relative;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition: background 0.3s ease;
}

.glass-header.scrolled::before {
  background: rgba(255, 255, 255, 0.95);
}

/* --- Brand logo ---------------------------------------------------------- */
.vh-logo {
  width: auto;
  height: 34px;
  display: block;
}

@media (min-width: 1200px) {
  .vh-logo {
    height: 38px;
  }
}

.vh-logo-footer {
  height: 46px;
}

/* The drawer's own header has a little more room than the bar. */
.vh-drawer-head .vh-logo {
  height: 36px;
}


/* ==========================================================================
   Page design system
   Reusable blocks for the service pages.  New class names only, so nothing
   here changes how the older pages render.
   ========================================================================== */

/* --- Section rhythm ------------------------------------------------------ */
.vh-sec {
  padding: 84px 0;
  position: relative;
}

.vh-sec-tint {
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
}

.vh-sec-dark {
  background: #0f172a;
  color: #cbd5e1;
}

.vh-sec-dark h2,
.vh-sec-dark h3,
.vh-sec-dark h4,
.vh-sec-dark h5 {
  color: #fff;
}

/* Eyebrow label: small caps with a short accent rule. */
.vh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff9c00;
  margin-bottom: 14px;
}

.vh-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #ff9c00;
  border-radius: 2px;
}

.vh-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.15;
}

.vh-sec-dark .vh-title {
  color: #fff;
}

.vh-lede {
  color: #64748b;
  line-height: 1.85;
  font-size: 1.05rem;
}

.vh-sec-dark .vh-lede {
  color: #94a3b8;
}

/* A section that is nothing but a heading and the prose under it: the text is
   the whole block, so it is set justified and sits flush on both edges. Where
   a section also carries cards, lists or a table, the prose stays ranged left
   so it lines up with them. */
p.vh-justify {
  text-align: justify;
  text-justify: inter-word;
}

/* --- Dark hero ----------------------------------------------------------- */
.vh-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 78% -10%, rgba(255, 156, 0, 0.20), transparent 60%),
              linear-gradient(160deg, #0f172a 0%, #16233b 55%, #0f172a 100%);
  color: #cbd5e1;
  padding: 150px 0 90px;
}

.vh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 30% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 30% 20%, #000 0%, transparent 75%);
  pointer-events: none;
}

.vh-hero > .container {
  position: relative;
  z-index: 1;
}

.vh-hero h1 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.vh-hero .vh-accent-word {
  color: #ff9c00;
}

.vh-hero-lede {
  color: #a8b6cb;
  font-size: 1.12rem;
  line-height: 1.8;
}

.vh-hero-list li {
  color: #e2e8f0;
  padding: 7px 0;
}

.vh-hero-list i {
  color: #ff9c00;
}

/* Breadcrumb sitting on the dark hero. */
.vh-hero .breadcrumb-item,
.vh-hero .breadcrumb-item a {
  color: #94a3b8;
  text-decoration: none;
}

.vh-hero .breadcrumb-item a:hover {
  color: #ff9c00;
}

.vh-hero .breadcrumb-item.active {
  color: #e2e8f0;
}

.vh-hero .breadcrumb-item + .breadcrumb-item::before {
  color: #475569;
}

/* Glass enquiry card. */
.vh-form-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(2, 6, 23, 0.45);
  padding: 32px;
}

.vh-form-card .form-control {
  background: #f8fafc;
  border: 1px solid #e6ebf2;
  padding: 12px 14px;
}

.vh-form-card .form-control:focus {
  background: #fff;
  border-color: #ff9c00;
  box-shadow: 0 0 0 4px rgba(255, 156, 0, 0.14);
}

/* --- Stat band ----------------------------------------------------------- */
.vh-stat-num {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.vh-stat-label {
  color: #94a3b8;
  font-size: 0.85rem;
  margin-top: 4px;
}

.vh-stat + .vh-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Cards --------------------------------------------------------------- */
.vh-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid #eaeef4;
  border-radius: 18px;
  padding: 30px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vh-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff9c00, #ffbe5c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.vh-card:hover {
  transform: translateY(-6px);
  border-color: #ffe0b3;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.10);
}

.vh-card:hover::before {
  transform: scaleX(1);
}

.vh-card h5,
.vh-card h6 {
  color: #0f172a;
  font-weight: 700;
}

.vh-card p {
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 0;
}

/* Icon tile. */
.vh-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #ff9c00;
  background: linear-gradient(145deg, rgba(255, 156, 0, 0.18), rgba(255, 156, 0, 0.05));
  border: 1px solid rgba(255, 156, 0, 0.16);
  flex-shrink: 0;
}

/* --- Numbered rail ------------------------------------------------------- */
.vh-rail {
  position: relative;
  padding-left: 76px;
}

.vh-rail::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, #ff9c00, rgba(255, 156, 0, 0.15));
}

.vh-rail-step {
  position: relative;
  padding-bottom: 34px;
}

.vh-rail-step:last-child {
  padding-bottom: 0;
}

.vh-rail-step > .vh-rail-num {
  position: absolute;
  left: -76px;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #ff9c00;
  background: #fff;
  border: 2px solid #ff9c00;
  box-shadow: 0 0 0 6px rgba(255, 156, 0, 0.10);
}

.vh-rail-body {
  background: #fff;
  border: 1px solid #eaeef4;
  border-radius: 16px;
  padding: 24px 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vh-rail-step:hover .vh-rail-body {
  transform: translateX(4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.vh-rail-body h4 {
  font-size: 1.06rem;
  font-weight: 700;
  color: #0f172a;
}

.vh-rail-body p {
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 0;
}

.vh-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #b45309;
  background: rgba(255, 156, 0, 0.14);
  border-radius: 999px;
  padding: 3px 10px;
  vertical-align: middle;
}

/* --- Pricing plans ------------------------------------------------------- */
.vh-plan {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid #eaeef4;
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vh-plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.10);
}

.vh-plan-name {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.vh-plan-price {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.1;
}

.vh-plan-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.92rem;
}

.vh-plan-list li {
  position: relative;
  padding: 8px 0 8px 26px;
  color: #64748b;
  line-height: 1.6;
  border-bottom: 1px solid #f4f7fb;
}

.vh-plan-list li:last-child {
  border-bottom: 0;
}

.vh-plan-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 8px;
  font-weight: 700;
  color: #ff9c00;
}

/* The recommended tier: dark, lifted, and visibly the default choice. */
.vh-plan-featured {
  background: linear-gradient(165deg, #16233b 0%, #0f172a 100%);
  border-color: transparent;
  box-shadow: 0 30px 70px rgba(2, 6, 23, 0.30);
}

.vh-plan-featured .vh-plan-name {
  color: #ff9c00;
}

.vh-plan-featured .vh-plan-price,
.vh-plan-featured h5 {
  color: #fff;
}

.vh-plan-featured .vh-plan-list li {
  color: #cbd5e1;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.vh-plan-featured .text-muted {
  color: #94a3b8 !important;
}

.vh-plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f172a;
  background: #ff9c00;
  border-radius: 999px;
  padding: 5px 12px;
}

@media (min-width: 992px) {
  .vh-plan-featured {
    transform: translateY(-14px);
  }

  .vh-plan-featured:hover {
    transform: translateY(-20px);
  }
}

/* --- Comparison table ---------------------------------------------------- */
.vh-compare {
  border: 1px solid #eaeef4;
  border-radius: 18px;
  overflow: auto;
  background: #fff;
}

.vh-compare table {
  margin: 0;
  min-width: 900px;
}

.vh-compare thead th {
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 18px;
  white-space: nowrap;
  border: 0;
}

.vh-compare tbody th {
  font-weight: 600;
  color: #0f172a;
  background: #fff;
}

.vh-compare tbody td,
.vh-compare tbody th {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
  vertical-align: middle;
}

.vh-compare tbody tr:last-child td,
.vh-compare tbody tr:last-child th {
  border-bottom: 0;
}

.vh-compare tbody tr:hover td,
.vh-compare tbody tr:hover th {
  background: #fcfdff;
}

/* The column this page is about. */
.vh-compare .vh-col-this {
  background: rgba(255, 156, 0, 0.07);
  color: #0f172a;
  font-weight: 600;
}

.vh-compare thead .vh-col-this {
  background: #ff9c00;
  color: #0f172a;
}

/* Keep the row label in view while the rest scrolls sideways. */
.vh-compare tbody th:first-child,
.vh-compare thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.vh-compare thead th:first-child {
  background: #0f172a;
}

/* --- Callout ------------------------------------------------------------- */
.vh-note {
  background: linear-gradient(135deg, rgba(255, 156, 0, 0.09), rgba(255, 156, 0, 0.03));
  border: 1px solid rgba(255, 156, 0, 0.20);
  border-radius: 16px;
  padding: 22px 26px;
}

/* --- Accordion ----------------------------------------------------------- */
.vh-faq .accordion-item {
  background: #fff;
  border: 1px solid #eaeef4;
  border-radius: 14px !important;
  margin-bottom: 12px;
  overflow: hidden;
}

.vh-faq .accordion-button {
  font-weight: 600;
  color: #0f172a;
  padding: 20px 22px;
  background: #fff;
  box-shadow: none;
}

.vh-faq .accordion-button:not(.collapsed) {
  color: #ff9c00;
  background: #fffaf2;
}

.vh-faq .accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(255, 156, 0, 0.12);
}

.vh-faq .accordion-body {
  color: #64748b;
  line-height: 1.85;
  /* The open question keeps its own tinted background, so the answer needs a
     gap of its own -- without one the first line sits against that edge. */
  padding: 18px 22px 22px;
}

/* --- Closing CTA --------------------------------------------------------- */
.vh-cta {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 56px 40px;
  text-align: center;
  background: radial-gradient(900px 400px at 50% -30%, rgba(255, 156, 0, 0.22), transparent 65%),
              linear-gradient(160deg, #16233b 0%, #0f172a 100%);
}

.vh-cta h2 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vh-cta p {
  color: #a8b6cb;
}

@media (max-width: 767.98px) {
  .vh-sec {
    padding: 56px 0;
  }

  .vh-hero {
    padding: 120px 0 64px;
  }

  .vh-rail {
    padding-left: 56px;
  }

  .vh-rail::before {
    left: 19px;
  }

  .vh-rail-step > .vh-rail-num {
    left: -56px;
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .vh-stat + .vh-stat {
    border-left: 0;
  }

  .vh-cta {
    padding: 40px 22px;
  }
}

/* ==========================================================================
   Home hero
   Dark, centred, with the second headline line typed out one service at a
   time.  The typed line reserves its height so nothing below it shifts.
   ========================================================================== */
.vh-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 160px 0 104px;
  text-align: center;
  color: #cbd5e1;
  background:
    radial-gradient(1000px 620px at 14% 6%, rgba(99, 102, 241, 0.22), transparent 62%),
    radial-gradient(900px 540px at 86% 0%, rgba(255, 156, 0, 0.18), transparent 60%),
    radial-gradient(760px 620px at 50% 118%, rgba(56, 189, 248, 0.12), transparent 62%),
    linear-gradient(165deg, #0a1020 0%, #111a2e 48%, #0a1020 100%);
}

/* Fine grid, faded out towards the edges. */
.vh-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(72% 62% at 50% 34%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 34%, #000 0%, transparent 78%);
}

/* A slow-drifting glow so the panel is not completely static. */
.vh-home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 780px;
  height: 780px;
  left: 50%;
  top: -320px;
  margin-left: -390px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 156, 0, 0.16), transparent 62%);
  animation: vh-hero-drift 16s ease-in-out infinite alternate;
}

@keyframes vh-hero-drift {
  from { transform: translate3d(-40px, 0, 0) scale(1); }
  to   { transform: translate3d(40px, 26px, 0) scale(1.10); }
}

.vh-home-hero > .container {
  position: relative;
  z-index: 1;
}

/* --- badge --- */
.vh-home-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.87rem;
  font-weight: 600;
  color: #e2e8f0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- headline --- */
.vh-home-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #fff;
  font-size: clamp(2rem, 5.4vw, 4rem);
  margin: 28px 0 0;
}

.vh-typed-line {
  display: block;
  min-height: 1.25em;
  background: linear-gradient(95deg, #ffb347 0%, #ff9c00 45%, #ffcf82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vh-typed-caret {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 5px;
  vertical-align: -0.06em;
  border-radius: 2px;
  background: #ff9c00;
  box-shadow: 0 0 12px rgba(255, 156, 0, 0.8);
  animation: vh-caret-blink 1s steps(1) infinite;
}

@keyframes vh-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.vh-home-lede {
  color: #94a3b8;
  font-size: 1.12rem;
  line-height: 1.8;
  max-width: 620px;
  margin: 24px auto 0;
}

/* --- service chips --- */
.vh-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.vh-home-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.vh-home-chip:hover {
  color: #fff;
  background: rgba(255, 156, 0, 0.16);
  border-color: rgba(255, 156, 0, 0.45);
  transform: translateY(-2px);
}

/* --- call to action --- */
.vh-home-cta {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.vh-home-cta .vh-btn-cta {
  box-shadow: 0 14px 40px rgba(255, 156, 0, 0.32);
}

.vh-home-cta .btn i {
  transition: transform 0.25s ease;
}

.vh-home-cta .btn:hover i {
  transform: translateX(4px);
}

/* --- trust row --- */
.vh-home-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.92rem;
}

.vh-home-trust > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vh-home-trust i {
  color: #ff9c00;
}

.vh-home-trust-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 767.98px) {
  .vh-home-hero {
    padding: 118px 0 62px;
  }

  .vh-home-hero::after {
    width: 520px;
    height: 520px;
    margin-left: -260px;
    top: -240px;
  }

  .vh-home-badge {
    font-size: 0.78rem;
    padding: 8px 15px;
  }

  .vh-home-lede {
    font-size: 1rem;
    margin-top: 20px;
  }

  .vh-home-cta {
    margin-top: 28px;
  }

  .vh-home-cta .btn {
    width: 100%;
  }

  .vh-home-trust {
    margin-top: 34px;
    padding-top: 24px;
    gap: 10px;
    font-size: 0.85rem;
  }

  /* Needs to outrank `.vh-home-trust > span`, which sets inline-flex. */
  .vh-home-trust > .vh-home-trust-sep {
    display: none;
  }

  /* Nine stacked chips push the call to action off the screen, so on a phone
     they become one swipeable row instead. */
  .vh-chip-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -12px;
    margin-right: -12px;
    padding: 4px 12px;
  }

  .vh-chip-row::-webkit-scrollbar {
    display: none;
  }

  .vh-home-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-size: 0.84rem;
    padding: 8px 15px;
  }
}

/* Someone who has asked for less motion gets the finished sentence and a
   still background, not a loop that never settles. */
@media (prefers-reduced-motion: reduce) {
  .vh-typed-caret {
    animation: none;
    opacity: 0;
  }

  .vh-home-hero::after {
    animation: none;
  }
}


/* --- Feature card ---------------------------------------------------------
   For lists with many items whose descriptions run long and uneven.  Each is
   a card that fills its grid cell, so every card in a row ends level however
   much text it holds -- which is what stops the column from going ragged. */
.vh-feature {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eaeef4;
  border-radius: 16px;
  padding: 26px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vh-feature:hover {
  transform: translateY(-4px);
  border-color: #ffe0b3;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.vh-feature-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.vh-feature-ico {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #ff9c00;
  background: linear-gradient(145deg, rgba(255, 156, 0, 0.18), rgba(255, 156, 0, 0.05));
  border: 1px solid rgba(255, 156, 0, 0.16);
}

.vh-feature h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

.vh-feature p {
  margin: 0;
  color: #64748b;
  line-height: 1.8;
  font-size: 0.92rem;
}

.vh-sec-dark .vh-feature {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.09);
}

.vh-sec-dark .vh-feature h5 {
  color: #fff;
}

.vh-sec-dark .vh-feature p {
  color: #94a3b8;
}


/* --- Enquiry form ---------------------------------------------------------
   The honeypot is moved off-screen rather than display:none, because some
   bots skip anything hidden outright but still fill what they can reach. */
.vh-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vh-form-msg {
  margin-top: 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  min-height: 1px;
}

.vh-form-msg.is-ok {
  color: #15803d;
}

.vh-form-msg.is-error {
  color: #b91c1c;
}

.vh-form-card button[disabled] {
  opacity: 0.7;
  cursor: progress;
}


/* --- Checklist ------------------------------------------------------------
   For eligibility and requirement lists: short, parallel items that read as
   one set. Boxes would chop them apart, so they share a tinted panel and are
   separated by rules instead. */
.vh-checklist {
  background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 100%);
  border: 1px solid #eaeef4;
  border-radius: 20px;
  padding: 10px 34px;
}

.vh-check {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid #e9edf4;
}

/* The first item of each column starts the list, so it needs no rule above. */
.vh-checklist > [class^="col-"]:first-child .vh-check,
.vh-checklist > .col-md-6:nth-child(2) .vh-check {
  border-top: 0;
}

.vh-check-tick {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: #fff;
  background: #ff9c00;
}

.vh-check h6 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
}

.vh-check p {
  margin: 0;
  color: #64748b;
  line-height: 1.75;
  font-size: 0.92rem;
}

@media (max-width: 767.98px) {
  .vh-checklist {
    padding: 6px 20px;
  }

  .vh-check {
    padding: 20px 0;
  }
}

/* --- Document panel -------------------------------------------------------
   One container holding the groups side by side, rather than a card each:
   these are parts of a single checklist, not competing options. */
.vh-docs {
  background: #fff;
  border: 1px solid #eaeef4;
  border-radius: 20px;
  overflow: hidden;
}

.vh-docs > [class^="col-"] {
  padding: 34px 30px;
}

@media (min-width: 768px) {
  .vh-docs > [class^="col-"] + [class^="col-"] {
    border-left: 1px solid #eef2f7;
  }
}

@media (max-width: 767.98px) {
  .vh-docs > [class^="col-"] + [class^="col-"] {
    border-top: 1px solid #eef2f7;
  }
}

.vh-docs-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.vh-docs-head i {
  color: #ff9c00;
  font-size: 1.2rem;
}

.vh-docs-head h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.vh-docs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vh-docs li {
  position: relative;
  padding: 9px 0 9px 22px;
  color: #64748b;
  line-height: 1.7;
  font-size: 0.92rem;
}

.vh-docs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffc670;
}

/* A sub-heading inside a group: it names the papers under it, so it reads as
   a label rather than as one more document. */
.vh-docs li.vh-docs-label {
  padding-left: 0;
  padding-bottom: 2px;
  color: #1e293b;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.vh-docs li.vh-docs-label::before {
  display: none;
}

.vh-docs li.vh-docs-label:not(:first-child) {
  padding-top: 18px;
}

/* Tiles: a short name and its icon, nothing more.  Used where a source lists
   bare labels -- restricted activities, say -- with no description to carry. */
.vh-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  padding: 30px 18px;
  text-align: center;
  border: 1px solid #e8ecf3;
  border-radius: 18px;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vh-tile i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff4e3;
  color: #f0912a;
  font-size: 1.4rem;
}

.vh-tile span {
  color: #1e293b;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.45;
}

.vh-tile:hover {
  transform: translateY(-4px);
  border-color: #ffd9a8;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .vh-tile {
    transition: none;
  }

  .vh-tile:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Home page: sections added from the reference designs.
   --------------------------------------------------------------------------- */

/* Expert cards: one per kind of professional the visitor can consult. */
.vh-pro {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 28px;
  text-align: center;
  border: 1px solid #e8ecf3;
  border-radius: 20px;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vh-pro:hover {
  transform: translateY(-5px);
  border-color: #ffd9a8;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1);
}

.vh-pro-ico {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: #fff4e3;
  color: #f0912a;
  font-size: 1.6rem;
}

.vh-pro h3 {
  margin-bottom: 10px;
  color: #0f172a;
  font-weight: 700;
  font-size: 1.15rem;
}

.vh-pro p {
  flex: 1 1 auto;
  margin-bottom: 22px;
  color: #64748b;
  line-height: 1.65;
  font-size: 0.95rem;
}

/* The service directory: every category, and what sits under it. */
.vh-dir-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
  padding: 0;
  border: 0;
}

.vh-dir-nav .nav-link {
  padding: 9px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

.vh-dir-nav .nav-link:hover {
  border-color: #ffd9a8;
  color: #0f172a;
}

.vh-dir-nav .nav-link.active {
  border-color: transparent;
  background: #0f172a;
  color: #fff;
}


/* The banner that offers a phone call, and the quieter bar above the footer. */
.vh-ask {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border-radius: 22px;
  background: radial-gradient(760px 340px at 80% -40%, rgba(37, 99, 235, 0.5), transparent 62%),
              linear-gradient(115deg, #0b1220 0%, #12203c 55%, #0b1220 100%);
}

.vh-ask h2 {
  margin-bottom: 10px;
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.vh-ask p {
  max-width: 62ch;
  margin-bottom: 0;
  color: #b6c4dc;
  line-height: 1.7;
}




@media (max-width: 575.98px) {
  .vh-ask {
    padding: 26px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vh-pro,
  .vh-dir-link,
  .vh-dir-link i,
  .vh-dir-nav .nav-link {
    transition: none;
  }

  .vh-pro:hover {
    transform: none;
  }
}

/* A service in the directory: what it is, and one line about it. */
.vh-svc {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 18px;
  border: 1px solid #e8ecf3;
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.vh-svc-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.vh-svc-ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff4e3;
  color: #f0912a;
  font-size: 1rem;
}

.vh-svc h3 {
  margin: 6px 0 0;
  color: #0f172a;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}

.vh-svc p {
  flex: 1 1 auto;
  margin: 0 0 14px;
  color: #64748b;
  line-height: 1.6;
  font-size: 0.88rem;
}

.vh-svc-more {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
  color: #f0912a;
  font-weight: 600;
  font-size: 0.85rem;
}

.vh-svc-more i {
  transition: transform 0.22s ease;
}

.vh-svc:hover {
  transform: translateY(-4px);
  border-color: #ffd9a8;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.09);
}

.vh-svc:hover .vh-svc-more i {
  transform: translateX(4px);
}

/* "We do right by you": the claim, and the panel that stands in for a photo. */
.vh-claim-eyebrow {
  color: #b91c1c;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.vh-chip-lg {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 11px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.92rem;
}

.vh-chip-lg i {
  font-size: 1rem;
}

.vh-chip-a { background: #fee2e2; color: #b91c1c; }
.vh-chip-b { background: #fef3c7; color: #b45309; }
.vh-chip-c { background: #dcfce7; color: #15803d; }

.vh-pillars {
  display: grid;
  gap: 14px;
  padding: 30px;
  border: 1px solid #e8ecf3;
  border-radius: 22px;
  background: linear-gradient(150deg, #f8fafc 0%, #eef4ff 100%);
}

.vh-pillar {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.vh-pillar i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #0f172a;
  color: #ffc670;
  font-size: 1.05rem;
}

.vh-pillar h4 {
  margin: 0 0 3px;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.98rem;
}

.vh-pillar p {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
}

/* "Designed by experts": the disciplines that sign off on the work, in orbit. */
.vh-orbit {
  position: relative;
  width: min(380px, 100%);
  margin: 0 auto;
  aspect-ratio: 1;
}

.vh-orbit-ring {
  position: absolute;
  border: 1px dashed #cbd5e1;
  border-radius: 50%;
  inset: 8%;
}

.vh-orbit-ring + .vh-orbit-ring {
  inset: 26%;
}

.vh-orbit-core {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(150deg, #16233b, #0f172a);
  color: #ffc670;
  font-size: 1.9rem;
  inset: 33%;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.vh-orbit-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  padding: 6px;
  border: 1px solid #e8ecf3;
  border-radius: 50%;
  background: #fff;
  color: #0f172a;
  text-align: center;
  font-weight: 700;
  font-size: 0.66rem;
  line-height: 1.25;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.vh-orbit-node i {
  display: block;
  margin-bottom: 2px;
  color: #f0912a;
  font-size: 1rem;
}

/* Two rings and the core come first, so the six nodes are children 4 to 9. */
.vh-orbit-node:nth-child(4) { top: 6%;  left: 50%; }
.vh-orbit-node:nth-child(5) { top: 28%; left: 90%; }
.vh-orbit-node:nth-child(6) { top: 76%; left: 82%; }
.vh-orbit-node:nth-child(7) { top: 94%; left: 44%; }
.vh-orbit-node:nth-child(8) { top: 70%; left: 12%; }
.vh-orbit-node:nth-child(9) { top: 24%; left: 14%; }

/* The figures, as tiles that step down the column the way the reference does. */
.vh-fig {
  padding: 24px 26px;
  border: 1px solid #e8ecf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.vh-fig-num {
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: #0f172a;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  letter-spacing: -0.02em;
}

.vh-fig-num span {
  color: #16a34a;
  font-size: 1.1rem;
}

.vh-fig p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.92rem;
}

@media (min-width: 992px) {
  .vh-fig-stagger > [class^="col-"]:nth-child(even) {
    margin-top: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vh-svc,
  .vh-svc-more i {
    transition: none;
  }

  .vh-svc:hover {
    transform: none;
  }
}

/* The orbit's outer nodes sit half outside their own box by design; on a
   narrow screen that pushes them past the edge, so they shrink and pull in. */
@media (max-width: 575.98px) {
  .vh-orbit {
    width: min(300px, 84vw);
  }

  .vh-orbit-node {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    font-size: 0.58rem;
  }

  .vh-orbit-node i {
    font-size: 0.85rem;
  }

  .vh-orbit-node:nth-child(5) { left: 86%; }
  .vh-orbit-node:nth-child(6) { left: 80%; }
  .vh-orbit-node:nth-child(8) { left: 18%; }
  .vh-orbit-node:nth-child(9) { left: 17%; }
}

/* A figure and what it counts, for the team section. */
.vh-count {
  padding: 22px 24px;
  border: 1px solid #e8ecf3;
  border-radius: 16px;
  background: #fff;
}

.vh-count strong {
  display: block;
  color: #0f172a;
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}

.vh-count span {
  color: #64748b;
  font-size: 0.9rem;
}

/* A page that opens with a statement rather than an enquiry form. */
.vh-hero-plain {
  padding: 140px 0 80px;
  text-align: center;
}

.vh-hero-plain h1 {
  max-width: 20ch;
  margin: 0 auto 20px;
}

.vh-hero-plain p {
  max-width: 62ch;
  margin: 0 auto;
  color: #b6c4dc;
  line-height: 1.75;
  font-size: 1.08rem;
}

/* ---------------------------------------------------------------------------
   About page.
   --------------------------------------------------------------------------- */

.vh-shot {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}

.vh-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.vh-shot-cap {
  margin-top: 12px;
  color: #64748b;
  text-align: center;
  font-size: 0.86rem;
}

/* The milestones: a spine down the middle, entries stepping either side. */
.vh-time {
  position: relative;
  padding: 8px 0;
}

.vh-time::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 156, 0, 0.1), #ff9c00 12%, #ff9c00 88%, rgba(255, 156, 0, 0.1));
}

.vh-time-item {
  position: relative;
  padding: 0 0 34px 66px;
}

.vh-time-item:last-child {
  padding-bottom: 0;
}

.vh-time-year {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255, 156, 0, 0.55);
  border-radius: 50%;
  background: #0f172a;
  color: #ffc670;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

.vh-time-card {
  padding: 22px 24px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

.vh-time-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
}

.vh-time-card p {
  margin: 0;
  color: #b6c4dc;
  line-height: 1.7;
  font-size: 0.94rem;
}

@media (min-width: 992px) {
  .vh-time::before {
    left: 50%;
    margin-left: -1px;
  }

  .vh-time-item {
    width: 50%;
    padding: 0 0 44px 0;
  }

  .vh-time-item:nth-child(odd) {
    padding-right: 58px;
    text-align: right;
  }

  .vh-time-item:nth-child(even) {
    margin-left: 50%;
    padding-left: 58px;
  }

  .vh-time-year {
    top: 4px;
    left: auto;
    right: -23px;
  }

  .vh-time-item:nth-child(even) .vh-time-year {
    right: auto;
    left: -23px;
  }
}

/* The gallery: what the years above actually looked like.

   Photographs come in whatever shape they were taken, so the gallery is laid
   out in justified rows rather than a fixed grid. Each figure carries its
   image's aspect ratio in --r and grows in proportion to it, which gives every
   photograph in a row the same height while the row fills the full width.
   Portrait and landscape sit side by side, and no cell is left empty however
   many photographs there are. */
.vh-gal {
  --row: 190px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vh-gal figure {
  position: relative;
  flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * var(--row));
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #0f172a;
}

.vh-gal img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r, 1.5);
  object-fit: cover;
  transition: transform 0.4s ease;
}

.vh-gal figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px 16px 14px;
  background: linear-gradient(transparent, rgba(8, 13, 25, 0.88));
  color: #e2e8f0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.vh-gal figure:hover img {
  transform: scale(1.045);
}

@media (min-width: 768px) {
  .vh-gal {
    --row: 200px;
    gap: 16px;
  }
}

@media (min-width: 1200px) {
  .vh-gal {
    --row: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vh-gal img {
    transition: none;
  }

  .vh-gal figure:hover img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Contact page.
   --------------------------------------------------------------------------- */

.vh-reach {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  height: 100%;
  padding: 24px 24px;
  border: 1px solid #e8ecf3;
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.vh-reach i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fff4e3;
  color: #f0912a;
  font-size: 1.15rem;
}

.vh-reach h3 {
  margin: 0 0 4px;
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vh-reach p {
  margin: 0;
  color: #0f172a;
  font-weight: 600;
  line-height: 1.5;
  font-size: 1rem;
  word-break: break-word;
}

a.vh-reach:hover {
  transform: translateY(-4px);
  border-color: #ffd9a8;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.09);
}

/* The map sits in its own frame so it keeps the page's corners. */
.vh-map {
  overflow: hidden;
  border: 1px solid #e8ecf3;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  line-height: 0;
}

.vh-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

@media (max-width: 767.98px) {
  .vh-map iframe {
    height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vh-reach {
    transition: none;
  }

  a.vh-reach:hover {
    transform: none;
  }
}

/* A page that is only prose: a policy, a notice. One column, read top down. */
.vh-prose h2 {
  margin: 40px 0 14px;
  color: #0f172a;
  font-weight: 700;
  font-size: 1.4rem;
}

.vh-prose h3 {
  margin: 30px 0 12px;
  color: #0f172a;
  font-weight: 700;
  font-size: 1.12rem;
}

.vh-prose > :first-child {
  margin-top: 0;
}

.vh-prose p {
  margin-bottom: 18px;
  color: #475569;
  line-height: 1.85;
}

.vh-prose-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.vh-prose-list li {
  position: relative;
  padding: 7px 0 7px 26px;
  color: #475569;
  line-height: 1.75;
}

.vh-prose-list li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffc670;
}

.vh-prose a {
  color: #d97706;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The sitemap: every page, grouped the way the menu groups them. */
.vh-map-group {
  height: 100%;
  padding: 24px 26px;
  border: 1px solid #e8ecf3;
  border-radius: 18px;
  background: #fff;
}

.vh-map-group h2 {
  margin: 0 0 14px;
  color: #0f172a;
  font-weight: 700;
  font-size: 1.05rem;
}

.vh-map-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vh-map-group li + li {
  margin-top: 2px;
}

.vh-map-group a {
  display: block;
  padding: 6px 0;
  color: #475569;
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.18s ease;
}

.vh-map-group a:hover {
  color: #d97706;
}

@media (prefers-reduced-motion: reduce) {
  .vh-map-group a {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Home: the bento of who we work with.
   --------------------------------------------------------------------------- */

.vh-bento {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}

.vh-bento-photo {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 420px;
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
}

.vh-bento-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.vh-bento-photo figcaption {
  position: absolute;
  top: 18px;
  left: 18px;
  max-width: calc(100% - 36px);
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
}

.vh-bento-photo strong {
  display: block;
  color: #0f172a;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
}

.vh-bento-photo span {
  color: #d97706;
  font-weight: 600;
  font-size: 0.9rem;
}

.vh-bento-photo:hover img {
  transform: scale(1.04);
}

.vh-bento-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 268px;
  padding: 32px 32px 28px;
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vh-bento-tile h3 {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: white;
}

.vh-bento-tile p {
  margin: 0;
  max-width: 40ch;
  line-height: 1.6;
  font-size: 1rem;
}

.vh-bento-tile .vh-bento-go {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  font-weight: 600;
  font-size: 0.95rem;
}

.vh-bento-tile .vh-bento-go i {
  transition: transform 0.25s ease;
}

.vh-bento-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
}

.vh-bento-tile:hover .vh-bento-go i {
  transform: translateX(4px);
}

/* Each tile takes its own colour, the way the reference sheet does. */
/* Each tile carries a photograph of the firm at work, under a wash of the
   tile's own colour. The wash is what keeps the words readable: a photograph
   has light and dark in it wherever it likes, and the heading, the sentence
   and the link all sit straight on top. The paths are relative to this file,
   so a staging folder serves them as happily as the domain root does. */
.vh-tile-blue,
.vh-tile-rose,
.vh-tile-pink {
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.vh-tile-blue {
  background-image: linear-gradient(165deg, rgba(23, 47, 116, 0.88), rgba(30, 64, 150, 0.68) 48%, rgba(9, 20, 54, 0.92)),
                    url('../img/about/istart-stall.webp');
}

.vh-tile-rose {
  background-image: linear-gradient(165deg, rgba(136, 19, 55, 0.88), rgba(159, 18, 57, 0.68) 48%, rgba(66, 8, 28, 0.92)),
                    url('../img/about/7.jpg');
}

.vh-tile-pink {
  background-image: linear-gradient(165deg, rgba(131, 24, 67, 0.88), rgba(157, 23, 77, 0.66) 48%, rgba(62, 10, 35, 0.92)),
                    url('../img/about/desk-income-tax.webp');
}

/* On the photograph the link needs its own weight to stand away from the
   sentence above it. */
.vh-tile-blue .vh-bento-go,
.vh-tile-rose .vh-bento-go,
.vh-tile-pink .vh-bento-go {
  color: #fff;
  font-weight: 700;
}
.vh-tile-mint   { background: linear-gradient(155deg, #dcfce7, #bbf7d0); color: #14532d; }
.vh-tile-sand   { background: linear-gradient(155deg, #fef3c7, #fde68a); color: #92400e; }
.vh-tile-slate  { background: linear-gradient(155deg, #e2e8f0, #cbd5e1); color: #1e293b; }

.vh-bento-photo:first-child { background: #dbeafe; }

/* A placeholder is a flat card, not a photograph: show all of it. */
.vh-bento-photo img.vh-is-placeholder {
  object-fit: contain;
}

@media (min-width: 768px) {
  .vh-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .vh-bento {
    /* One tall photograph down the left, the tiles beside it: two across the
       top, one across the width of both below. */
    grid-template-columns: 1.05fr 1fr 1fr;
  }

  /* "1 / -1" would end at the explicit grid, and these rows are implicit,
     so the span is given as a count. */
  .vh-bento > .vh-bento-photo:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* Two tiles across the top of the block, one across the width below. */
  .vh-bento > :nth-child(4) {
    grid-column: 2 / span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vh-bento-photo img,
  .vh-bento-tile,
  .vh-bento-tile .vh-bento-go i {
    transition: none;
  }

  .vh-bento-photo:hover img,
  .vh-bento-tile:hover {
    transform: none;
  }
}

/* A list panel flows its items across columns rather than stacking them all
   in the first one and leaving the rest of the panel empty. */
.vh-docs.vh-list-1,
.vh-docs.vh-list-2,
.vh-docs.vh-list-3 {
  display: block;
  padding: 26px 30px;
}

.vh-docs.vh-list-1 > ul,
.vh-docs.vh-list-2 > ul,
.vh-docs.vh-list-3 > ul {
  margin: 0;
  padding: 0;
  column-gap: 46px;
}

@media (min-width: 768px) {
  .vh-docs.vh-list-2 > ul { columns: 2; }
  .vh-docs.vh-list-3 > ul { columns: 2; }
}

@media (min-width: 992px) {
  .vh-docs.vh-list-3 > ul { columns: 3; }
}

/* An item must not be split down the middle by a column break. */
.vh-docs.vh-list-2 > ul > li,
.vh-docs.vh-list-3 > ul > li {
  break-inside: avoid;
}

/* The drawing beside an introduction. Sized by the column, not by the file. */
.vh-illus {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 991.98px) {
  .vh-illus {
    max-width: 320px;
  }
}

/* ---------------------------------------------------------------------------
   Trademark classes
   --------------------------------------------------------------------------- */

/* The box above a list of goods, and the line under it that says how many
   are showing. */
.vh-tm-filter {
  height: 52px;
  padding: 0 18px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  font-size: 1rem;
}

.vh-tm-filter:focus {
  border-color: #ffcf99;
  box-shadow: 0 0 0 4px rgba(240, 145, 42, 0.14);
}

.vh-tm-count {
  color: #64748b;
  font-size: 0.9rem;
}

.vh-tm-empty {
  margin: 8px 0 0;
  color: #64748b;
}

.vh-tm-note {
  max-width: 640px;
  margin-inline: auto;
  color: #94a3b8;
  font-size: 0.86rem;
  line-height: 1.6;
}

/* A class can list several hundred goods. Printing all of them makes a page
   seventeen thousand pixels tall, so the panel keeps its own scrollbar: the
   whole list is still in the markup, it just does not push the rest of the
   page off the screen. */
.vh-docs.vh-tm-list {
  max-height: 620px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vh-docs.vh-tm-list > ul > li {
  padding-block: 6px;
  line-height: 1.5;
}

.vh-docs.vh-tm-list > ul > li[hidden] {
  display: none;
}

@media (min-width: 992px) {
  .vh-docs.vh-tm-list > ul {
    columns: 3;
  }
}

/* A search result: the class number, then what matched inside it. */
.vh-tm-results {
  display: grid;
  gap: 12px;
}

.vh-tm-hit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid #e8ecf3;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vh-tm-hit:hover {
  border-color: #ffd9a8;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}

.vh-tm-hit-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff4e3;
  color: #f0912a;
  font-weight: 700;
}

.vh-tm-hit-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vh-tm-hit-body b {
  color: #1e293b;
  font-size: 1rem;
}

.vh-tm-hit-body em {
  color: #f0912a;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 600;
}

.vh-tm-hit-body > span {
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* All 45 classes at the foot of a class page: number first, so the row can be
   scanned by number, with the name beside it where there is room for it. */
.vh-tm-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.vh-tm-pill {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid #e8ecf3;
  border-radius: 12px;
  background: #fff;
  color: #475569;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.vh-tm-pill b {
  flex: 0 0 28px;
  color: #f0912a;
  text-align: center;
}

.vh-tm-pill span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vh-tm-pill:hover {
  border-color: #ffd9a8;
  color: #1e293b;
}

.vh-tm-pill.active {
  border-color: #f0912a;
  background: #fff8ef;
  color: #1e293b;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .vh-tm-hit,
  .vh-tm-pill {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Logo strips
   --------------------------------------------------------------------------- */

/* The gap between marquee items belongs on the wrapper: put it on a sized
   image and the padding eats the image's own box. */
.marquee-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

/* The press logos are wordmarks printed on white and are shown in their own
   colours, which is how each masthead is recognised. */
.vh-logo-media {
  width: auto;
  height: 46px;
  object-fit: contain;
}

/* Client logos are mostly wordmarks, wider than they are tall. Each is shown
   whole in a white rounded tile shaped the same way, so a long name stays
   readable instead of shrinking to fit a square. */
.vh-logo-client {
  box-sizing: border-box;
  width: 168px;
  height: 84px;
  padding: 12px 16px;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid #e8ecf3;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vh-logo-client:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

@media (max-width: 575.98px) {
  .marquee-item {
    padding: 0 22px;
  }

  .vh-logo-media {
    height: 34px;
  }

  .vh-logo-client {
    width: 132px;
    height: 66px;
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vh-logo-media,
  .vh-logo-client {
    transition: none;
  }

  .vh-logo-client:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Testimonials
   --------------------------------------------------------------------------- */

.vh-say-sec {
  position: relative;
  padding: 96px 0;
  /* The site's dark section, warmed by the accent the way the hero is, so the
     band belongs to this theme rather than introducing a second one. */
  background: radial-gradient(1100px 520px at 82% -10%, rgba(255, 156, 0, 0.20), transparent 60%),
              linear-gradient(160deg, #0f172a 0%, #16233b 55%, #0f172a 100%);
  color: #cbd5e1;
  overflow: hidden;
}

.vh-say-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 25% 25%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 25% 25%, #000 0%, transparent 75%);
  pointer-events: none;
}

.vh-say-sec > .container {
  position: relative;
  z-index: 1;
}

.vh-say-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: #ff9c00;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vh-say-title {
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
}

.vh-say-sec p {
  max-width: 46ch;
  color: #cbd5e1;
  line-height: 1.75;
}

.vh-say-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.vh-say-facts strong {
  display: block;
  color: #ff9c00;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.vh-say-facts span {
  color: #94a3b8;
  font-size: 0.86rem;
}

/* The wall of reviews: two columns creeping past each other, faded out at the
   top and bottom so the cards do not appear to be cut off. */
.vh-say-wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  height: 560px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.vh-say-col {
  display: flex;
  flex-direction: column;
  /* No gap here, and no stretching: the column is two identical runs stacked
     flush, so translating it by exactly half lands the second run where the
     first began and the loop has no seam. The gap that separates the cards
     lives inside a run instead. */
  gap: 0;
  align-self: start;
  min-width: 0;
  animation: vhSayScroll 46s linear infinite;
}

/* The second column runs the other way, so the two never move as one block. */
.vh-say-b {
  animation-duration: 38s;
  animation-direction: reverse;
}

.vh-say-wall:hover .vh-say-col {
  animation-play-state: paused;
}

.vh-say-track {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 18px;    /* the gap before the next run begins */
}

/* One pass is exactly half the column, because the run is printed twice. */
@keyframes vhSayScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.vh-say {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.vh-say blockquote {
  margin: 0 0 18px;
  color: #cbd5e1;
  font-size: 0.94rem;
  line-height: 1.65;
}

.vh-say figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
}

.vh-say figcaption img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.15);
}

.vh-say figcaption span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.vh-say figcaption b {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
}

.vh-say figcaption em {
  color: #ff9c00;
  font-size: 0.8rem;
  font-style: normal;
}

@media (max-width: 991.98px) {
  .vh-say-sec {
    padding: 64px 0;
  }

  .vh-say-sec p {
    max-width: none;
  }

  .vh-say-wall {
    height: 480px;
  }
}

/* On a phone there is no room for two columns, and a pane that scrolls itself
   fights the reader scrolling the page. The wall becomes one plain list --
   every review still shown, none of them moving. */
@media (max-width: 575.98px) {
  .vh-say-wall {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .vh-say-col {
    animation: none;
  }

  .vh-say-track[aria-hidden="true"] {
    display: none;
  }
}

/* Movement here is decoration. Without it the wall becomes a plain list that
   the reader scrolls themselves. */
@media (prefers-reduced-motion: reduce) {
  .vh-say-col {
    animation: none;
  }

  .vh-say-wall {
    height: auto;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .vh-say-track[aria-hidden="true"] {
    display: none;
  }
}

/* A section that continues the one above it: the source has one section, so
   the two must not be separated by the full gap between sections. */
.vh-sec.vh-sec-cont {
  padding-top: 0;
}

/* A named set of points inside a section that holds more than one of them.
   The card gives each set a boundary, so two sets of different lengths read
   as two lists rather than as one ragged column. */
.vh-group {
  height: 100%;
  padding: 28px 30px;
  border: 1px solid #eaeef4;
  border-radius: 20px;
  background: #fff;
}

.vh-group h5 {
  margin: 0 0 18px;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 700;
}

.vh-group .vh-check {
  padding: 0 0 16px;
  border: 0;
}

.vh-group .vh-check:last-child {
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Why choose Legal Window
   --------------------------------------------------------------------------- */

/* The closing pitch. Its reasons are a short argument, so they are numbered
   and set beside the heading rather than run as one more ticked list under
   it -- which is what made every page's last section look like its first. */
.vh-why .vh-eyebrow {
  margin-bottom: 14px;
}

.vh-why .vh-title {
  margin-bottom: 18px;
}

.vh-why-note {
  margin: 18px 0 0;
  padding-left: 16px;
  border-left: 3px solid #ff9c00;
  color: #475569;
  line-height: 1.7;
}

.vh-why-list {
  counter-reset: none;
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.vh-why-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 24px;
  border: 1px solid #eaeef4;
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.vh-why-list li:hover {
  transform: translateX(4px);
  border-color: #ffd9a8;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.vh-why-no {
  flex: 0 0 auto;
  min-width: 42px;
  color: #ff9c00;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vh-why-list h5 {
  margin: 0;
  color: #0f172a;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
}

.vh-why-list p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  .vh-why .vh-why-list {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vh-why-list li {
    transition: none;
  }

  .vh-why-list li:hover {
    transform: none;
  }
}

/* A section whose whole point is to send the reader to another page. One
   tile in a four-across grid looked like three had failed to load; this is
   the same content read as the invitation it is. */
.vh-invite {
  padding: 56px 40px;
  border: 1px solid #eaeef4;
  border-radius: 24px;
  background: radial-gradient(620px 240px at 50% 0, #fff6ea, transparent 70%), #fff;
  text-align: center;
}

.vh-invite-ico {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;
  border-radius: 18px;
  background: #fff4e3;
  color: #f0912a;
  font-size: 1.6rem;
}

.vh-invite h2 {
  color: #0f172a;
}

.vh-cta-lede {
  max-width: 620px;
  color: #64748b;
  line-height: 1.75;
}

@media (max-width: 575.98px) {
  .vh-invite {
    padding: 40px 22px;
  }
}

/* The packages quote a price with conditions attached; this is the line that
   says so and the link that takes the reader to them. */
.vh-plan-terms {
  display: inline-block;
  margin-bottom: 14px;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vh-plan-terms:hover {
  color: #f0912a;
}

.vh-plan-featured .vh-plan-terms {
  color: rgba(255, 255, 255, 0.7);
}

.vh-plan-featured .vh-plan-terms:hover {
  color: #ffc46b;
}

/* Jumping to a section must not tuck its heading under the fixed header. */
html {
  scroll-behavior: smooth;
}

[id="terms"],
[id="pricing"],
[id="process"],
[id="enquiry"] {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* A value in the comparison table that carries an explanation. The dotted
   underline is the signal that there is more to read; the bubble is drawn
   here rather than left to the browser's tooltip, which appears after a
   delay, cannot be styled, and never opens on a touch screen. */
.vh-explain {
  position: relative;
  border-bottom: 1px dotted #94a3b8;
  cursor: help;
  text-decoration: none;
}

.vh-explain::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: 260px;
  padding: 10px 14px;
  transform: translateX(-50%) translateY(4px);
  border-radius: 12px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* The arrow under the bubble. */
.vh-explain::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  z-index: 6;
  border: 6px solid transparent;
  border-top-color: #0f172a;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.vh-explain:hover::after,
.vh-explain:hover::before,
.vh-explain:focus::after,
.vh-explain:focus::before,
.vh-explain:focus-visible::after,
.vh-explain:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.vh-explain:focus,
.vh-explain:focus-visible {
  outline: 2px solid #ff9c00;
  outline-offset: 3px;
  border-radius: 3px;
}

/* The first and last columns would push their bubble off the table. */
.vh-compare td:first-of-type .vh-explain::after {
  left: 0;
  transform: translateX(0) translateY(4px);
}

.vh-compare td:first-of-type .vh-explain:hover::after,
.vh-compare td:first-of-type .vh-explain:focus::after {
  transform: translateX(0) translateY(0);
}

.vh-compare td:last-child .vh-explain::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}

.vh-compare td:last-child .vh-explain:hover::after,
.vh-compare td:last-child .vh-explain:focus::after {
  transform: translateX(0) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .vh-explain::after,
  .vh-explain::before {
    transition: none;
  }
}