/**
 * Vibrant Innovations — Theme & motion layer
 *
 * Loaded AFTER main.css. Two jobs:
 *   1. Dark mode, driven by the CSS custom properties the Kelly template
 *      already uses, so the whole site swaps from a handful of tokens.
 *   2. A light modernisation pass — softer shadows, smoother motion, real
 *      focus states — without moving anything on the page.
 *
 * Nothing here changes layout. Colour, depth and motion only.
 */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  --vi-accent:        #a0cba9;
  --vi-accent-strong: #7fb28b;
  --vi-accent-soft:   rgba(160, 203, 169, .12);

  /* One consistent shadow scale instead of ad-hoc values */
  --vi-shadow-sm: 0 1px 2px rgba(16,24,20,.06), 0 1px 3px rgba(16,24,20,.08);
  --vi-shadow-md: 0 4px 12px rgba(16,24,20,.08), 0 2px 4px rgba(16,24,20,.04);
  --vi-shadow-lg: 0 12px 32px rgba(16,24,20,.12), 0 4px 8px rgba(16,24,20,.06);

  --vi-radius:    14px;
  --vi-radius-sm: 10px;

  --vi-ease:   cubic-bezier(.4,0,.2,1);
  --vi-spring: cubic-bezier(.34,1.56,.64,1);
  --vi-fast:   .18s;
  --vi-base:   .28s;

  --vi-page:    #ffffff;
  --vi-surface: #ffffff;
  --vi-raised:  #f6f8f6;
  --vi-line:    rgba(16,24,20,.10);
  --vi-text:    #3d4a42;
  --vi-heading: #1c2620;
  --vi-muted:   #6b7a71;

  color-scheme: light;
}

/* ── Dark palette ────────────────────────────────────────────────────
   Defined twice on purpose: once for an explicit choice (which must win
   in both directions) and once for "system" when the OS is dark. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --background-color: #0f1512;
  --default-color:    #d7e2db;
  --heading-color:    #f2f7f3;
  --surface-color:    #172019;
  --contrast-color:   #0f1512;
  --accent-color:     #a8d4b2;

  --nav-color:                     #c6d4cb;
  --nav-hover-color:               #a8d4b2;
  --nav-mobile-background-color:   #131b16;
  --nav-dropdown-background-color: #172019;
  --nav-dropdown-color:            #c6d4cb;
  --nav-dropdown-hover-color:      #a8d4b2;

  --vi-page:    #0f1512;
  --vi-surface: #172019;
  --vi-raised:  #1d2822;
  --vi-line:    rgba(214,232,220,.12);
  --vi-text:    #d7e2db;
  --vi-heading: #f2f7f3;
  --vi-muted:   #93a49a;

  --vi-accent:        #a8d4b2;
  --vi-accent-strong: #c2e4c9;
  --vi-accent-soft:   rgba(168,212,178,.14);

  --vi-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --vi-shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --vi-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --background-color: #0f1512;
    --default-color:    #d7e2db;
    --heading-color:    #f2f7f3;
    --surface-color:    #172019;
    --contrast-color:   #0f1512;
    --accent-color:     #a8d4b2;

    --nav-color:                     #c6d4cb;
    --nav-hover-color:               #a8d4b2;
    --nav-mobile-background-color:   #131b16;
    --nav-dropdown-background-color: #172019;
    --nav-dropdown-color:            #c6d4cb;
    --nav-dropdown-hover-color:      #a8d4b2;

    --vi-page:    #0f1512;
    --vi-surface: #172019;
    --vi-raised:  #1d2822;
    --vi-line:    rgba(214,232,220,.12);
    --vi-text:    #d7e2db;
    --vi-heading: #f2f7f3;
    --vi-muted:   #93a49a;

    --vi-accent:        #a8d4b2;
    --vi-accent-strong: #c2e4c9;
    --vi-accent-soft:   rgba(168,212,178,.14);

    --vi-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --vi-shadow-md: 0 4px 14px rgba(0,0,0,.45);
    --vi-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  }
}

/* =====================================================================
   2. DARK-MODE CORRECTIONS
   The template hardcodes a few colours that the variables can't reach.
   ===================================================================== */
:root[data-theme="dark"] body { background-color: var(--vi-page); color: var(--vi-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-color: var(--vi-page); color: var(--vi-text); }
}

/* .light-background paints the header and footer — it must not stay pale grey */
:root[data-theme="dark"] .light-background { --background-color:#131b16; --surface-color:#172019; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .light-background { --background-color:#131b16; --surface-color:#172019; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo img,
  :root:not([data-theme="light"]) .footer-brand img { filter: invert(1) hue-rotate(180deg); }
  :root:not([data-theme="light"]) .hero img { filter: brightness(.62) saturate(.92); }
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .service-item,
:root[data-theme="dark"] .portfolio-item,
:root[data-theme="dark"] .team-member,
:root[data-theme="dark"] .testimonial-item,
:root[data-theme="dark"] .info-item,
:root[data-theme="dark"] .php-email-form,
:root[data-theme="dark"] .pricing-item {
  background-color: var(--vi-surface) !important;
  color: var(--vi-text);
  border-color: var(--vi-line);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: var(--vi-raised);
  border-color: var(--vi-line);
  color: var(--vi-text);
}
:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--vi-muted); }
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
  background-color: var(--vi-raised);
  border-color: var(--vi-accent);
  color: var(--vi-text);
  box-shadow: 0 0 0 3px var(--vi-accent-soft);
}
/* Native pickers render black-on-black otherwise */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light   { background-color: var(--vi-surface) !important; color: var(--vi-text); }
:root[data-theme="dark"] .text-dark  { color: var(--vi-heading) !important; }
:root[data-theme="dark"] .text-muted { color: var(--vi-muted) !important; }
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .custom-modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .accordion-item,
:root[data-theme="dark"] .accordion-button,
:root[data-theme="dark"] .list-group-item {
  background-color: var(--vi-surface);
  color: var(--vi-text);
  border-color: var(--vi-line);
}
:root[data-theme="dark"] .table { --bs-table-color: var(--vi-text); --bs-table-bg: transparent; }
:root[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--vi-line); }
:root[data-theme="dark"] hr { border-color: var(--vi-line); opacity: .6; }

/* The logo is dark artwork on a transparent background, so it disappears
   against a dark header. Inverting lightness and rotating the hue back keeps
   the wordmark legible while the swoosh stays green. */
:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] .footer-brand img {
  filter: invert(1) hue-rotate(180deg);
}

:root[data-theme="dark"] .hero img { filter: brightness(.62) saturate(.92); }

/* Preloader: a light CSS ring in the brand colour (it replaced a 650 KB GIF),
   so it follows light and dark mode like the rest of the page. */
#preloader { background-color: var(--vi-page) !important; }
.vi-loader {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid var(--vi-accent-soft);
  border-top-color: var(--vi-accent-strong);
  animation: vi-spin .8s linear infinite;
}
@keyframes vi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vi-loader { animation-duration: 2.4s; } }


/* ── Icon legibility in dark mode ───────────────────────────────────
   The template picks accent colours for the service cards from Bootstrap's
   palette. Several are far too dark to read on a dark surface — indigo
   (#6610f2) measured 2.3:1 against the card, well under the 4.5:1 needed.
   These are the same hues lifted for a dark background. */
:root[data-theme="dark"] .services .service-item.item-cyan i   { color: #5ad8f5; }
:root[data-theme="dark"] .services .service-item.item-orange i { color: #ffa04d; }
:root[data-theme="dark"] .services .service-item.item-teal i   { color: #4fdcb3; }
:root[data-theme="dark"] .services .service-item.item-red i    { color: #ff6b7d; }
:root[data-theme="dark"] .services .service-item.item-indigo i { color: #a78bfa; }
:root[data-theme="dark"] .services .service-item.item-pink i   { color: #ff7ab8; }
:root[data-theme="dark"] .services .service-item.item-green i  { color: #7ee0a0; }

/* The decorative blob behind each service icon is drawn as a near-white SVG
   path. Give it a visible-but-subtle tint on dark instead of leaving it at
   5% of a light colour, where it disappears entirely. */
:root[data-theme="dark"] .services .service-item .icon svg path {
  fill: rgba(168, 212, 178, .10);
}

/* Stat counters, contact icons and portfolio actions all read from theme
   tokens already; these just lift them clear of the darker surface. */
:root[data-theme="dark"] .contact .info-item i {
  color: var(--vi-accent);
  background: var(--vi-accent-soft);
}
:root[data-theme="dark"] .portfolio .portfolio-item .portfolio-info .preview-link,
:root[data-theme="dark"] .portfolio .portfolio-item .portfolio-info .details-link {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}
:root[data-theme="dark"] .footer .social-links a { border-color: var(--vi-line); }

/* =====================================================================
   3. THE TOGGLE
   ===================================================================== */
.theme-toggle {
  --size: 38px;
  width: var(--size); height: var(--size);
  border: 1px solid var(--vi-line);
  border-radius: 50%;
  background: transparent;
  color: var(--default-color);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; margin-left: 10px; flex: 0 0 auto;
  transition: background var(--vi-fast) var(--vi-ease),
              border-color var(--vi-fast) var(--vi-ease),
              transform var(--vi-fast) var(--vi-spring);
}
.theme-toggle:hover { background: var(--vi-accent-soft); border-color: var(--vi-accent); transform: scale(1.08); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--vi-accent-soft); border-color: var(--vi-accent); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Stops the palette strobing when the theme flips */
.theme-switching, .theme-switching * {
  transition: background-color .3s var(--vi-ease),
              border-color .3s var(--vi-ease),
              color .3s var(--vi-ease) !important;
}

/* =====================================================================
   4. MODERNISATION — depth, focus, micro-interaction
   ===================================================================== */
.service-item, .portfolio-item, .team-member, .card, .info-item, .pricing-item {
  border-radius: var(--vi-radius);
  box-shadow: var(--vi-shadow-sm);
  transition: transform var(--vi-base) var(--vi-ease), box-shadow var(--vi-base) var(--vi-ease);
}
.service-item:hover, .portfolio-item:hover, .team-member:hover, .card:hover, .pricing-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--vi-shadow-lg);
}

.btn, .btn-get-started, .php-email-form button[type="submit"] {
  border-radius: 50px;
  transition: transform var(--vi-fast) var(--vi-spring),
              box-shadow var(--vi-fast) var(--vi-ease),
              background-color var(--vi-fast) var(--vi-ease);
}
.btn:hover, .btn-get-started:hover { transform: translateY(-2px); box-shadow: var(--vi-shadow-md); }
.btn:active, .btn-get-started:active { transform: translateY(0) scale(.98); }

/* Visible keyboard focus — the template shipped without any */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--vi-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.navmenu > ul > li > a { position: relative; }
.navmenu > ul > li > a::after {
  content: ''; position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 2px; background: var(--vi-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--vi-base) var(--vi-ease);
}
.navmenu > ul > li > a:hover::after,
.navmenu > ul > li > a.active::after { transform: scaleX(1); transform-origin: left; }

.portfolio-item img, .gallery-item img { transition: transform .55s var(--vi-ease); }
.portfolio-item:hover img, .gallery-item:hover img { transform: scale(1.06); }

.header { transition: box-shadow var(--vi-base) var(--vi-ease), background-color var(--vi-base) var(--vi-ease); }
.scrolled .header { box-shadow: var(--vi-shadow-md); backdrop-filter: saturate(1.4) blur(10px); }

.header-social-links a, .social-links a {
  display: inline-block;
  transition: transform var(--vi-fast) var(--vi-spring), color var(--vi-fast) var(--vi-ease);
}
.header-social-links a:hover, .social-links a:hover { transform: translateY(-3px) scale(1.12); color: var(--vi-accent); }

.scroll-top { transition: transform var(--vi-base) var(--vi-spring), opacity var(--vi-base) var(--vi-ease); }
.scroll-top:hover { transform: translateY(-4px); }

/* AOS safety net.
   Elements with data-aos start at opacity:0 and only become visible once the
   AOS library runs. If that vendor script ever fails to load, the page would
   render completely blank. This class is applied by theme.js when AOS has not
   initialised shortly after load, so content always ends up visible. */
html.aos-fallback [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* =====================================================================
   5. ENTRANCE MOTION
   ===================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s var(--vi-ease), transform .65s var(--vi-ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }

@keyframes vi-fade-up { from { opacity:0; transform: translateY(16px);} to { opacity:1; transform:none; } }
.vi-fade-up { animation: vi-fade-up .6s var(--vi-ease) both; }

@keyframes vi-shimmer { 0% { background-position:-420px 0; } 100% { background-position:420px 0; } }
.vi-skeleton {
  background: linear-gradient(90deg, var(--vi-raised) 25%, var(--vi-line) 50%, var(--vi-raised) 75%);
  background-size: 840px 100%;
  animation: vi-shimmer 1.4s infinite linear;
  border-radius: var(--vi-radius-sm);
}

/* =====================================================================
   6. ACCESSIBILITY
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .service-item:hover, .portfolio-item:hover, .card:hover,
  .btn:hover, .btn-get-started:hover { transform: none; }
}

/* =====================================================================
   7. PRINT — quotations get printed
   ===================================================================== */
@media print {
  .theme-toggle, .scroll-top, .floating-quote-btn,
  #preloader, .header-social-links { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* =====================================================================
   SITE-WIDE CALL TO ACTION  (partials/cta.php)
   Sits at the foot of every page. Uses the same tokens as everything
   else, so it follows light/dark with no extra rules.
   ===================================================================== */
.vi-apply-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }

.vi-apply {
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 3vw, 26px);
  padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.5rem, 4vw, 3.2rem);
  background: linear-gradient(135deg, #2d5a4f 0%, #4a8a76 52%, #7fb28b 100%);
  color: #fff;
  box-shadow: var(--vi-shadow-lg);
  isolation: isolate;
}

/* Slow drifting highlight — motion without anything moving on the page. */
.vi-apply-glow {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(420px 420px at 20% 25%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(360px 360px at 80% 75%, rgba(160,203,169,.30), transparent 62%);
  animation: vi-apply-drift 18s ease-in-out infinite alternate;
}
@keyframes vi-apply-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

.vi-apply-body { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }

.vi-apply-eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  padding: .38rem .9rem; border-radius: 50px; margin-bottom: 1rem;
  backdrop-filter: blur(4px);
}

.vi-apply h2 {
  font-family: var(--heading-font);
  font-weight: 800; color: #fff;
  font-size: clamp(1.55rem, 3.6vw, 2.4rem);
  line-height: 1.15; margin: 0 0 .75rem;
}

.vi-apply p {
  font-size: clamp(.96rem, 1.5vw, 1.05rem);
  line-height: 1.7; opacity: .93; margin: 0 auto 1.8rem; max-width: 56ch;
}

.vi-apply-actions {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-bottom: 1.6rem;
}

.vi-apply-btn {
  --shift: 0px;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.75rem; border-radius: 50px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--vi-fast) var(--vi-spring),
              box-shadow var(--vi-fast) var(--vi-ease),
              background-color var(--vi-fast) var(--vi-ease);
}
.vi-apply-btn i { transition: transform var(--vi-base) var(--vi-ease); }
.vi-apply-btn:hover { transform: translateY(-3px); }
.vi-apply-btn:hover i { transform: translateX(4px); }
.vi-apply-btn:active { transform: translateY(-1px) scale(.98); }

.vi-apply-btn-primary { background: #fff; color: #1d3b31; box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.vi-apply-btn-primary:hover { background: #eef6f0; color: #1d3b31; box-shadow: 0 16px 34px rgba(0,0,0,.28); }

.vi-apply-btn-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.45); }
.vi-apply-btn-ghost:hover { background: rgba(255,255,255,.20); color: #fff; border-color: #fff; }

/* A single sweep of light across the primary button on hover. */
.vi-apply-btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .7s var(--vi-ease);
}
.vi-apply-btn-primary:hover::after { transform: translateX(120%); }

.vi-apply-points {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center;
  font-size: .86rem; opacity: .9;
}
.vi-apply-points li { display: inline-flex; align-items: center; gap: .4rem; }
.vi-apply-points i { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .vi-apply-glow { animation: none; }
  .vi-apply-btn:hover { transform: none; }
  .vi-apply-btn-primary::after { display: none; }
}

/* =====================================================================
   MOBILE NAVIGATION — unfolding panel
   Replaces the template's display:none / display:block menu, which could
   not animate. The panel is always rendered and revealed with clip-path,
   so it unfolds downward on open and folds back up on close. Links cascade
   in using the --i index set on each <li> in partials/header.php.
   Desktop (1200px and up) is untouched.
   ===================================================================== */

/* Hamburger → X */
.mobile-nav-toggle { appearance: none; background: none; border: 0; padding: 0; }
.vi-burger { position: relative; display: block; width: 22px; height: 16px; }
.vi-burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: top .32s var(--vi-ease), transform .42s var(--vi-spring), opacity .2s var(--vi-ease);
}
.vi-burger span:nth-child(1) { top: 0; }
.vi-burger span:nth-child(2) { top: 7px; }
.vi-burger span:nth-child(3) { top: 14px; }
.mobile-nav-active .vi-burger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.mobile-nav-active .vi-burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.mobile-nav-active .vi-burger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

@media (max-width: 1199px) {

  /* The toggle stays put in the header instead of jumping to the corner */
  .mobile-nav-toggle,
  .mobile-nav-active .mobile-nav-toggle {
    position: relative; top: auto; right: auto;
    width: 44px; height: 44px; margin: 0 6px 0 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: inherit; line-height: 1;
    color: var(--nav-color); z-index: 9999;
    transition: background-color var(--vi-fast) var(--vi-ease), color var(--vi-fast) var(--vi-ease);
  }
  .mobile-nav-toggle:hover,
  .mobile-nav-active .mobile-nav-toggle { background: var(--vi-accent-soft); color: var(--vi-accent-strong); }

  /* A blurred header would become the positioning box for the fixed panel;
     the header background is solid on mobile anyway. */
  .scrolled .header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* The nav is no longer a full-screen overlay — backdrop and panel are layered separately */
  .mobile-nav-active .navmenu { position: static; inset: auto; background: none; overflow: visible; }

  /* Dimmed, blurred backdrop below the header */
  .navmenu::before {
    content: '';
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--vi-header-h, 84px);
    background: rgba(8, 14, 11, .45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity .32s var(--vi-ease), visibility 0s linear .32s;
    z-index: 9990;
  }
  .mobile-nav-active .navmenu::before {
    opacity: 1; visibility: visible;
    transition: opacity .32s var(--vi-ease);
  }

  /* The panel — always present, unfolds with clip-path */
  .navmenu > ul,
  .mobile-nav-active .navmenu > ul {
    display: block;
    position: fixed;
    inset: auto;
    top: calc(var(--vi-header-h, 84px) + 10px); left: 12px; right: 12px;
    max-height: calc(100vh - var(--vi-header-h, 84px) - 24px);
    max-height: calc(100dvh - var(--vi-header-h, 84px) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 10px; list-style: none;
    background: var(--vi-surface);
    border: 1px solid var(--vi-line);
    border-radius: 18px;
    box-shadow: var(--vi-shadow-lg);
    clip-path: inset(0 0 100% 0 round 18px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: clip-path .5s cubic-bezier(.22, 1, .36, 1), opacity .24s var(--vi-ease) .12s, visibility 0s linear .5s;
    z-index: 9995;
  }
  .mobile-nav-active .navmenu > ul {
    clip-path: inset(0 0 0 0 round 18px);
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: clip-path .55s cubic-bezier(.22, 1, .36, 1), opacity .18s var(--vi-ease);
  }

  /* Links cascade in, one after another */
  .navmenu > ul > li {
    opacity: 0; transform: translateY(-10px);
    transition: opacity .2s var(--vi-ease), transform .3s var(--vi-ease);
  }
  .mobile-nav-active .navmenu > ul > li {
    opacity: 1; transform: none;
    transition: opacity .32s var(--vi-ease), transform .45s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(110ms + var(--i, 0) * 45ms);
  }
  .navmenu > ul > li + li { margin-top: 2px; }

  .navmenu a,
  .navmenu a:focus {
    color: var(--default-color);
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 17px;
  }
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--vi-accent-strong);
    background: var(--vi-accent-soft);
  }
  .navmenu > ul > li > a::after { display: none; }   /* desktop underline effect */

  /* Quote button at the foot of the panel */
  .vi-nav-cta { margin-top: 8px !important; padding-top: 10px; border-top: 1px solid var(--vi-line); }
  .vi-nav-cta a,
  .vi-nav-cta a:focus {
    justify-content: center; gap: 8px;
    background: var(--vi-accent); color: #12251a;
    font-weight: 700; border-radius: 50px;
  }
  .vi-nav-cta a:hover { background: var(--vi-accent-strong); color: #12251a; }
  .vi-nav-cta a i,
  .vi-nav-cta a:focus i {
    width: auto; height: auto; margin: 0; background: none; font-size: 16px; line-height: 1;
    transition: transform var(--vi-base) var(--vi-ease);
  }
  .vi-nav-cta a:hover i { transform: translateX(4px); }
}

/* =====================================================================
   NEWSLETTER SIGN-UP — footer on every page (and the Insights band)
   Self-contained: pages without home.css still get a styled form.
   ===================================================================== */
.vi-footer-newsletter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center;
  margin: .5rem 0 2rem; padding: clamp(1.4rem, 4vw, 2.2rem); text-align: left;
  border-radius: var(--vi-radius); background: var(--vi-surface); border: 1px solid var(--vi-line); box-shadow: var(--vi-shadow-sm);
}
@media (max-width: 767px) { .vi-footer-newsletter { grid-template-columns: 1fr; } }
.vi-footer-newsletter .vi-newsletter-title { font-family: var(--heading-font); font-size: 1.25rem; font-weight: 800; color: var(--heading-color); margin: 0 0 .35rem; }
.vi-footer-newsletter p { margin: 0; color: var(--vi-muted); font-size: .93rem; line-height: 1.6; }

.vi-newsletter-form { position: relative; }
.vi-newsletter-row { display: flex; gap: .5rem; }
@media (max-width: 420px) { .vi-newsletter-row { flex-direction: column; } }
.vi-newsletter-row input[type="email"] {
  flex: 1; min-width: 0; padding: .8rem 1.15rem; border-radius: 50px; font-size: .95rem;
  border: 1px solid var(--vi-line); background: var(--vi-page); color: var(--default-color);
  transition: border-color var(--vi-fast) var(--vi-ease), box-shadow var(--vi-fast) var(--vi-ease);
}
.vi-newsletter-row input[type="email"]::placeholder { color: var(--vi-muted); opacity: .8; }
.vi-newsletter-row input[type="email"]:focus { outline: none; border-color: var(--vi-accent-strong); box-shadow: 0 0 0 4px var(--vi-accent-soft); }
.vi-newsletter-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap;
  padding: .8rem 1.4rem; border: 0; border-radius: 50px; background: var(--vi-accent); color: #12251a; font-weight: 600; font-size: .95rem;
  transition: transform var(--vi-fast) var(--vi-spring), background-color var(--vi-fast) var(--vi-ease), box-shadow var(--vi-fast) var(--vi-ease);
}
.vi-newsletter-btn:hover { background: var(--vi-accent-strong); transform: translateY(-1px); box-shadow: var(--vi-shadow-md); }
.vi-newsletter-btn i { transition: transform var(--vi-fast) var(--vi-ease); }
.vi-newsletter-btn:hover i { transform: translateX(3px); }
.vi-newsletter-btn:disabled { opacity: .6; transform: none; cursor: progress; }
.vi-newsletter-consent { display: flex; gap: .55rem; align-items: flex-start; margin: .75rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--vi-muted); cursor: pointer; }
.vi-newsletter-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .15rem; accent-color: var(--vi-accent-strong); }
.vi-newsletter-msg { margin: .55rem 0 0 !important; min-height: 1.3em; font-size: .87rem !important; }
.vi-newsletter-msg.is-success { color: #2d6a45 !important; font-weight: 600; }
.vi-newsletter-msg.is-error { color: #b3261e !important; }
.vi-newsletter-msg.is-info { color: var(--vi-muted) !important; }
.vi-newsletter-form.is-done .vi-newsletter-msg { animation: vi-pop .45s var(--vi-spring); }
@keyframes vi-pop { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
:root[data-theme="dark"] .vi-newsletter-msg.is-success { color: #a8d4b2 !important; }
:root[data-theme="dark"] .vi-newsletter-msg.is-error { color: #ffb4ab !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vi-newsletter-msg.is-success { color: #a8d4b2 !important; }
  :root:not([data-theme="light"]) .vi-newsletter-msg.is-error { color: #ffb4ab !important; }
}
.vi-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }