/* ==========================================================================
   Voguish Designs — main stylesheet
   Ported from the approved design. Inline styles live in the templates for
   pixel fidelity; this file adds what inline styles can't do: resets,
   keyframes, hover states, scroll-reveal, the custom cursor, and responsive.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  font-family: var(--vd-font-body, "Archivo", sans-serif);
  color: #1D334C;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; }
::selection { background: #1D334C; color: #FFFFFF; }

/* ------- Keyframes (from the design's <style> blocks) -------------------- */
@keyframes voguishScrollCue { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(10px); opacity: 1; } }
@keyframes vgRise    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vgKenBurns{ from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes vgMarqueeLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes vgMarqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes vgSketchReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
@keyframes vgSketchLine { 0% { left:-2px; opacity:0; } 8% { opacity:1; } 88% { opacity:1; } 100% { left:100%; opacity:0; } }
@keyframes vgMarkFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes vgCurtain { to { transform: translateY(-100%); } }
@keyframes vgBarFill { from { width:0; } to { width:100%; } }

/* ------- Preloader (front page, first visit per session) ---------------- */
.vg-preloader {
  position: fixed; inset: 0; z-index: 9999; background: #0B1D33;
  display: flex; align-items: center; justify-content: center;
  animation: vgCurtain 700ms cubic-bezier(.6,0,.2,1) 2050ms forwards;
}
.vg-no-preloader .vg-preloader { display: none !important; }
.vg-preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.vg-preloader__mark { position: relative; height: 56px; display: flex; align-items: center; justify-content: center; animation: vgMarkFadeOut 320ms ease 900ms forwards; }
.vg-preloader__mark img { height: 56px; width: auto; display: block; clip-path: inset(0 100% 0 0); animation: vgSketchReveal 720ms cubic-bezier(.65,0,.35,1) 160ms forwards; }
.vg-preloader__line { position: absolute; top: 4px; bottom: 4px; left: 0; width: 2px; background: linear-gradient(180deg, rgba(166,168,173,0), #A6A8AD 20%, #FFFFFF 50%, #A6A8AD 80%, rgba(166,168,173,0)); box-shadow: 0 0 10px rgba(255,255,255,.55); opacity: 0; animation: vgSketchLine 720ms cubic-bezier(.65,0,.35,1) 160ms forwards; }
.vg-preloader__word { opacity: 0; text-align: center; animation: vgRise 600ms cubic-bezier(.2,1,.3,1) 900ms forwards; }
.vg-preloader__word img { height: 40px; width: auto; display: block; margin: 0 auto; }
.vg-preloader__tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #A6A8AD; margin-top: 14px; }
.vg-preloader__bar-wrap { opacity: 0; width: 180px; animation: vgRise 500ms cubic-bezier(.2,1,.3,1) 1000ms forwards; }
.vg-preloader__bar-track { width: 100%; height: 2px; background: rgba(255,255,255,.15); position: relative; overflow: hidden; }
.vg-preloader__bar { position: absolute; top: 0; left: 0; bottom: 0; width: 0; background: #FFFFFF; animation: vgBarFill 1050ms ease 950ms forwards; }

/* ------- Scroll reveal ---------------------------------------------------
   Progressive enhancement: without JS everything is visible (SEO-safe).
   When theme.js adds `.vg-js` to <html>, reveal elements start hidden and
   animate in when they enter the viewport (.is-visible). ---------------- */
.vg-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(40px);
}
.vg-ready [data-reveal] {
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.vg-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* Heading-level reveal — a touch more travel so section titles enter with
   clear presence rather than fading in place. */
.vg-ready [data-reveal="heading"]:not(.is-visible) { transform: translateY(46px); }

/* Staggered child reveal — cards, process steps, thumbnails animate in
   sequence (delay set inline by initStagger). Stronger but elegant: more
   travel + a subtle scale so each card enters with weight. */
.vg-ready [data-stagger] > * {
  opacity: 0;
  transform: translateY(30px) scale(.985);
  transition: opacity .82s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.vg-ready [data-stagger] > *.vg-in { opacity: 1; transform: none; }

/* Image reveal — soft mask + gentle scale-down so photos/thumbnails settle
   into place instead of popping. Wrap or tag the media element itself. */
.vg-ready [data-reveal-img] { overflow: hidden; }
.vg-ready [data-reveal-img] > img,
.vg-ready [data-reveal-img] .vg-reveal-media {
  transform: scale(1.04);
  opacity: 0;
  transition: transform 1.05s cubic-bezier(.16,1,.3,1), opacity .9s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.vg-ready [data-reveal-img].is-visible > img,
.vg-ready [data-reveal-img].is-visible .vg-reveal-media { transform: scale(1); opacity: 1; }

/* Slightly gentler travel on small screens — keeps motion present without
   feeling heavy on a phone. */
@media (max-width: 640px) {
  .vg-ready [data-reveal]:not(.is-visible) { transform: translateY(26px); }
  .vg-ready [data-reveal="heading"]:not(.is-visible) { transform: translateY(30px); }
  .vg-ready [data-stagger] > * { transform: translateY(20px) scale(.99); }
  .vg-ready [data-reveal-img] > img,
  .vg-ready [data-reveal-img] .vg-reveal-media { transform: scale(1.03); }
}

/* ------- Even card grids (balanced rows, no awkward last-row gaps) --------
   Fixed column counts collapse cleanly at breakpoints so rows always fill
   intentionally instead of leaving a lone stranded card. 1px gaps + shared
   background reproduce the design's hairline card dividers. */
.vg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.vg-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.vg-grid-hair { gap: 1px; background: #E6E7E9; border: 1px solid #E6E7E9; }
@media (max-width: 900px) {
  .vg-grid-3, .vg-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .vg-grid-3, .vg-grid-4 { grid-template-columns: 1fr; }
}

/* ------- Tools We Work With (software logo cards) ------------------------
   Uniform white cards keep very different logos visually balanced. Logos are
   centered and capped by max-height/width so none looks too large or small. */
.vg-tools-row { display: flex; flex-wrap: wrap; gap: 14px; }
.vg-tool-card {
  background: #FFFFFF; border: 1px solid #E6E7E9;
  height: 92px; flex: 0 1 190px; min-width: 150px; max-width: 220px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 22px; box-sizing: border-box;
  transition: border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.vg-tool-card:hover { border-color: #C9CBCE; box-shadow: 0 12px 26px rgba(29,51,76,.08); }
.vg-tool-card img { max-height: 46px; max-width: 150px; width: auto; height: auto; object-fit: contain; display: block; }
.vg-tool-card .vg-tool-name { font-size: 14px; font-weight: 500; color: #1D334C; letter-spacing: .01em; }
@media (max-width: 640px) {
  .vg-tool-card { flex: 1 1 140px; min-width: 0; max-width: none; height: 84px; padding: 12px 16px; }
  .vg-tool-card img { max-height: 40px; max-width: 120px; }
}

/* Subtle premium "View" badge on image tiles (opens the lightbox). */
.vg-has-view { position: relative; transition: box-shadow .35s ease; }
.vg-has-view:hover { box-shadow: 0 16px 38px rgba(29,51,76,.18); }
.vg-view-badge {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  display: inline-flex; align-items: center;
  background: rgba(29,51,76,.85); color: #FFFFFF;
  font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.vg-has-view:hover .vg-view-badge,
.vg-has-view:focus-visible .vg-view-badge { opacity: 1; transform: none; }
/* Touch devices have no hover — keep the affordance gently visible. */
@media (hover: none) { .vg-view-badge { opacity: .9; transform: none; } }

/* ------- Marquee (client logos) ----------------------------------------- */
.vg-marquee-track { display: flex; gap: 24px; width: max-content; }
.vg-marquee-left  { animation: vgMarqueeLeft 64s linear infinite; }
.vg-marquee-right { animation: vgMarqueeRight 58s linear infinite; }
.vg-marquee-track:hover { animation-play-state: paused; }

/* ------- Hover states (replacing the design's style-hover) --------------- */
.vg-footer-link { transition: color .22s ease, transform .22s ease; }
.vg-footer-link:hover { color: #FFFFFF; transform: translateX(4px); }
.vg-contact-link:hover { color: #FFFFFF; }
.vg-outline-btn { transition: border-color .25s ease, background .25s ease; }
.vg-outline-btn:hover { border-color: #A6A8AD; background: rgba(166,168,173,.12); }
.vg-social:hover { border-color: #A6A8AD; color: #FFFFFF; }
.vg-logo-tile { transition: border-color .3s ease, box-shadow .3s ease; }
.vg-logo-tile:hover { border-color: #A6A8AD; box-shadow: 0 16px 32px rgba(29,51,76,.08); }
.vg-logo-tile img { filter: grayscale(1) opacity(.55); transition: filter .3s ease, transform .3s ease; }
.vg-logo-tile:hover img { filter: grayscale(0) opacity(1); transform: scale(1.04); }
.vg-service-card { transition: border-color .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.vg-service-card:hover { border-color: #1D334C; box-shadow: 0 24px 48px rgba(29,51,76,.14); }
.vg-related-card { transition: background .2s ease; }
.vg-related-card:hover { background: #E6E7E9; }
.vg-textlink { transition: color .2s ease; }

/* ------- Nav ------------------------------------------------------------- */
.vg-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 86px;
  transition: background .3s ease, height .3s ease, border-color .3s ease, box-shadow .3s ease;
  background: transparent; border-bottom: 1px solid transparent;
}
/* Logo crossfade: both logos stacked; opacity swaps smoothly with nav state */
.vg-nav-logo { display: inline-grid; align-items: center; text-decoration: none; }
.vg-nav-logo img { grid-area: 1 / 1; height: 42px; width: auto; display: block; transition: opacity .4s ease; }
.vg-nav .vg-nav-logo-light { opacity: 0; }
.vg-nav .vg-nav-logo-dark  { opacity: 1; }
/* Solid state: on scroll (.is-solid) or on interior pages (.is-interior) */
.vg-nav.is-solid, .vg-nav.is-interior {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #E6E7E9; height: 64px;
  box-shadow: 0 1px 0 rgba(29,51,76,.04);
}
.vg-nav.is-solid .vg-nav-logo-dark, .vg-nav.is-interior .vg-nav-logo-dark { opacity: 0; }
.vg-nav.is-solid .vg-nav-logo-light, .vg-nav.is-interior .vg-nav-logo-light { opacity: 1; }
.vg-nav-links { display: flex; align-items: center; gap: 24px; }
.vg-nav-link {
  color: #FFFFFF; font-size: 14px; text-decoration: none; letter-spacing: .02em;
  transition: color .2s ease; white-space: nowrap;
}
.vg-nav.is-solid .vg-nav-link, .vg-nav.is-interior .vg-nav-link { color: #1D334C; }
.vg-nav-link.is-active { font-weight: 700; }
.vg-nav.is-solid .vg-nav-link.is-active, .vg-nav.is-interior .vg-nav-link.is-active { color: #1D334C; }
.vg-nav-cta {
  background: #FFFFFF; color: #1D334C; border: none; padding: 11px 20px;
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.vg-nav.is-solid .vg-nav-cta, .vg-nav.is-interior .vg-nav-cta { background: #1D334C; color: #FFFFFF; }
.vg-hamburger { background: none; border: none; cursor: pointer; padding: 8px; color: #FFFFFF; display: none; }
.vg-nav.is-solid .vg-hamburger, .vg-nav.is-interior .vg-hamburger { color: #1D334C; }
.vg-hamburger span { display: block; width: 22px; height: 2px; background: currentColor; }
.vg-hamburger span + span { margin-top: 5px; }

/* Mobile menu overlay */
.vg-mobile-menu {
  position: fixed; inset: 0; background: #1D334C; z-index: 200;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.vg-mobile-menu.is-open { display: flex; animation: vgRise 380ms cubic-bezier(.16,1,.3,1); }
.vg-mobile-link { font-family: var(--vd-font-heading); font-size: 26px; color: #FFFFFF; text-decoration: none; }
.vg-mobile-link.is-active { text-decoration: underline; text-underline-offset: 6px; font-weight: 700; }
.vg-mobile-cta {
  font-family: var(--vd-font-body); font-size: 14px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #1D334C; background: #FFFFFF; padding: 14px 30px; text-decoration: none;
}
.vg-mobile-foot { position: absolute; bottom: 36px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Nav responsive: hamburger below 900px */
@media (max-width: 899px) {
  .vg-nav { padding: 0 24px; }
  .vg-nav-links, .vg-nav-cta { display: none; }
  .vg-hamburger { display: block; }
}

/* ------- Generic responsive padding trims -------------------------------- */
@media (max-width: 640px) {
  .vg-section { padding-left: 24px !important; padding-right: 24px !important; }
  .vg-hero-content { padding: 100px 24px 48px !important; }
}

/* ------- Contact Form 7 — styled to match the design --------------------- */
.vg-form-panel .wpcf7 { font-family: var(--vd-font-body); }
.vg-form-panel .wpcf7-form p { margin: 0 0 18px; }
.vg-form-panel .wpcf7 label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #1E1E1E; }
.vg-form-panel .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.vg-form-panel .wpcf7 input[type=text],
.vg-form-panel .wpcf7 input[type=email],
.vg-form-panel .wpcf7 input[type=tel],
.vg-form-panel .wpcf7 input[type=url],
.vg-form-panel .wpcf7 textarea,
.vg-form-panel .wpcf7 select {
  width: 100%; border: none; border-bottom: 1px solid #C9CBCE; background: transparent;
  padding: 8px 0; font-size: 15px; font-family: var(--vd-font-body); color: #1D334C; outline: none;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.vg-form-panel .wpcf7 textarea { resize: vertical; min-height: 90px; }
.vg-form-panel .wpcf7 input:focus,
.vg-form-panel .wpcf7 textarea:focus,
.vg-form-panel .wpcf7 select:focus { border-bottom-color: #1D334C; }
.vg-form-panel .wpcf7 input[type=file] { font-size: 13px; color: #1E1E1E; padding-top: 6px; }
.vg-form-panel .wpcf7 .vg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .vg-form-panel .wpcf7 .vg-two { grid-template-columns: 1fr; } }
.vg-form-panel .wpcf7-submit {
  background: #1D334C; color: #FFFFFF; border: none; padding: 16px 30px; font-size: 14px;
  font-weight: 600; letter-spacing: .02em; cursor: pointer; width: 100%; margin-top: 8px;
  font-family: var(--vd-font-body); transition: background .2s ease;
}
.vg-form-panel .wpcf7-submit:hover { background: #0B1D33; }
.vg-form-panel .wpcf7-spinner { margin: 12px auto 0; display: block; }
.vg-form-panel .wpcf7-response-output {
  margin: 18px 0 0 !important; font-size: 13px; color: #1D334C;
  border: 0 !important; padding: 0 !important; background: transparent;
}
/* Only show the message box once CF7 marks the form with a result state,
   so no empty bordered box appears before the visitor submits. */
.vg-form-panel .wpcf7 form.sent .wpcf7-response-output,
.vg-form-panel .wpcf7 form.failed .wpcf7-response-output,
.vg-form-panel .wpcf7 form.aborted .wpcf7-response-output,
.vg-form-panel .wpcf7 form.invalid .wpcf7-response-output,
.vg-form-panel .wpcf7 form.unaccepted .wpcf7-response-output,
.vg-form-panel .wpcf7 form.payment-required .wpcf7-response-output,
.vg-form-panel .wpcf7 form.spam .wpcf7-response-output {
  border: 1px solid #C9CBCE !important; padding: 12px 16px !important; background: #FFFFFF;
}
.vg-form-panel .wpcf7-not-valid-tip { color: #9a3b3b; font-size: 12px; text-transform: none; letter-spacing: 0; }
.vg-form-panel .wpcf7 .wpcf7-list-item { margin: 0; }
.vg-form-panel .vg-hp { position: absolute !important; left: -9999px !important; }

/* ------- Custom cursor visibility (added by theme.js on fine pointers) ---- */
@media (hover: hover) and (pointer: fine) {
  body.vg-has-cursor, body.vg-has-cursor a, body.vg-has-cursor button { cursor: none; }
  /* Typing surfaces keep the native text caret — the custom cursor hides here. */
  body.vg-has-cursor input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
  body.vg-has-cursor textarea,
  body.vg-has-cursor [contenteditable="true"],
  body.vg-has-cursor [contenteditable=""] { cursor: text; }
}

/* ------- Image lightbox --------------------------------------------------- */
.vg-lb-lock { overflow: hidden !important; }
.vg-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; }
.vg-lightbox.is-open { display: flex; }
.vg-lb-backdrop { position: absolute; inset: 0; background: rgba(10,18,28,.93); animation: vgLbFade .25s ease; }
.vg-lb-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 92vw; max-height: 88vh; animation: vgLbZoom .28s cubic-bezier(.16,1,.3,1); }
.vg-lb-img { max-width: 92vw; max-height: 82vh; object-fit: contain; background: #0d1b2a; box-shadow: 0 30px 80px rgba(0,0,0,.5); transition: opacity .2s ease; }
.vg-lb-cap { margin-top: 14px; color: #E6E7E9; font-family: 'Archivo', sans-serif; font-size: 13px; letter-spacing: .04em; text-align: center; max-width: 80vw; }
.vg-lb-btn { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.28); cursor: pointer; font-size: 26px; line-height: 1; transition: background .2s ease, transform .2s ease; }
.vg-lb-btn:hover { background: rgba(255,255,255,.22); }
.vg-lb-close { top: 22px; right: 22px; }
.vg-lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.vg-lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.vg-lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.vg-lb-next:hover { transform: translateY(-50%) scale(1.06); }
@keyframes vgLbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vgLbZoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 600px) {
  .vg-lb-btn { width: 40px; height: 40px; font-size: 22px; }
  .vg-lb-close { top: 12px; right: 12px; }
  .vg-lb-prev { left: 8px; }
  .vg-lb-next { right: 8px; }
  .vg-lb-img { max-height: 74vh; }
}
/* "View Full" trigger on before/after sliders (does not interfere with drag) */
.vg-lb-viewfull { position: absolute; top: 14px; right: 14px; z-index: 4; background: rgba(255,255,255,.92); color: #1D334C; border: none; padding: 8px 14px; font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: zoom-in; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.vg-lb-viewfull:hover { background: #fff; }

/* ------- Before/After slider (drag performance) -------------------------- */
/* pan-y lets the page still scroll vertically from a touch that starts on the
   slider, while horizontal drags drive the comparison. */
[data-ba-slider] { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
[data-ba-slider] [data-ba-after],
[data-ba-slider] [data-ba-handle] { will-change: clip-path, left; }
[data-ba-slider] img,
[data-ba-slider] [role="img"] { -webkit-user-drag: none; user-drag: none; }
/* Smooth one-time intro nudge only; never during active dragging. */
[data-ba-slider].vg-ba-settle [data-ba-after] { transition: clip-path .5s cubic-bezier(.16,1,.3,1); }
[data-ba-slider].vg-ba-settle [data-ba-handle] { transition: left .5s cubic-bezier(.16,1,.3,1); }
[data-ba-slider].vg-ba-dragging [data-ba-after],
[data-ba-slider].vg-ba-dragging [data-ba-handle] { transition: none !important; }

/* ------- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  .vg-marquee-track { animation: none !important; }
  .vg-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
  .vg-ready [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .vg-ready [data-reveal-img] > img,
  .vg-ready [data-reveal-img] .vg-reveal-media { opacity: 1 !important; transform: none !important; }
  .vg-view-badge { transition: none !important; }
  .vg-preloader { display: none !important; }
  .vg-lb-backdrop, .vg-lb-stage { animation: none !important; }
}
