/* Front Vision — IT Infrastructure & Project Solutions
   Implemented from the Front Vision Website Prototype design. */

:root { --gutter: 40px; }
html, body { margin: 0; padding: 0; background: #121214; }
html { overflow-x: hidden; }
* { box-sizing: border-box; }
body { font-family: 'IBM Plex Sans', sans-serif; color: #B3B6BC; font-size: 16px; line-height: 1.6; background: #0B0B0D; }
a { color: #EC4453; text-decoration: none; }
a:hover { color: #F7F7F8; }
input, select, textarea, button { font-family: 'IBM Plex Sans', sans-serif; }
img { max-width: 100%; }
button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

@keyframes fvPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(0.86); } }
@keyframes fvKenBurns { 0% { transform: scale(1.06); } 100% { transform: scale(1.14); } }

/* ---------- Intro splash ---------- */
#intro-stage {
  position: fixed; inset: 0; z-index: 60; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #1C1C21, #08080A 68%);
  transition: background .9s ease;
}
#intro-stage[data-intro="done"] {
  position: static; z-index: auto; cursor: auto; background: #0B0B0D; display: block; overflow: visible;
}
#site-frame {
  flex: none; width: 100vw; height: 100vh; background: #0B0B0D; overflow: hidden;
  outline: 14px solid #232327; outline-offset: -1px; border-radius: 18px;
  box-shadow: 0 60px 120px -42px rgba(11, 11, 13, 0.55);
  transform: scale(0.52) translateY(-4%);
  transition: transform 2.8s cubic-bezier(.68,0,.16,1), border-radius 1.4s ease .9s, outline-width 1.4s ease 1s, box-shadow 1.8s ease;
}
[data-intro="zoom"] #site-frame, [data-intro="done"] #site-frame {
  outline-width: 0; border-radius: 0; box-shadow: none; transform: scale(1) translateY(0);
}
[data-intro="done"] #site-frame {
  width: auto; height: auto; overflow: visible; outline: 0; border-radius: 0; box-shadow: none; transition: none;
  /* A non-"none" transform (even a no-op scale(1)) establishes a containing
     block for descendant position:fixed elements per spec — the header bar
     and the WhatsApp button would then pin to THIS box instead of the
     viewport and scroll away. Drop the transform once the zoom animation
     that needed it is over; visually it's already an identity transform. */
  transform: none;
}
#intro-stand {
  position: absolute; left: 50%; top: calc(50% + 22vh); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  opacity: 1; transition: opacity .9s ease;
}
[data-intro="zoom"] #intro-stand { opacity: 0; }
[data-intro="done"] #intro-stand { display: none; }

/* ---------- Hover utility classes (source used inline per-element hover styles;
   these classes reproduce each distinct pattern found in the design) ---------- */
.hv-accent:hover { color: #EC4453; }
.hv-lighten:hover { color: #F7F7F8; }
.btn-primary { transition: background .18s ease; }
.btn-primary:hover { background: #C81E2E; }
.btn-primary-lift { transition: background .22s ease, transform .22s ease, box-shadow .22s ease; }
.btn-primary-lift:hover { background: #C81E2E; transform: translateY(-2px); }
.btn-outline { transition: border-color .22s ease; }
.btn-outline:hover { border: 1.5px solid #FFFFFF; }
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover { border: 1px solid #E62E3E; transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(11,11,13,0.3); }
.lift-hover { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.lift-hover:hover { border: 1px solid #E62E3E; transform: translateY(-2px); }
.dropdown-item { transition: background .15s ease, border-color .15s ease; }
.dropdown-item:hover { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14) !important; }
.row-hover { transition: background .15s ease; }
.row-hover:hover { background: rgba(255,255,255,0.05); }
.chip-off { transition: border-color .15s ease, color .15s ease; }
.chip-off:hover { border: 1.5px solid #A8A4A0; color: #F7F7F8; }
.related-chip { transition: border-color .15s ease, color .15s ease; }
.related-chip:hover { border: 1px solid #E62E3E; color: #EC4453; }

/* ---------- Forms ---------- */
.fv-field { border: 1.5px solid #232327; border-radius: 3px; padding: 12px; font-size: 15px; color: #F7F7F8; background: #0B0B0D; width: 100%; }
.fv-field:focus { outline: none; border-color: #EC4453; }
.fv-field option { background: #0B0B0D; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  :root { --gutter: 24px; }
  header nav .nav-links { display: none !important; }
  header .header-inner { width: auto !important; height: auto !important; }
  #mobile-menu-btn { display: flex !important; }
  h1 { font-size: 44px !important; }
  section h2 { font-size: 28px !important; }
  /* Capabilities is a menu of 6 options, not a photo feed — 2 columns keeps
     it scannable as a grid instead of either a 6-row wall or a swipe list. */
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4, .grid-2 { grid-template-columns: 1fr !important; }
  .split-2 { grid-template-columns: 1fr !important; }
  .oem-grid { grid-template-columns: repeat(4, 1fr) !important; }
  #nav-caps-list { grid-template-columns: 1fr !important; max-height: 70vh; overflow-y: auto; }
  /* Full case-studies / blog listing pages: a real "browse everything"
     grid, not a carousel — visitors here are scanning the whole set. */
  .cs-page-grid, .blog-page-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  /* Photo-card rows (projects, case studies, blog) turn into a wall of
     near-identical boxes once stacked to one column on a phone. A
     horizontally-swipeable, snap-scrolling row reads as one browsable
     set instead — the same pattern App Store / news-app card feeds use. */
  .carousel-row, .cases-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: calc(var(--gutter) + 12px);
  }
  .carousel-row::-webkit-scrollbar, .cases-grid::-webkit-scrollbar { display: none; height: 0; }
  .carousel-row > *, .cases-grid > * {
    flex: 0 0 auto;
    width: 78vw;
    max-width: 320px;
    scroll-snap-align: start;
  }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .oem-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .cs-page-grid, .blog-page-grid { grid-template-columns: 1fr !important; }
  h1 { font-size: 34px !important; }
  /* The desktop header packs a wordmark, a "Request a quote" pill and the
     menu button in one row — on a phone-width screen there just isn't
     room for all three without wrapping or overflowing. Drop the header's
     quote pill here; the hero's own quote CTA and the WhatsApp button
     both remain reachable within one scroll. */
  header nav > .nav-go.btn-primary { display: none !important; }
}
#mobile-menu-btn { display: none; }

/* ---------- Photo / logo placeholder panels ----------
   The source design's photography and brand-logo assets could not be
   retrieved in full (the asset API truncates any file over 256KB, which
   corrupts real photos and larger logo PNGs) — these panels are a
   deliberate, cohesive stand-in styled to the brand, not a broken image.
   Swap the background/content for a real <img> once assets are available. */
.photo-panel {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background:
    radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(155deg, #1A1A1F 0%, #0B0B0D 72%);
  background-size: 18px 18px, 100% 100%;
  display: flex; align-items: flex-end;
}
.photo-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(480px 260px at 82% 8%, rgba(230,46,62,0.16), transparent 65%);
}
.photo-panel-tag {
  position: relative; z-index: 1; margin: 14px; font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.08em; color: #B3B6BC;
  background: rgba(11,11,13,0.6); padding: 5px 9px; border: 1px solid rgba(255,255,255,0.10);
}
.photo-panel-icon { position: absolute; top: 14px; right: 14px; z-index: 1; opacity: 0.55; }

.logo-tile {
  border: 1px solid #232327; background: #FFFFFF; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 8px 10px; text-align: center;
}
.logo-tile span {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em; color: #1A1A1F; line-height: 1.15;
}

/* ---------- Accessibility: focus visibility & motion ---------- */
:focus-visible { outline: 2px solid #E62E3E; outline-offset: 2px; border-radius: 2px; }
.fv-field:focus-visible { outline: 2px solid #E62E3E; outline-offset: 1px; }
#skip-intro-btn:hover, #skip-intro-btn:focus-visible { border-color: #EC4453; color: #F7F7F8; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

/* ---------- WhatsApp floating action button ---------- */
#whatsapp-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform .18s ease, background .18s ease;
}
#whatsapp-fab:hover, #whatsapp-fab:focus-visible { background: #1EBE5A; transform: translateY(-2px); outline: 2px solid #F7F7F8; outline-offset: 3px; }
@media (max-width: 560px) {
  #whatsapp-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}