@import "tailwindcss";

/* ===================================================================
   VI TECHNO — PREMIUM DESIGN SYSTEM
   Institutional / commercial-real-estate aesthetic (CBRE / JLL tier)
   =================================================================== */

:root {
  /* Brand — deepened, more institutional navy (kept blue family) */
  --primary: #0B3B6E;       /* core brand navy */
  --primary-dark: #071F3D;  /* near-black navy for dark sections */
  --primary-mid: #145088;   /* mid step for gradients */
  --primary-tint: #EAF0F7;  /* pale wash for badges/backgrounds */

  /* Neutrals — warm, editorial rather than cold slate */
  --ink: #b8c3db;           /* headings */
--menu: #111827;           /* headings */
  --body: #4B5566;          /* paragraph text */
  --muted: #7A8496;         /* captions/labels */
  --paper: #F7F6F2;         /* warm off-white section background */
  --line: #E3E1D9;          /* warm hairline border */
  --line-dark: rgba(255,255,255,0.14);

  --secondary: #123C6B;
  --light: #F5F8FC;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-manrope);
  background: #fff;
  color: var(--body);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-jakarta);
  color: var(--ink);
  letter-spacing: -0.01em;
}

 

#site-loader-fancy, #site-loader-skeleton { display: none; }
html.vi-show-fancy #site-loader-fancy { display: flex; }
html.vi-show-skeleton #site-loader-skeleton { display: flex; }
 
body.is-loading { overflow: hidden; }
 
/* ===================================================================
   1) ANIMATED LOGO INTRO (#site-loader-fancy) — home page, once ever
   =================================================================== */
#site-loader-fancy {
  --ld-navy-deep: #0A1626;
  --ld-navy-2:    #12253D;
  --ld-cyan:      #17C7EA;
  --ld-gold:      #F3B23A;
  --ld-teal:      #5CE0C6;
  --ld-paper:     #F3F6F8;
  --ld-mist:      rgba(243,246,248,0.56);
  --ld-ring-track: rgba(243,246,248,0.10);
 
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 55% 45% at 50% 44%, var(--ld-navy-2) 0%, var(--ld-navy-deep) 70%);
  font-family: 'IBM Plex Mono', monospace;
  transition: opacity .4s ease;
}
#site-loader-fancy.is-hidden { opacity: 0; pointer-events: none; }
#site-loader-fancy * { box-sizing: border-box; }
 
#site-loader-fancy .loader { display: flex; flex-direction: column; align-items: center; gap: 22px; }
 
#site-loader-fancy .mark-holder {
  position: relative;
  width: 112px; height: 112px;
  display: flex; align-items: center; justify-content: center;
}
#site-loader-fancy .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px solid var(--ld-ring-track);
  animation: ldRingOut .3s ease-out .95s forwards;
}
#site-loader-fancy .ring-active {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--ld-cyan);
  border-right-color: var(--ld-gold);
  animation: ldSpin .55s linear 2, ldRingOut .3s ease-out .95s forwards;
}
@keyframes ldSpin { to { transform: rotate(360deg); } }
@keyframes ldRingOut { to { opacity: 0; } }
 
#site-loader-fancy .sketch { position: absolute; width: 78px; height: 78px; overflow: visible; }
#site-loader-fancy .sketch-path {
  fill: none;
  stroke: url(#sketchGrad);
  stroke-width: 280;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#site-loader-fancy .mark-raster {
  position: absolute;
  width: 78px; height: 78px;
  opacity: 0;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
 
#site-loader-fancy .wordmark { text-align: center; opacity: 0; }
#site-loader-fancy .wordmark h1 {
  margin: 0; font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: .10em; color: var(--ld-paper);
}
#site-loader-fancy .wordmark h1 .light { font-weight: 500; color: var(--ld-mist); }
#site-loader-fancy .wordmark .tag {
  margin: 6px 0 0; font-size: 10px; letter-spacing: .36em;
  text-transform: uppercase; color: var(--ld-mist);
}
 
#site-loader-fancy .progress {
  width: 180px; height: 3px; border-radius: 2px;
  background: rgba(243,246,248,.10); overflow: hidden; opacity: 0;
}
#site-loader-fancy .progress-fill {
  height: 100%; width: 34%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ld-cyan), var(--ld-gold), var(--ld-teal), transparent);
}
@keyframes ldSweep { 0% { transform: translateX(-140%); } 100% { transform: translateX(400%); } }
 
#site-loader-fancy .status {
  margin: 0; min-height: 14px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ld-mist); opacity: 0;
}
 
#site-loader-fancy .fade-up { animation: ldRiseIn .6s ease-out forwards; }
@keyframes ldRiseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
 
@media (prefers-reduced-motion: reduce) {
  #site-loader-fancy .ring, #site-loader-fancy .ring-active, #site-loader-fancy .sketch-path { animation: none !important; transition: none !important; }
  #site-loader-fancy .ring, #site-loader-fancy .ring-active, #site-loader-fancy .sketch { opacity: 0; }
  #site-loader-fancy .mark-raster { opacity: 1 !important; }
  #site-loader-fancy .wordmark, #site-loader-fancy .progress, #site-loader-fancy .status { opacity: 1 !important; transform: none !important; }
  #site-loader-fancy .progress-fill { animation: none !important; width: 60%; }
}

.container {
  max-width: 1320px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Eyebrow label — tracked caption with a rule, replaces old pill badge */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--primary);
}
.eyebrow.on-dark {
  color: #cfe0f2;
}
.eyebrow.on-dark::before {
  background: #cfe0f2;
}
.eyebrow.center::before {
  display: none;
}

/* Buttons — squared corners, tracked uppercase type, restrained motion */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.3s ease;
  white-space: nowrap;

}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
border-radious: 10px;
}
.btn-outline-dark {
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
}
.btn-outline-dark:hover {
  background: var(--primary);
  color: #fff;
}
.btn-outline-light {
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  background: transparent;
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--primary-dark);
  border-color: #fff;
}
.btn-white {
  background: #fff;
  color: var(--primary-dark);
}
.btn-white:hover {
  background: var(--primary-tint);
}

.card {
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #fff;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 1px !important;
  background: #ffffff !important;
  opacity: .5;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  width: 28px;
  background: var(--primary) !important;
}

.swiper-button-disabled {
  opacity: .35;
}

.client-marquee {
  width: max-content;
  animation: clientScroll 34s linear infinite;
}

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

@keyframes clientScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ===================================================================
   Extra PHP-port helpers (fonts, since Next/font Google fonts aren't
   available outside the Next.js build — loaded via Google Fonts link
   in header.php instead, mapped to the same CSS variable names).
   =================================================================== */
:root {
  --font-manrope: 'Manrope', sans-serif;
  --font-jakarta: 'Plus Jakarta Sans', sans-serif;
}

/* Simple fade hero slider (replaces Swiper) */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; z-index: 1; }
.hero-slide.active { opacity: 1; z-index: 2; }

/* Hero text block — on mobile/tablet it sits naturally within the
   padded container (no offset, so nothing gets clipped or pushed
   off-center). The 40px/-48px nudge is a desktop-only refinement
   that lines the heading up with the fixed nav/stats bar, so it's
   scoped to lg+ instead of applying everywhere. */
.hero-content {
  transform: none;
}
@media (min-width: 1024px) {
  .hero-content {
    transform: translate(40px, -48px);
  }
}

/* Mobile drawer */
.mobile-drawer { transform: translateX(100%); transition: transform .3s ease; }
.mobile-drawer.open { transform: translateX(0); }

/* Dropdown menus (desktop) */
.nav-dropdown { opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: all .18s ease; }
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Mobile accordion */
.mobile-accordion { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.mobile-accordion.open { max-height: 500px; }

/* ===================================================================
   Hero overlay — written as plain CSS (not Tailwind arbitrary-opacity
   utilities) so the dark bluish wash always renders correctly,
   regardless of Tailwind CDN's JIT parsing of things like
   "from-[#071F3D]/92".
   =================================================================== */
.hero-overlay-side {
  background: linear-gradient(
    to right,
    rgba(7, 31, 61, 0.92) 0%,
    rgba(7, 31, 61, 0.60) 42%,
    rgba(7, 31, 61, 0.20) 75%,
    rgba(7, 31, 61, 0.05) 100%
  );
}
.hero-overlay-bottom {
  background: linear-gradient(
    to top,
    rgba(7, 31, 61, 0.65) 0%,
    rgba(7, 31, 61, 0.15) 45%,
    rgba(7, 31, 61, 0) 100%
  );
}

/* Sticky header — scrolled state as a static class (toggling a
   Tailwind arbitrary-value class like shadow-[...] here instead
   forces the CDN's JIT to recompile on every scroll tick, which is
   the main cause of scroll jank — this avoids that entirely). */
#site-header {
  will-change: box-shadow, border-color;
}
#site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(7, 31, 61, 0.08);
  border-color: transparent;
}

/* GPU-accelerated marquee so it never drops frames while the
   rest of the page paints/scrolls */
.client-marquee {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.hero-dot { background: none; border: none; outline: none; }
.hero-dot:focus, .hero-dot:focus-visible { outline: none; }
.hero-dot-underline {
  position: absolute;
  left: 50%;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: #fff;
  transform: translateX(-50%);
  transition: width .25s ease;
}
.hero-dot.active .hero-dot-underline { width: 24px; }

/* Scroll-down chevron bounce (replaces framer-motion y:[0,6,0] loop) */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.scroll-bounce { animation: scrollBounce 1.6s ease-in-out infinite; }

/* ===================================================================
   Scroll-in "fade up" animation (replaces framer-motion's
   whileInView opacity/translateY animations). Toggled by
   IntersectionObserver in main.js.
   =================================================================== */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   Premium components — pull-quote, animated progress bars,
   dashboard mockup, timeline (used across About / Case Studies /
   Sustainability / Technology for an enterprise-grade feel).
   =================================================================== */

/* Pull-quote */
.pull-quote {
  position: relative;
  padding-left: 28px;
  border-left: 3px solid var(--primary);
  font-size: 17px;
  line-height: 1.7;
  font-style: italic;
  color: var(--ink);
}

/* Animated progress bar (ESG targets, KPI mockups) */
.progress-track {
  height: 8px;
  width: 100%;
  background: var(--line);
  overflow: hidden;
  border-radius: 999px;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--primary), #1E63A8);
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(.16,.84,.44,1);
}
.progress-track.in-view .progress-fill {
  width: var(--fill, 0%);
}

/* Dashboard mockup (pure CSS/HTML — no screenshots needed) */
.dash-mockup {
  background: #0B1E36;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 30px 60px -20px rgba(7,31,61,0.45);
}
.dash-mockup-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.dash-mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.dash-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 16px;
}
.dash-card-value { font-size: 26px; font-weight: 700; color: #fff; }
.dash-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,0.5); margin-top: 4px; }
.dash-bar-row { display:flex; align-items:flex-end; gap:6px; height:70px; }
.dash-bar { flex:1; background: linear-gradient(to top, #1E63A8, #4C9BE0); border-radius: 4px 4px 0 0; opacity:.9; }

/* ===================================================================
   Footer "Company" flyout submenu — mirrors the header dropdown
   (About / Industries) but pops out to the right of the footer
   column on hover or click, since footer columns sit side by side.
   On small screens there's no room to the right, so it collapses
   into an inline accordion instead.
   =================================================================== */
.footer-flyout {
  position: absolute;
  top: 0;
  left: calc(100% + 14px);
  z-index: 30;
  min-width: 220px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.4);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.footer-flyout::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px;
}
.footer-nav-item:hover .footer-flyout,
.footer-nav-item.open .footer-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media (max-width: 1023px) {
  .footer-nav-anchor {
    display: block;
    width: 100%;
  }
  .footer-flyout {
    position: static;
    display: block;
    left: auto;
    top: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .footer-flyout::before { display: none; }
  .footer-flyout a { color: rgba(255,255,255,0.75); }
  .footer-flyout a:hover { color: #fff; background: transparent; }
  .footer-nav-item.open .footer-flyout {
    max-height: 400px;
  }
  .footer-flyout-toggle i {
    transition: transform .25s ease;
  }
  .footer-nav-item.open .footer-flyout-toggle i {
    transform: rotate(180deg);
  }
}

/* Timeline (About page history) */
.timeline-track { position: relative; padding-left: 32px; }
.timeline-track::before {
  content: '';
  position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.timeline-item { position: relative; padding-bottom: 40px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: -32px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--primary);
}