/* Homepage dark theme.
   Only loaded by index.html — every other page (services.html, industries.html, the
   ~620 industry pages, etc.) keeps its current styling. Most rules are scoped to a
   specific section ID so reused classes (.card-1, .heading-7, .text-block-31,
   .heading-29, .heading-24, .creative-mind-heading, etc.) don't bleed elsewhere.

   Sections in DOM order:
     #home       — hero with video, already dark via fallback bg
     #services   — handled by service-animations.css (dark glassmorphism)
     #industries — handled by industry-selector.css (dark video bg)
     #about      — needs dark + glassmorphism (this file)
     #work       — needs dark + glassmorphism (this file)
     #contact    — STAYS LIGHT as contrast (forced white in this file)
     footer      — dark with inverted logo/social glyphs (this file)
*/

:root { --qs-violet: #4423FD; }

/* ---------- Page chrome ---------- */
body.body {
  background-color: #0A0A0A;
  color: #fff;
}

/* The Webflow export ships a decorative .gradient-background div at the top — a soft
   light wash that fights the dark theme. Hide it on the homepage. */
body.body .gradient-background { display: none !important; }

/* ---------- Navigation ---------- */
/* The nav shell sits over the hero. Strip its white background + shadow so the hero
   video reads behind it. */
.navbar-logo-left-container.shadow-three,
.navbar-logo-left-container.w-nav {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Logo wordmark is a black SVG — invert it to read white on dark. */
.navbar-brand-2 img { filter: invert(1) brightness(2); }

/* Top nav text links + dropdown toggles */
.nav-link-4,
.nav-dropdown-toggle { color: #fff !important; }
.nav-link-4:hover,
.nav-dropdown-toggle:hover { color: rgba(255, 255, 255, 0.7) !important; }

/* Nav hover / active pill — base CSS fills .nav-link-4:hover and .w--current with a
   WHITE background, which is invisible behind white nav text on the dark page. Replace
   the fill with brand violet so the label stays legible. */
.nav-link-4:hover {
  color: #fff !important;
  background-color: var(--qs-violet) !important;
  border-radius: 999px !important;
}
.nav-link-4.w--current {
  color: #fff !important;
  background-color: var(--qs-violet) !important;
  border-radius: 999px !important;
}

/* Dropdown menu surface (Services / Industries) — give it a dark glassy background
   so the menu doesn't pop with a white box over a dark page. */
.nav-dropdown-list.w-dropdown-list {
  background-color: rgba(20, 20, 20, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
}
.nav-dropdown-link {
  color: rgba(255, 255, 255, 0.82) !important;
  background-color: transparent !important;
}
.nav-dropdown-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Hamburger + close icons are also black glyphs — invert. */
.div-block-53 .image-28,
.image-28 { filter: invert(1) brightness(2); }

/* "Let's Talk" CTA in the nav — promote it to brand violet so it pops on dark */
.c2a-button {
  background-color: var(--qs-violet) !important;
  border: 1px solid var(--qs-violet) !important;
}
.c2a-button .text-block-5 { color: #fff !important; }
.c2a-button .btn-icon img { filter: invert(0); }   /* leave white arrow asset alone */

/* ---------- #about — "Why businesses choose Qeystone" ---------- */
#about {
  background-color: transparent;   /* inherits body #0A0A0A */
  color: #fff;
}

#about .creative-mind-heading { color: #fff; }
#about .creative-mind-heading .text-span-14 { color: var(--qs-violet); }

/* =========================================================================
   "Why businesses choose Qeystone" — 3 video-background cards in a row, same
   treatment as the service cards: a full-bleed looping video, a flat dark overlay,
   and title + description pinned bottom-left.
   ========================================================================= */
#about .grid-18 {
  grid-template-columns: 1fr 1fr 1fr;       /* 3 equal cards in a row */
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  align-items: stretch;
  margin-top: 64px;
}

#about .why-card {
  position: relative;
  isolation: isolate;                       /* contain each card's z-index layers */
  overflow: hidden;
  min-height: 420px;
  border-radius: 16px;
  background-color: #0f0f0f;                /* fallback before the video paints */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
#about .why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Background video fills the card (z-index 0) */
#about .why-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Flat dark overlay (z-index 1) */
#about .why-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
/* Title + description, bottom-left (z-index 2) */
#about .why-text {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  color: #fff;
}
#about .why-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
#about .why-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

@media screen and (max-width: 767px) {
  #about .grid-18 { grid-template-columns: 1fr; }
}

/* ---------- #work — case studies grid ---------- */
#work {
  background-color: transparent;   /* inherits body #0A0A0A */
  color: #fff;
}

#work .our-work-heading { color: #fff; }
#work .our-work-heading .span-italic-txt { color: var(--qs-violet); }

/* Case-study cards (testimonials with photo + result + chips) — glassmorphism */
#work .card-1,
#work .card-2,
#work .card-3 {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
#work .card-1:hover,
#work .card-2:hover,
#work .card-3:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  transform: translateY(-2px);
}

/* Result line + client attribution (the .client-name uses inline opacity:.6 with no
   color, so it'll inherit white parent and read as 60% white — perfect). */
#work .heading-7 { color: #fff; }
#work .small-card { color: #fff; }

/* Chips (Home Services, AI Agents & Voice AI, etc.) — invert from dark-on-light pills
   to light-on-dark glass pills */
#work .chips .link-block-2 {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
}
#work .chips .link-block-2 > div { color: rgba(255, 255, 255, 0.85); }

/* ---------- #contact — STAYS LIGHT as deliberate contrast ---------- */
/* Explicitly white so the dark body doesn't bleed through. The native styling for the
   form fields (.contact_field, .contact_message-field) and dark headings works on
   white as designed; no need to override anything inside. */
#contact.section-11,
#contact {
  background-color: #FFFFFF !important;
  color: #1A1A2E;
}

/* ---------- Footer ---------- */
.footer {
  background-color: #0A0A0A;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Wordmark in the footer is the same black SVG — invert. */
.footer .footer-column-1 img[src*="qeystone-wordmark-black"] { filter: invert(1) brightness(2); }

/* Social icons (twitter / linkedin / insta / dribbble) — dark glyphs on dark = invisible. */
.footer .footer-social-icon img { filter: invert(1) brightness(2); }
.footer .footer-social-icon {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: background-color 200ms ease;
}
.footer .footer-social-icon:hover { background-color: rgba(255, 255, 255, 0.1); }

/* Footer text + links */
.footer .text-block-32,
.footer .title,
.footer .navigation-link.for-footer .nav-text { color: #fff; }
.footer .nav-text.second { color: var(--qs-violet); }

/* Tagline under the wordmark */
.footer .text-block-32 { color: rgba(255, 255, 255, 0.62); }

/* =========================================================================
   #work — video case-study cards.
   Replaces the old image-card + chip-row structure. The .grid-18 wrapper stays
   (kept for the existing 3-column responsive behavior on tablet/mobile).
   ========================================================================= */

/* Wipe the prior glass overrides — the new .case-card has its own surface so we
   don't want the white-glass background applied via `#work .card-1, .card-2, .card-3`. */
/* Make #work a flagship showcase: bigger cards in a 2-up grid and a taller
   section. padding-bottom matches the top so the section breathes like the
   other full-height sections instead of butting up against the contact form. */
#work {
  padding-bottom: 160px;
}

#work .case-card-grid {
  margin-top: 80px;
  /* The grid's parent (.div-block-215) is `display:flex; flex-direction:column;
     align-items:center`, so this grid is a flex child that is NOT stretched. With
     no explicit width it shrinks to min-content (≈ the column gaps), which makes
     the `1fr 1fr 1fr` tracks collapse to 0px and every .case-card render 0×0.
     width:100% makes the grid fill its parent so the fr columns size correctly. */
  width: 100%;
  /* 2 columns (overrides .grid-18's 3-up) so each card is ~1.5× wider and, via
     the 16/10 aspect-ratio, ~1.5× taller — roughly double the area of the tiles
     above. Higher specificity (#work id) than .grid-18, so this wins. */
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

/* The cards are now large, so collapse to a single column on phones. */
@media screen and (max-width: 767px) {
  #work .case-card-grid {
    grid-template-columns: 1fr;
  }
}

.case-card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background-color: #1A1A2E;   /* fallback before/if the video paints */
  isolation: isolate;          /* keep transform + overflow well-behaved */
  transition: transform 250ms ease, box-shadow 250ms ease;
  cursor: pointer;
}

.case-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.case-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.case-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.45) 60%,
    rgba(0, 0, 0, 0.7) 100%
  );
  /* Spec asks for a flat 0.4 → 0.2 wash. The linear gradient delivers the
     readability requirement (text always legible at the bottom) while keeping
     the overall darkness within the spec's range. */
  z-index: 1;
  transition: opacity 250ms ease;
}

.case-card:hover .case-card-overlay { opacity: 0.55; }

.case-card-content {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-card-result {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}

.case-card-client {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.case-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.case-card-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* =========================================================================
   #services — premium borderless cards in a drag + auto-scroll carousel.
   The existing 4-col .creative-mind-wrapper grid is repurposed (via CSS) into a
   horizontal flex track inside the .services-carousel viewport (wrapper added in
   index.html). Seamless looping, auto-scroll, and grab-to-drag are wired by the
   inline vanilla script at the end of index.html — no JS library.
   These rules override the glassmorphism cards from css/service-animations.css.
   ========================================================================= */
#services .services-carousel {
  margin-top: 80px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;          /* legacy Edge */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
#services .services-carousel::-webkit-scrollbar { display: none; }
#services .services-carousel.is-dragging { cursor: grabbing; }
#services .services-carousel.is-dragging .card-1 { pointer-events: none; }

/* grid -> horizontal flex track (overrides base + tablet/mobile grid rules) */
#services .creative-mind-wrapper {
  display: flex !important;
  flex-wrap: nowrap;
  width: max-content;
  margin-top: 0;
  gap: 20px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

/* ---- Scorpion-style card: the animation fills the card as the visual; the title,
   description and arrow are pinned to the bottom over a gradient scrim. ---- */
#services .card-1 {
  position: relative;
  isolation: isolate;                /* keep each card's layers in its own stack */
  flex: 0 0 280px;
  width: 280px;
  min-height: 320px;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background-color: var(--card-bg, #14091f);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;         /* title + description pinned to the bottom */
  gap: 8px;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
#services .card-1:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

/* 8 accent backgrounds exposed as --card-bg so the gradient scrim reuses the exact
   card colour. Repeats every 8 (8n+k) so the cloned carousel loop stays consistent. */
#services .creative-mind-wrapper .card-1:nth-child(8n+1) { --card-bg: #1a0a2e; }
#services .creative-mind-wrapper .card-1:nth-child(8n+2) { --card-bg: #0a1628; }
#services .creative-mind-wrapper .card-1:nth-child(8n+3) { --card-bg: #0d1f1a; }
#services .creative-mind-wrapper .card-1:nth-child(8n+4) { --card-bg: #1c1000; }
#services .creative-mind-wrapper .card-1:nth-child(8n+5) { --card-bg: #0a0d1f; }
#services .creative-mind-wrapper .card-1:nth-child(8n+6) { --card-bg: #1a0f00; }
#services .creative-mind-wrapper .card-1:nth-child(8n+7) { --card-bg: #0f1a0a; }
#services .creative-mind-wrapper .card-1:nth-child(8n+8) { --card-bg: #1a0a14; }

/* Animation fills the whole card behind everything. The wrapper keeps z-index:auto
   (no new stacking context) so the arrow inside it can still rise above the scrim. */
#services .div-block-196 {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  overflow: hidden;
}
/* Background video / iframe fills the whole card behind everything (z-index 0). */
#services .card-video,
#services .card-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  z-index: 0;
  pointer-events: none;
}

/* Flat dark overlay so the bottom text always reads over the video. */
#services .card-1::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Title + description sit at the bottom-left, above the scrim. (Both can't occupy
   the exact same bottom:24/left:24 without overlapping, so they ride the card's
   justify-content:flex-end as a bottom-aligned group — same look, no overlap, and
   it adapts to any description length.) */
/* Lift the name + description themselves (not .small-card) above the scrim — keeping
   .small-card static so it doesn't become the containing block for the absolutely
   positioned animation, which must resolve to the card and fill it. */
#services .heading-7,
#services .text-block-31 {
  position: relative;
  z-index: 2;
}
#services .small-card { width: 100%; gap: 4px; }
#services .heading-7 { margin: 0; color: #fff; }
#services .text-block-31 { margin: 0; padding-right: 36px; color: rgba(255, 255, 255, 0.85); }

/* Arrow link pinned bottom-right, above the scrim (still hover-revealed by Webflow). */
#services .div-block-197 {
  inset: auto 24px 24px auto;
  width: auto;
  height: auto;
  padding: 0;
  z-index: 2;
}

/* =========================================================================
   Social proof strip — sits right after #work, before #contact.
   Large bold stats (matching the section-heading scale) + italic client logotypes.
   ========================================================================= */
.social-proof-strip {
  width: 100%;
  background-color: #0A0A0A;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 80px 40px 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* PART 1 — stats row (dividers via border-right, not gap) */
.proof-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.proof-stat {
  padding: 0 60px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.proof-stat:last-child { border-right: none; }
.proof-stat-num {
  display: block;
  /* font-family inherits Inter from body — same as .our-work-heading */
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 500;                 /* matches .our-work-heading's medium weight (was 800) */
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* Frosted / ghosted floating fill: a soft vertical fade of translucent white so the
     numbers read as light display type sitting on the dark bg, not solid white. */
  color: rgba(255, 255, 255, 0.72);   /* fallback for no background-clip support */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.38) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proof-stat-label {
  display: block;
  margin-top: 10px;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

/* PART 2 — logo strip (eyebrow above, no separators) */
.proof-logos-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.proof-eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 24px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}
.proof-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 48px;
}
.proof-logo-item {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.2s ease;
  cursor: default;
}
.proof-logo-item:hover { color: rgba(255, 255, 255, 0.85); }

/* Real logo images (Taormina / Sixth Sense / InsightAI) */
.proof-logo-img {
  height: 28px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.45;
  transition: opacity 0.2s;
}
.proof-logo-img:hover {
  opacity: 0.85;
}
.proof-logo-item:hover .proof-logo-img { opacity: 0.85; }
/* Inline SVG wordmarks: uniform 28px height; fill=currentColor inherits the
   .proof-logo-item color (0.4) + hover (0.85). Keep wordmarks upright. */
.proof-logo-item svg { display: block; height: 28px; width: auto; }
.proof-logo-item svg text { font-style: normal; }

/* Narrow screens: tighten stat padding so the wrapped row stays tidy */
@media screen and (max-width: 600px) {
  .proof-stat { padding: 0 24px; }
}