/* ===========================================================
   NABCON CONSTRUCTION — Shared Stylesheet
   =========================================================== */

:root {
  --bg-deep: #0B0E11;
  --bg-panel: #13171C;
  --bg-surface: #1A1F26;
  --bg-surface-hover: #1F252D;
  --cyan: #00CED1;
  --cyan-deep: #00A8B5;
  --cyan-soft: rgba(0, 206, 209, 0.12);
  --white: #FFFFFF;
  --gray: #A0AAB0;
  --gray-dim: #6B747B;
  --border: rgba(255, 255, 255, 0.08);
  --border-cyan: rgba(0, 206, 209, 0.35);
  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius: 6px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --drawer-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  width: 100%;
}

body {
  background: var(--bg-deep);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.6;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Contains any horizontal overflow from page content without touching
   an ancestor of the sticky <header>, so position: sticky keeps working. */
main { display: block; overflow-x: hidden; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* -----------------------------------------------------------
   Typography
   ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.12;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--cyan);
  display: inline-block;
}

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); color: var(--white); }
.section-head h2 span { color: var(--cyan); }
.section-head p { color: var(--gray); font-size: 16px; margin-top: 14px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.cyan { color: var(--cyan); }

/* -----------------------------------------------------------
   Buttons
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: var(--radius);
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  min-height: 48px;
}

.btn-primary {
  background: var(--cyan);
  color: #06141a;
  border: 1px solid var(--cyan);
}
.btn-primary:hover { background: var(--cyan-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,206,209,0.25); }
.btn-primary:active { transform: translateY(0) scale(0.97); box-shadow: 0 0 0 6px rgba(0,206,209,0.18); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0) scale(0.97); box-shadow: 0 0 0 6px rgba(0,206,209,0.12); }

.btn-outline-cyan {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--border-cyan);
}
.btn-outline-cyan:hover { background: var(--cyan-soft); transform: translateY(-2px); }
.btn-outline-cyan:active { transform: translateY(0) scale(0.97); }

.btn-sm { padding: 11px 20px; font-size: 12px; min-height: 40px; }
.btn-block { width: 100%; }

/* -----------------------------------------------------------
   Top utility bar
   ----------------------------------------------------------- */
.topbar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--gray);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 22px; }
.topbar a { display: flex; align-items: center; gap: 7px; transition: color 0.2s; }
.topbar a:hover { color: var(--cyan); }
.topbar i { color: var(--cyan); font-size: 12px; }
.topbar-social { display: flex; gap: 14px; }
.topbar-social a { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; align-items: center; justify-content: center; }
.topbar-social a:hover { border-color: var(--cyan); background: var(--cyan-soft); }
.topbar-social i { font-size: 12px; color: var(--gray); }
.topbar-social a:hover i { color: var(--cyan); }

/* -----------------------------------------------------------
   Main nav — 3-column layout, large overlapping centered logo
   ----------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(11, 14, 17, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  overflow: visible;
  width: 100%;
  /* Animates via `top`, not `transform` — a transform here would
     create a new containing block for the mobile drawer's
     position:fixed elements nested inside this header, breaking
     them loose from the viewport. `top` keeps sticky positioning
     intact and is only ever changed on mobile (see below). */
  transition: top 0.32s var(--ease);
}
.navbar-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 20px;
  position: relative;
  overflow: visible;
}

/* Large logo, floats above the navbar row and overlaps down into the hero */
.logo-center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  z-index: 1000;
  pointer-events: auto;
}
.logo-center img {
  height: 200px;
  max-height: none;
  width: auto;
  display: block;
}

/* legacy inline SVG logo (footer use) */
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
.logo-text { font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; line-height: 1; }
.logo-text small { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.32em; color: var(--gray); margin-top: 3px; }

.nav-left { display: flex; align-items: center; }
.nav-right { display: flex; align-items: center; gap: 22px; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  transition: color 0.2s;
  min-height: 48px;
}
.nav-links > li > a:hover, .nav-links > li > a.active { color: var(--white); }
.nav-links > li > a.active { color: var(--cyan); }
.nav-links > li > a i { font-size: 10px; transition: transform 0.2s; }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  min-width: 240px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--cyan);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.22s var(--ease);
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown:hover > a i { transform: rotate(180deg); }
.dropdown-menu a {
  display: block;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
  border-radius: 4px;
  transition: all 0.18s;
}
.dropdown-menu a:hover { background: var(--cyan-soft); color: var(--cyan); padding-left: 18px; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background 0.2s;
}
.hamburger:active { background: rgba(255,255,255,0.08); }
.hamburger span { width: 22px; height: 2px; background: var(--white); transition: all 0.3s var(--ease); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -----------------------------------------------------------
   Mobile header: quick-action bar, centered logo strip,
   and full-screen mobile menu. Hidden by default;
   switched on for mobile/tablet in the breakpoint below.
   ----------------------------------------------------------- */
.mobile-quickbar,
.mobile-logo-strip,
.mobile-drawer-overlay,
.mobile-drawer { display: none; }

@media (max-width: 860px) {

  body { max-width: 100%; }

  /* Auto-hide on scroll — the quick-bar + logo strip together take up
     a large share of a phone's visible height; sliding the whole
     header out of the way while scrolling down (and straight back on
     any upward scroll, or near the top) gives that space back to the
     content instead of it sitting permanently behind sticky chrome.
     `--mobile-nav-height` is measured and kept in sync by script.js. */
  .navbar.nav-hidden { top: calc(-1 * var(--mobile-nav-height, 170px)); }

  /* --- Quick-action top bar: hamburger (left) + Call/Email (right) ---
     Seamless — same translucent/blurred surface as the rest of the
     header, no dividing border, so the logo row below reads as one
     continuous sticky header rather than stacked boxes. --- */
  .mobile-quickbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 6px 16px;
  }
  .mobile-quickbar .hamburger { display: flex; }

  .quick-actions { display: flex; align-items: center; gap: 8px; }
  .quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 15px;
    border-radius: 30px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s;
  }
  .quick-btn i { font-size: 13px; }
  .quick-btn.call {
    background: var(--cyan);
    color: #06141a;
    box-shadow: 0 6px 16px rgba(0, 206, 209, 0.28);
  }
  .quick-btn.call:active { transform: scale(0.94); box-shadow: 0 0 0 8px rgba(0, 206, 209, 0.18); }
  .quick-btn.email {
    background: transparent;
    border: 1px solid var(--border-cyan);
    color: var(--cyan);
  }
  .quick-btn.email:active { background: var(--cyan-soft); transform: scale(0.94); }

  /* --- Centered logo strip: seamless, no box, no border ---
     Sits flush against the quick-bar above so the whole header
     reads as one blurred glass surface, not stacked panels. */
  .mobile-logo-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 0 16px 10px;
  }
  .mobile-logo-strip img {
    height: 92px;
    max-height: none;
    width: auto;
    display: block;
  }

  /* --- Full-screen mobile menu + blurred backdrop -----------------
     BUG this replaces: the old panel was `position:fixed` with a
     fixed side-width and `overflow-y:auto` on the *whole* panel.
     Once the Services accordion opened (or on any shorter phone),
     the close button + 6 links + submenu + CTA no longer fit inside
     100vh, so the entire panel scrolled — chrome, close button and
     all — showing a visible native scrollbar. `100vh` on mobile
     browsers also measures the *largest* possible viewport (address
     bar hidden), which made the panel taller than what was actually
     visible, compounding the overflow.
     Fix: the panel now sizes itself to `100dvh` (the real visible
     viewport), only the link list is allowed to scroll (the close
     button/logo stay put), and that scroll region's scrollbar is
     hidden — so it only ever engages on a genuinely too-short screen,
     and even then it's invisible, silky touch/wheel scrolling. --- */
  .mobile-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 8, 10, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--drawer-ease), visibility 0s linear 0.3s;
  }
  .mobile-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--drawer-ease), visibility 0s linear 0s;
  }

  .mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    height: 100vh;   /* fallback for browsers without dvh support */
    height: 100dvh;  /* sized to the *visible* viewport, not the address-bar-hidden max */
    width: 100%;
    background:
      radial-gradient(ellipse 620px 320px at 100% 0%, rgba(0, 206, 209, 0.10), transparent 60%),
      var(--bg-panel);
    z-index: 1300;
    padding: max(18px, env(safe-area-inset-top)) 26px max(22px, env(safe-area-inset-bottom));
    overflow: hidden; /* the panel itself never scrolls — see .drawer-links */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-18px) scale(0.98);
    transition: opacity 0.32s var(--drawer-ease), transform 0.38s var(--drawer-ease), visibility 0s linear 0.38s;
  }
  .mobile-drawer.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.32s var(--drawer-ease), transform 0.38s var(--drawer-ease), visibility 0s linear 0s;
  }

  /* Small brand mark balances the close button so the header row
     reads as designed rather than "menu + X in a corner". */
  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-bottom: 16px;
    margin-bottom: clamp(8px, 2.5dvh, 20px);
    border-bottom: 1px solid var(--border);
  }
  .drawer-logo { height: 32px; width: auto; }

  .drawer-close {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--gray);
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .drawer-close:hover { border-color: var(--cyan); color: var(--cyan); }
  .drawer-close:active { transform: scale(0.9); background: var(--cyan-soft); }

  /* The one scrollable region in the menu — and only when content
     genuinely can't fit (e.g. Services expanded on a short/landscape
     screen). Centered + width-capped so it also reads well on
     tablet-width screens instead of stretching edge to edge. */
  .drawer-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;      /* Firefox: no visible scrollbar */
    -ms-overflow-style: none;   /* old Edge/IE */
  }
  .drawer-links::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Chrome/Safari */

  .drawer-links > li { border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .drawer-links > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: clamp(12px, 2.4dvh, 17px) 4px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray);
    transition: color 0.2s, padding-left 0.2s;
  }
  .drawer-links > li > a:hover,
  .drawer-links > li > a:focus-visible { color: var(--white); }
  .drawer-links > li > a:active { color: var(--cyan); padding-left: 10px; }
  .drawer-links > li > a.active { color: var(--cyan); }

  .drawer-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: clamp(12px, 2.4dvh, 17px) 4px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray);
    transition: color 0.2s;
  }
  .drawer-dropdown-toggle:hover,
  .drawer-dropdown-toggle:focus-visible { color: var(--white); }
  .drawer-dropdown-toggle i { font-size: 12px; transition: transform 0.25s var(--drawer-ease); }
  .drawer-dropdown.open .drawer-dropdown-toggle { color: var(--cyan); }
  .drawer-dropdown.open .drawer-dropdown-toggle i { transform: rotate(180deg); }

  .drawer-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding-left: 8px;
    transition: max-height 0.35s var(--drawer-ease);
  }
  .drawer-dropdown.open .drawer-dropdown-menu { max-height: 240px; padding-bottom: 12px; }
  .drawer-dropdown-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
    font-size: 13.5px;
    color: var(--gray);
    transition: color 0.2s;
  }
  .drawer-dropdown-menu a:hover,
  .drawer-dropdown-menu a:focus-visible { color: var(--cyan); }
  .drawer-dropdown-menu a:active { color: var(--cyan); }

  .drawer-cta {
    margin-top: 22px;
    justify-content: center !important;
    background: var(--cyan);
    color: #06141a !important;
    border-radius: 6px;
    min-height: 52px !important;
    padding: 0 2px !important;
    box-shadow: 0 8px 20px rgba(0, 206, 209, 0.25);
    transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
    flex-shrink: 0;
  }
  .drawer-cta:active { transform: scale(0.97); box-shadow: 0 0 0 8px rgba(0, 206, 209, 0.18); }
}

/* Shared scroll lock (mobile drawer, quote modal, welcome popup,
   lightbox) — deliberately outside any media query. Pinning <body>
   with position:fixed rather than plain overflow:hidden means the
   scrollbar's removal never shifts page content sideways, on desktop
   or mobile — see script.js's lockBodyScroll/unlockBodyScroll. */
body.scroll-locked {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer-overlay,
  .mobile-drawer,
  .drawer-dropdown-menu,
  .drawer-dropdown-toggle i,
  .hamburger span,
  .welcome-overlay,
  .welcome-card,
  .navbar {
    transition: none !important;
  }
  .welcome-card .btn-primary { animation: none !important; }
}

@media (max-width: 380px) {
  .quick-btn span { display: none; }
  .quick-btn { padding: 0; width: 44px; border-radius: 50%; }
  .quick-btn i { font-size: 15px; }
  .mobile-logo-strip img { height: 74px; }
  .drawer-logo { height: 26px; }
}

/* -----------------------------------------------------------
   Page hero (secondary pages)
   ----------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: 60px 0 48px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-deep));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,206,209,0.14), transparent 70%);
}
.page-hero .eyebrow { justify-content: center; }
.breadcrumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-dim);
  margin-top: 16px;
}
.breadcrumbs a:hover { color: var(--cyan); }
.page-hero h1 { text-align: center; font-size: clamp(32px, 5vw, 54px); }
.page-hero p.lead { text-align: center; color: var(--gray); max-width: 620px; margin: 18px auto 0; font-size: 17px; }

/* -----------------------------------------------------------
   Home hero
   ----------------------------------------------------------- */
.hero {
  position: relative;
  padding: 20px;
  background: linear-gradient(150deg, var(--bg-deep) 45%, var(--bg-panel) 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: start;
  padding-top: 0;
  padding-bottom: 52px;
}
.hero-diag {
  position: absolute;
  top: 0; bottom: 0;
  left: 52%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-cyan), transparent);
  transform: skewX(-12deg);
}
.hero-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.hero-brand .mark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 3.8vw, 46px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.05;
}
.hero-brand .mark span { color: var(--cyan); }
.hero-brand .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-cyan), transparent); max-width: 120px; }

.hero-tagline { color: var(--cyan); font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 24px; }
.hero-tagline span { color: var(--gray-dim); margin: 0 10px; }
.hero h1 { font-size: clamp(24px, 3.2vw, 38px); letter-spacing: 0; }
.hero h1 .outline { color: var(--white); }
.hero h1 .fill { color: var(--cyan); }
.hero p.lead { color: var(--gray); font-size: 17px; max-width: 460px; margin: 22px 0 34px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-visual-wrap {
  position: relative;
  perspective: 1200px;
}
.hero-visual {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3.1;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(210deg, rgba(0,206,209,0.18), transparent 55%);
  pointer-events: none;
}
.hero-badge {
  position: absolute;
  bottom: 20px; left: 20px;
  background: rgba(11,14,17,0.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-cyan);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
}
.hero-badge small { display: block; color: var(--gray); font-weight: 500; font-size: 11px; margin-top: 2px; text-transform: none; letter-spacing: 0; }

/* -----------------------------------------------------------
   3D floating accent shapes (hero)
   ----------------------------------------------------------- */
@keyframes floatCube {
  0%, 100% { transform: translateY(0) rotate3d(1, 1, 0, 0deg); }
  50% { transform: translateY(-16px) rotate3d(1, 1, 0, 180deg); }
}
@keyframes floatCubeSlow {
  0%, 100% { transform: translateY(0) rotate3d(0, 1, 1, 0deg); }
  50% { transform: translateY(14px) rotate3d(0, 1, 1, 160deg); }
}
.hero-3d-cube {
  position: absolute;
  border: 1px solid var(--border-cyan);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,206,209,0.16), rgba(0,206,209,0.02));
  box-shadow: 0 0 30px rgba(0,206,209,0.22);
  pointer-events: none;
  z-index: 3;
  transform-style: preserve-3d;
}
.hero-3d-cube.c1 { width: 58px; height: 58px; top: -24px; left: -22px; animation: floatCube 6.5s ease-in-out infinite; }
.hero-3d-cube.c2 { width: 42px; height: 42px; bottom: -18px; right: 40px; animation: floatCubeSlow 5.5s ease-in-out infinite; animation-delay: 0.8s; }
.hero-3d-cube.c3 { width: 30px; height: 30px; top: 44%; right: -14px; border-radius: 50%; animation: floatCube 7.5s ease-in-out infinite; animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .hero-3d-cube { animation: none; }
  .hero-visual { transition: none; }
}
@media (max-width: 860px) {
  .hero-3d-cube { display: none; }
}

/* -----------------------------------------------------------
   Stats strip
   ----------------------------------------------------------- */
.stats-strip {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.stats-strip .container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 22px 32px;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-left: 1px solid var(--border);
}
.stat-item:first-child { border-left: none; padding-left: 0; }
.stat-item i { color: var(--cyan); font-size: 22px; flex-shrink: 0; }
.stat-item strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 14px; text-transform: uppercase; }
.stat-item span { color: var(--gray); font-size: 12.5px; }

/* -----------------------------------------------------------
   Sections
   ----------------------------------------------------------- */
section { padding: 80px 0; }
.section-tight { padding: 56px 0; }
.bg-panel { background: var(--bg-panel); }
.bg-surface { background: var(--bg-surface); }

/* Featured services grid */
.services-grid {
  display: grid;
  grid-template-columns: 0.85fr repeat(4, 1fr);
  gap: 22px;
}
.services-grid .head-col { display: flex; flex-direction: column; justify-content: center; }
.head-col p { color: var(--gray); font-size: 15px; margin: 16px 0 26px; }

.service-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.35s var(--ease);
}
.service-card:hover { border-color: var(--border-cyan); transform: translateY(-6px); box-shadow: var(--shadow); }
.service-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.service-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.service-card:hover .img-wrap img { transform: scale(1.08); }
.service-card .icon-badge {
  position: absolute; top: 14px; left: 14px;
  width: 42px; height: 42px;
  background: rgba(11,14,17,0.85);
  border: 1px solid var(--border-cyan);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan); font-size: 18px;
}
.service-card .body { padding: 22px; }
.service-card h3 { font-size: 16px; margin-bottom: 8px; }
.service-card p { color: var(--gray); font-size: 13.5px; margin-bottom: 14px; }
.service-card .link { color: var(--cyan); font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s; }
.service-card .link:hover { gap: 10px; }

/* Why choose us */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.feature-item { padding: 30px 26px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.25s; }
.feature-item:hover { border-color: var(--border-cyan); background: var(--bg-surface-hover); }
.feature-item i { color: var(--cyan); font-size: 26px; margin-bottom: 18px; display: block; }
.feature-item h3 { font-size: 15px; margin-bottom: 10px; }
.feature-item p { color: var(--gray); font-size: 13.5px; }

/* Projects gallery */
.gallery-filters { display: flex; gap: 10px; margin-bottom: 36px; flex-wrap: wrap; }
.filter-btn {
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 30px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  transition: all 0.2s;
  min-height: 44px;
}
.filter-btn:hover { color: var(--white); border-color: var(--border-cyan); }
.filter-btn.active { background: var(--cyan); color: #06141a; border-color: var(--cyan); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3.2;
  cursor: pointer;
  border: 1px solid var(--border);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,14,17,0.92) 10%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
  opacity: 0; transition: opacity 0.3s;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay .tag { color: var(--cyan); font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.gallery-overlay h4 { font-size: 15px; text-transform: none; letter-spacing: 0; }
.gallery-item.hidden { display: none; }

/* ===========================================================
   Live Site Spotlight — one real, ongoing client project shown
   as its own before/after case study on the Projects page.
   =========================================================== */
.live-project { padding-bottom: 90px; }

.live-project-banner {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  margin-bottom: 48px;
}
.live-project-banner-fade {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,14,17,0.97) 15%, rgba(11,14,17,0.55) 65%, rgba(11,14,17,0.25) 100%);
}
.live-project-banner-inner { position: relative; padding: 48px 32px 40px; max-width: 780px; }
.live-project-banner-inner .lead { color: var(--gray); }

.live-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(0, 206, 209, 0.6);
  animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 206, 209, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(0, 206, 209, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 206, 209, 0); }
}

.live-project-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.live-meta-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 30px;
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--gray);
}
.live-meta-item i { color: var(--cyan); }

.stage-tabs { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.stage-tab {
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: 30px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  transition: all 0.2s;
  min-height: 44px;
}
.stage-tab:hover { color: var(--white); border-color: var(--border-cyan); }
.stage-tab.active { background: var(--cyan); color: #06141a; border-color: var(--cyan); }

.stage-panel { display: none; }
.stage-panel.active { display: block; animation: stage-fade 0.35s var(--ease); }
@keyframes stage-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.stage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stage-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color 0.25s, transform 0.25s;
}
.stage-item:hover { border-color: var(--border-cyan); transform: translateY(-4px); }
.stage-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.stage-item:hover img { transform: scale(1.08); }
.stage-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,14,17,0.92) 15%, transparent 62%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
}
.stage-overlay .tag { color: var(--cyan); font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; }
.stage-overlay h4 { font-size: 13.5px; text-transform: none; letter-spacing: 0; }

/* Process steps */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.process-grid::before {
  content: "";
  position: absolute; top: 34px; left: 6%; right: 6%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-cyan) 0 8px, transparent 8px 16px);
}
.process-step { position: relative; padding: 0 20px; text-align: left; }
.process-num {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-cyan);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--cyan);
  margin-bottom: 22px;
  position: relative; z-index: 2;
}
.process-step h3 { font-size: 16px; margin-bottom: 10px; }
.process-step p { color: var(--gray); font-size: 13.5px; }

/* Testimonials */
.testimonial-slider { position: relative; max-width: 780px; margin: 0 auto; }
.testimonial-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px;
  text-align: center;
  display: none;
}
.testimonial-card.active { display: block; animation: fadeUp 0.5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.stars { color: var(--cyan); font-size: 16px; letter-spacing: 3px; margin-bottom: 18px; }
.testimonial-card p.quote { font-size: 17px; color: var(--white); line-height: 1.7; margin-bottom: 24px; }
.testimonial-author { display: flex; align-items: center; justify-content: center; gap: 12px; }
.author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--cyan-soft); border: 1px solid var(--border-cyan); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; color: var(--cyan); }
.author-name { font-family: var(--font-head); font-weight: 700; font-size: 14px; }
.author-loc { color: var(--gray); font-size: 12.5px; }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.slider-dots button { width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: all 0.25s; }
.slider-dots button.active { background: var(--cyan); width: 24px; border-radius: 5px; }
.slider-arrows { display: flex; justify-content: center; gap: 14px; margin-top: 22px; }
.slider-arrows button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.slider-arrows button:hover { border-color: var(--cyan); color: var(--cyan); }
.slider-arrows button:active { transform: scale(0.92); background: var(--cyan-soft); }

/* Quote banner */
.quote-banner {
  background: linear-gradient(120deg, #072025, var(--bg-panel) 70%);
  border: 1px solid var(--border-cyan);
  border-radius: 10px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.quote-banner::before {
  content: "";
  position: absolute; right: -80px; bottom: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,206,209,0.16), transparent 70%);
}
.quote-banner h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }
.quote-banner p { color: var(--gray); }
.mini-form { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; }
.mini-form-row { display: flex; gap: 12px; }

/* -----------------------------------------------------------
   Forms
   ----------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field label { font-size: 12.5px; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; }
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 13px 15px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.2s;
  width: 100%;
  min-height: 48px;
}
.form-field textarea { min-height: 120px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--gray-dim); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--cyan); outline: none; }
.form-field input.error, .form-field select.error, .form-field textarea.error { border-color: #ff5c5c; }
.field-error { color: #ff8080; font-size: 12px; display: none; }
.field-error.show { display: block; }
.form-field textarea { resize: vertical; }

/* Optional file-upload field (mini-form + quote modal) */
.optional-tag { color: var(--gray-dim); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; }
.file-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-panel);
  border: 1px dashed var(--border-cyan);
  border-radius: 4px;
  padding: 13px 15px;
  min-height: 48px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.file-drop:hover { background: var(--bg-surface-hover); border-color: var(--cyan); }
.file-drop i { color: var(--cyan); font-size: 17px; flex-shrink: 0; }
.file-drop-text { color: var(--gray); font-size: 13px; line-height: 1.4; }
.file-drop.has-files { border-style: solid; border-color: var(--cyan); }
.file-drop.has-files .file-drop-text { color: var(--white); }
.file-input-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.form-success {
  display: none;
  align-items: center;
  gap: 12px;
  background: rgba(0,206,209,0.1);
  border: 1px solid var(--border-cyan);
  border-radius: 6px;
  padding: 16px 18px;
  color: var(--cyan);
  font-size: 14px;
  margin-top: 16px;
}
.form-success.show { display: flex; }

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */
footer { background: var(--bg-panel); border-top: 1px solid var(--border); padding-top: 76px; overflow-x: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.footer-col h4 { font-size: 13px; letter-spacing: 0.08em; margin-bottom: 22px; color: var(--white); }
.footer-col p { color: var(--gray); font-size: 14px; margin-bottom: 20px; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul a { color: var(--gray); font-size: 14px; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--cyan); }
.footer-col .logo { margin-bottom: 18px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray); transition: all 0.2s; }
.footer-social a:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-soft); }
.footer-contact li { display: flex; gap: 10px; color: var(--gray); font-size: 14px; margin-bottom: 16px; align-items: flex-start; }
.footer-contact i { color: var(--cyan); margin-top: 3px; }
.footer-bottom { border-top: 1px solid var(--border); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--gray-dim); }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a:hover { color: var(--cyan); }

/* -----------------------------------------------------------
   Franchise partner strip (footer)
   ----------------------------------------------------------- */
.franchise-strip {
  border-top: 1px solid var(--border);
  padding: 26px 0;
}
.franchise-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}
.franchise-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-dim);
}
.franchise-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: var(--bg-surface);
  transition: all 0.25s var(--ease);
}
.franchise-badge:hover {
  border-color: var(--border-cyan);
  background: var(--cyan-soft);
  transform: translateY(-2px);
}
.franchise-badge img {
  height: 26px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
}
.franchise-badge .fallback-text {
  display: none;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--white);
  text-transform: uppercase;
}
.franchise-badge .fallback-text span { color: var(--cyan); }
.franchise-badge .visit-icon { font-size: 10px; color: var(--gray-dim); margin-left: 2px; }
.franchise-badge:hover .visit-icon { color: var(--cyan); }

@media (max-width: 520px) {
  .franchise-strip-inner { flex-direction: column; gap: 12px; }
}

/* -----------------------------------------------------------
   Modal (quote form)
   ----------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(6, 8, 10, 0.78);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s var(--ease);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--border-cyan);
  border-radius: 10px;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s var(--ease);
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray);
  transition: all 0.2s;
}
.modal-close:hover { border-color: var(--cyan); color: var(--cyan); }
.modal-close:active { transform: scale(0.9); background: var(--cyan-soft); }
.modal-box h3 { font-size: 22px; margin-bottom: 8px; }
.modal-box p.sub { color: var(--gray); font-size: 14px; margin-bottom: 26px; }
.modal-box form { display: flex; flex-direction: column; gap: 16px; }

/* -----------------------------------------------------------
   Welcome offer popup — auto-shows once per browser session
   shortly after a page loads (see script.js). Deliberately a
   lighter "teaser card" rather than the full quote form: its
   only job is to catch attention and hand off to the real
   #quoteModal, so friction stays low. Same visual language as
   the modal above (dark panel, cyan accents) but a punchier
   entrance so it actually gets noticed.
   ----------------------------------------------------------- */
.welcome-overlay {
  position: fixed; inset: 0;
  background: rgba(6, 8, 10, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1500; /* above the mobile drawer (1300) so it always wins if both could show */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--drawer-ease), visibility 0s linear 0.3s;
}
.welcome-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--drawer-ease), visibility 0s linear 0s;
}
.welcome-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background:
    radial-gradient(ellipse 320px 200px at 50% -10%, rgba(0, 206, 209, 0.16), transparent 65%),
    var(--bg-panel);
  border: 1px solid var(--border-cyan);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 206, 209, 0.06);
  padding: clamp(28px, 5vh, 40px) clamp(24px, 5vw, 38px) clamp(24px, 4vh, 32px);
  text-align: center;
  transform: translateY(28px) scale(0.94);
  transition: transform 0.4s var(--drawer-ease);
}
.welcome-card::-webkit-scrollbar { display: none; width: 0; height: 0; }
.welcome-overlay.open .welcome-card { transform: translateY(0) scale(1); }

.welcome-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray);
  flex-shrink: 0;
  transition: all 0.2s;
}
.welcome-close:hover { border-color: var(--cyan); color: var(--cyan); }
.welcome-close:active { transform: scale(0.9); background: var(--cyan-soft); }

.welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cyan-soft);
  color: var(--cyan);
  border: 1px solid var(--border-cyan);
  border-radius: 30px;
  padding: 7px 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.welcome-badge i { font-size: 11px; }

.welcome-card h3 {
  font-size: clamp(19px, 4vw, 23px);
  line-height: 1.25;
  margin-bottom: 10px;
}
.welcome-card > p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.welcome-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  margin-bottom: 26px;
}
.welcome-points span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--white);
}
.welcome-points i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: 10px;
  flex-shrink: 0;
}

/* Slow, subtle glow pulse draws the eye to the CTA without being
   obnoxious — pauses automatically for reduced-motion users below. */
.welcome-card .btn-primary {
  animation: welcomePulse 2.6s ease-in-out infinite;
}
@keyframes welcomePulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(0, 206, 209, 0.25); }
  50% { box-shadow: 0 8px 28px rgba(0, 206, 209, 0.5); }
}

.welcome-dismiss {
  display: block;
  width: 100%;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--gray-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.welcome-dismiss:hover { color: var(--gray); }

@media (max-width: 380px) {
  .welcome-points span { font-size: 12.5px; }
}

/* Project preview modal */
.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(6,8,10,0.9);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
  opacity: 0; visibility: hidden;
  transition: all 0.25s var(--ease);
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-box {
  max-width: 900px; width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border-cyan);
  border-radius: 10px;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.lightbox-overlay.open .lightbox-box { transform: scale(1); }
.lightbox-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.lightbox-body { padding: 28px 32px; overflow-y: auto; }
.lightbox-body .tag { color: var(--cyan); font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.lightbox-body h3 { font-size: 22px; margin: 8px 0 12px; text-transform: none; letter-spacing: 0; }
.lightbox-body p { color: var(--gray); font-size: 14.5px; }

/* -----------------------------------------------------------
   Multi-step quote form (contact page)
   ----------------------------------------------------------- */
.stepper { display: flex; justify-content: space-between; margin-bottom: 44px; position: relative; }
.stepper::before { content: ""; position: absolute; top: 17px; left: 5%; right: 5%; height: 1px; background: var(--border); }
.step-dot { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 2; flex: 1; }
.step-dot .circle { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--gray); transition: all 0.25s; }
.step-dot.active .circle { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-soft); }
.step-dot.done .circle { background: var(--cyan); border-color: var(--cyan); color: #06141a; }
.step-dot span.label { font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
.step-dot.active span.label { color: var(--white); }

.form-panel { display: none; }
.form-panel.active { display: block; animation: fadeUp 0.4s var(--ease); }
.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.option-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 48px;
}
.option-card i { color: var(--cyan); font-size: 22px; margin-bottom: 10px; display: block; }
.option-card span { font-size: 13px; font-weight: 600; }
.option-card:hover { border-color: var(--border-cyan); }
.option-card:active { transform: scale(0.97); }
.option-card.selected { border-color: var(--cyan); background: var(--cyan-soft); }
.upload-zone {
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--cyan); background: var(--cyan-soft); }
.upload-zone i { font-size: 26px; color: var(--cyan); margin-bottom: 10px; display: block; }
.upload-zone span { color: var(--gray); font-size: 13px; }
#file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.file-chip { display: flex; justify-content: space-between; align-items: center; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; font-size: 13px; }
.file-chip button { color: var(--gray); }
.file-chip button:hover { color: #ff8080; }
.step-actions { display: flex; justify-content: space-between; margin-top: 32px; gap: 14px; }
.review-summary { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 20px; margin-bottom: 20px; }
.review-summary div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.review-summary div:last-child { border-bottom: none; }
.review-summary span:first-child { color: var(--gray); }

/* -----------------------------------------------------------
   Contact page layout
   ----------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 46px; align-items: start; }
.contact-info-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 32px; }
.contact-info-card h3 { font-size: 17px; margin-bottom: 22px; }
.contact-row { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-row i { color: var(--cyan); font-size: 18px; margin-top: 3px; }
.contact-row strong { display: block; font-size: 14px; margin-bottom: 3px; }
.contact-row span, .contact-row a { color: var(--gray); font-size: 13.5px; }
.map-embed { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); margin-top: 24px; height: 200px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.9); }

/* -----------------------------------------------------------
   About page
   ----------------------------------------------------------- */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-split img { border-radius: 8px; box-shadow: var(--shadow); }
.about-split p { color: var(--gray); margin-bottom: 16px; font-size: 15.5px; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value-card { text-align: center; padding: 30px 20px; }
.value-card i { font-size: 28px; color: var(--cyan); margin-bottom: 16px; display: block; }
.value-card h4 { font-size: 14px; margin-bottom: 8px; }
.value-card p { color: var(--gray); font-size: 13px; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.team-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-align: center; transition: all 0.25s; }
.team-card:hover { border-color: var(--border-cyan); transform: translateY(-4px); }
.team-card img { aspect-ratio: 1/1; object-fit: cover; }
.team-card .body { padding: 22px; }
.team-card h4 { font-size: 15px; text-transform: none; letter-spacing: 0; }
.team-card span { color: var(--cyan); font-size: 12.5px; }

.badge-strip { display: flex; gap: 34px; align-items: center; flex-wrap: wrap; justify-content: center; }
.badge-item { display: flex; align-items: center; gap: 10px; color: var(--gray); font-size: 13px; }
.badge-item i { color: var(--cyan); font-size: 22px; }

/* -----------------------------------------------------------
   Services detail page
   ----------------------------------------------------------- */
.service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 88px 0; border-bottom: 1px solid var(--border); }
.service-detail:nth-child(even) .sd-text { order: 2; }
.service-detail:nth-child(even) .sd-img { order: 1; }
.sd-img img { border-radius: 8px; box-shadow: var(--shadow); }
.sd-text ul { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.sd-text ul li { display: flex; gap: 10px; color: var(--gray); font-size: 14.5px; align-items: flex-start; }
.sd-text ul li i { color: var(--cyan); margin-top: 4px; }
.sd-text p { color: var(--gray); margin: 16px 0; }
.sd-text .btn { margin-top: 22px; }

/* -----------------------------------------------------------
   Process page detail
   ----------------------------------------------------------- */
.roadmap { display: flex; flex-direction: column; gap: 0; max-width: 860px; margin: 0 auto; }
.roadmap-item { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 34px 0; border-bottom: 1px solid var(--border); }
.roadmap-item:last-child { border-bottom: none; }
.roadmap-num { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--cyan); opacity: 0.5; }
.roadmap-item h3 { font-size: 18px; margin-bottom: 10px; }
.roadmap-item p { color: var(--gray); font-size: 14.5px; }

/* -----------------------------------------------------------
   Reviews page
   ----------------------------------------------------------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.review-card .stars { margin-bottom: 14px; font-size: 14px; }
.review-card p.quote { font-size: 14.5px; color: var(--white); margin-bottom: 20px; }
.review-card .testimonial-author { justify-content: flex-start; }
.rating-summary { display: flex; align-items: center; gap: 30px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; margin-bottom: 50px; }
.rating-num { font-family: var(--font-head); font-weight: 800; font-size: 52px; color: var(--cyan); }
.rating-num small { display: block; font-size: 13px; color: var(--gray); font-weight: 500; text-transform: none; }

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid .head-col { grid-column: 1 / -1; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .process-grid::before { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .stage-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip .container { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .stat-item:nth-child(4) { border-left: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .topbar { display: none; }

  /* Desktop nav pieces are fully replaced by the mobile quick-bar + drawer */
  .navbar-grid { display: none; }

  .hero { padding: 0; }
  .hero .container { grid-template-columns: 1fr; padding-top: 12px; padding-bottom: 44px; }
  .hero-diag { display: none; }
  .hero-visual-wrap { order: -1; }
  .hero p.lead { max-width: 100%; }

  .services-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .stage-grid { grid-template-columns: 1fr; }
  .live-project-banner { min-height: 300px; }
  .stats-strip .container { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-left: none !important; padding-left: 0 !important; }

  .quote-banner { grid-template-columns: 1fr; padding: 34px 24px; }
  .mini-form-row { flex-direction: column; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .about-split { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .service-detail { grid-template-columns: 1fr; padding: 56px 0; }
  .service-detail:nth-child(even) .sd-text { order: 1; }
  .service-detail:nth-child(even) .sd-img { order: 2; }

  .contact-grid { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr 1fr; }
  .stepper span.label { display: none; }

  section { padding: 64px 0; }
  .container { padding: 0 20px; }
}

@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
  .rating-summary { flex-direction: column; text-align: center; gap: 14px; }
  .modal-box { padding: 28px 22px; }
  .live-project-meta { gap: 10px; }
}

/* -----------------------------------------------------------
   Rich-text blocks (About page)
   ----------------------------------------------------------- */
.info-block { display: flex; gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--border); }
.info-block:last-child { border-bottom: none; }
.info-block .num { font-family: var(--font-head); font-weight: 800; font-size: 28px; color: var(--cyan); opacity: 0.55; flex-shrink: 0; width: 56px; }
.info-block h3 { font-size: 17px; margin-bottom: 10px; }
.info-block p { color: var(--gray); font-size: 14.5px; margin-bottom: 10px; }
.info-block p:last-child { margin-bottom: 0; }
.info-block ul { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.info-block ul li { display: flex; gap: 10px; color: var(--gray); font-size: 14px; align-items: flex-start; }
.info-block ul li i { color: var(--cyan); margin-top: 4px; flex-shrink: 0; }

/* -----------------------------------------------------------
   Scroll-reveal animation
   ----------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view { transition-delay: var(--reveal-delay, 0s); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* -----------------------------------------------------------
   Floating WhatsApp button
   ----------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  transition: transform 0.25s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float:active { transform: scale(0.94); }
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: wa-pulse 2.2s infinite;
  z-index: -1;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::before { animation: none; }
}
@media (max-width: 520px) {
  .whatsapp-float { width: 54px; height: 54px; font-size: 22px; bottom: 18px; right: 18px; }
}

/* -----------------------------------------------------------
   Toast notifications (form submission feedback)
   ----------------------------------------------------------- */
#toastContainer {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  font-size: 13.5px;
  color: var(--white);
  transform: translateX(120%);
  opacity: 0;
  transition: all 0.35s var(--ease);
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-left-color: var(--cyan); }
.toast.error { border-left-color: #ff5c5c; }
.toast i { font-size: 17px; margin-top: 1px; flex-shrink: 0; color: var(--cyan); }
.toast.error i { color: #ff8080; }
.toast .toast-body strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 3px; }
.toast .toast-body span { color: var(--gray); font-size: 13px; }
.toast-close { color: var(--gray-dim); margin-left: auto; flex-shrink: 0; }
.toast-close:hover { color: var(--white); }

.btn.is-loading { opacity: 0.7; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  margin-left: 8px;
  animation: btn-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  #toastContainer { left: 16px; right: 16px; top: 16px; max-width: none; }
}