/* =================================================================
   KQ MARKETS — HERO SLIDER STYLES (scoped to .kqs / .kqs-*)
   Extracted from index_v17.html. Page-chrome rules (body, top-bar,
   trading-bar) intentionally removed so nothing leaks into the site.
   ================================================================= */

    /*
     * MARKET BAR FIX — ensures slider + market bar fit within 100vh
     * so the ticker is always visible on first load without scrolling.
     *
     * --header-h: approximate height of the sticky header
     *   desktop: risk bar (~40px) + top-menu (~32px) + logo/nav (~68px) = ~140px
     *   mobile:  risk bar (~52px) + top-menu (~28px) + logo row (~60px) = ~140px
     * --bar-h: market ticker bar height = 42px
     *
     * Slider max-height = 100vh - header - bar
     * This guarantees the bar is visible on first screen on every device.
     */
    :root {
      --header-h: 140px;
      --bar-h: 96px;  /* trust bar (48px) + market ticker (42px) + small buffer */
      --slider-max: calc(100vh - var(--header-h) - var(--bar-h));
    }
    @media (max-width: 768px) {
      :root {
        --header-h: 148px; /* mobile header slightly taller due to wrapping */
        --bar-h: 100px;    /* trust bar wraps to 2 rows on mobile = slightly taller */
      }
    }


/* ─────────────────────────────────────────────────────────────────
   RESET — scoped tightly so nothing bleeds into your existing site
   ───────────────────────────────────────────────────────────────── */
.kqs *, .kqs *::before, .kqs *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.kqs ul { list-style: none; }
.kqs a  { text-decoration: none; }
.kqs img { display: block; max-width: 100%; }
.kqs button { cursor: pointer; font: inherit; }

/* ─────────────────────────────────────────────────────────────────
   BRAND TOKENS
   ───────────────────────────────────────────────────────────────── */
.kqs {
  --green:       #22a948;
  --green-dk:    #1a8f3c;
  --green-glow:  rgba(34,169,72,0.30);

  --gold:        #e6b818;
  --gold-bright: #f5b800;
  --gold-dk:     #c9920a;

  --white:       #ffffff;
  --w80:         rgba(255,255,255,0.80);
  --w65:         rgba(255,255,255,0.65);
  --w45:         rgba(255,255,255,0.45);
  --w20:         rgba(255,255,255,0.20);
  --w10:         rgba(255,255,255,0.10);

  --dk70:        rgba(0,0,0,0.70);
  --dk55:        rgba(0,0,0,0.55);
  --dk30:        rgba(0,0,0,0.30);
  --dk10:        rgba(0,0,0,0.10);

  --f-display:   'Montserrat', sans-serif;
  --f-body:      'Poppins', sans-serif;

  --ease:        cubic-bezier(0.77,0,0.18,1);
  --spring:      cubic-bezier(0.22,1,0.36,1);
}

/* ─────────────────────────────────────────────────────────────────
   OUTER WRAPPER
   ───────────────────────────────────────────────────────────────── */
.kqs {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  /* KEY FIX: constrain slider so market bar always visible on first screen */
  max-height: var(--slider-max);
}

/* ─────────────────────────────────────────────────────────────────
   TRACK — the moving strip that holds all 3 slides side by side
   ───────────────────────────────────────────────────────────────── */
.kqs-track {
  display: flex;
  width: 300%;
  transition: transform 0.65s var(--ease);
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────
   EACH SLIDE
   ───────────────────────────────────────────────────────────────── */
.kqs-slide {
  position: relative;
  width: calc(100% / 3);
  min-height: 320px;
  /* Enforce same max-height on every slide so all 3 render identically */
  max-height: var(--slider-max);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ── Slide backgrounds ── */
/* Slide 1 — NOW BLUE (was gold) */
.kqs-s1 {
  background:
    radial-gradient(ellipse 55% 70% at 70% 45%,
      rgba(10,80,200,0.40) 0%, transparent 60%),
    linear-gradient(135deg, #06469f 0%, #0550b8 40%, #053e8a 100%);
}
/* KQ watermark on slide 1 (blue) */
.kqs-s1::after {
  content: 'Q';
  position: absolute; right: -1%; bottom: -25%;
  font-family: var(--f-display);
  font-size: clamp(200px,22vw,360px);
  font-weight: 900; line-height: 1;
  color: rgba(255,255,255,0.04);
  pointer-events: none; user-select: none; z-index: 0;
}

/* Slide 2 — NOW GOLD (was blue) */
.kqs-s2 {
  background:
    radial-gradient(ellipse 60% 80% at 65% 30%,
      rgba(255,230,100,0.40) 0%, transparent 58%),
    linear-gradient(110deg, #c9920a 0%, #e6b818 30%, #c08c0c 55%, #8a5c04 100%);
}

/* Slide 3 — unchanged */
.kqs-s3 {
  background: linear-gradient(135deg, #053e8a 0%, #06469f 40%, #04347a 100%);
}
.kqs-s3::before {
  content: 'KQ';
  position: absolute; left: -2%; bottom: -20%;
  font-family: var(--f-display);
  font-size: clamp(150px,18vw,270px);
  font-weight: 900; line-height: 1;
  color: rgba(255,255,255,0.04);
  pointer-events: none; user-select: none; z-index: 0;
}

/* ─────────────────────────────────────────────────────────────────
   SLIDE INNER — two-column flex row
   ───────────────────────────────────────────────────────────────── */
.kqs-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 56px;
  display: flex;
  align-items: center;
  gap: 48px;
}

/* ─────────────────────────────────────────────────────────────────
   LEFT COLUMN — text content
   ───────────────────────────────────────────────────────────────── */
.kqs-content {
  flex: 0 0 55%;
  max-width: 55%;
  display: flex;
  flex-direction: column;
}

/* ── Eyebrow ── */
.kqs-eyebrow {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.40s ease 0.05s, transform 0.40s var(--spring) 0.05s;
}
.kqs-eyebrow::before {
  content: '';
  width: 22px; height: 2px;
  border-radius: 2px;
  flex-shrink: 0;
}
.kqs-s1 .kqs-eyebrow        { color: var(--gold); }
.kqs-s1 .kqs-eyebrow::before { background: var(--gold); }
.kqs-s2 .kqs-eyebrow        { color: var(--dk55); }
.kqs-s2 .kqs-eyebrow::before { background: var(--dk30); }
.kqs-s3 .kqs-eyebrow        { color: var(--gold); }
.kqs-s3 .kqs-eyebrow::before { background: var(--gold); }

/* ── Headline ── */
.kqs-h {
  font-family: var(--f-display);
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.44s ease 0.13s, transform 0.44s var(--spring) 0.13s;
}
.kqs-h .kqs-gold { color: var(--gold-bright); display: block; }

/* ── Body text ── */
.kqs-body {
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 440px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.44s ease 0.21s, transform 0.44s var(--spring) 0.21s;
}
.kqs-s1 .kqs-body { color: var(--w65); }
.kqs-s2 .kqs-body { color: var(--dk70); }
.kqs-s3 .kqs-body { color: var(--w65); }

/* ── CTA row ── */
.kqs-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.44s ease 0.29s, transform 0.44s var(--spring) 0.29s;
}

/* Primary CTA — green */
.kqs-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--green);
  color: var(--white);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
  box-shadow: 0 3px 16px var(--green-glow);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.kqs-btn-primary:hover {
  background: var(--green-dk);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px var(--green-glow);
}

/* Secondary CTA — dark outline (gold slide) */
.kqs-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  background: transparent;
  color: rgba(0,0,0,0.72);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 4px;
  border: 2px solid rgba(0,0,0,0.38);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.kqs-btn-dark:hover {
  border-color: rgba(0,0,0,0.60);
  background: rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

/* Secondary CTA — light outline (dark slides) */
.kqs-btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  background: transparent;
  color: var(--w80);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.38);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.kqs-btn-light:hover {
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
}

/* ── USP strip ── */
.kqs-usps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.44s ease 0.37s, transform 0.44s var(--spring) 0.37s;
}
.kqs-usp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 500;
}
.kqs-usp-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kqs-usp-dot svg {
  width: 9px; height: 9px;
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.kqs-s1 .kqs-usp         { color: var(--w65); }
.kqs-s1 .kqs-usp-dot     { background: var(--w10); }
.kqs-s1 .kqs-usp-dot svg { stroke: rgba(255,255,255,0.55); }
.kqs-s2 .kqs-usp         { color: var(--dk55); }
.kqs-s2 .kqs-usp-dot     { background: var(--dk10); }
.kqs-s2 .kqs-usp-dot svg { stroke: rgba(0,0,0,0.45); }
.kqs-s3 .kqs-usp         { color: var(--w65); }
.kqs-s3 .kqs-usp-dot     { background: var(--w10); }
.kqs-s3 .kqs-usp-dot svg { stroke: rgba(255,255,255,0.55); }

/* Slide 2 now gold — outline CTA needs dark colour */
.kqs-s2 .kqs-btn-light {
  color: rgba(0,0,0,0.72) !important;
  border-color: rgba(0,0,0,0.38) !important;
}
.kqs-s2 .kqs-btn-light:hover {
  border-color: rgba(0,0,0,0.60) !important;
  background: rgba(0,0,0,0.06) !important;
}
/* ── Stats row (slide 2) ── */
.kqs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.44s ease 0.37s, transform 0.44s var(--spring) 0.37s;
}
.kqs-stat {
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid var(--w20);
}
.kqs-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.kqs-stat-num {
  font-family: var(--f-display);
  font-size: clamp(20px,2.1vw,28px);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.kqs-stat-lbl {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--w45);
  margin-top: 3px;
}
/* Slide 2 is now gold — stats need dark colours */
.kqs-s2 .kqs-stat-num { color: rgba(0,0,0,0.82); }
.kqs-s2 .kqs-stat-lbl { color: rgba(0,0,0,0.50); }
.kqs-s2 .kqs-stat { border-right-color: rgba(0,0,0,0.18); }
.kqs-s2 .kqs-stat-ab { color: #1a8f3c; }
/* "ab" prefix in green — shown before the 0,0 stat number */
.kqs-stat-ab {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  color: #22a948;
  margin-right: 3px;
  letter-spacing: 0;
}

/* ── Trust strip (slide 3) ── */
.kqs-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.44s ease 0.45s, transform 0.44s var(--spring) 0.45s;
}
.kqs-trust-item {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--f-body);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--w45);
}
.kqs-trust-item svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
  fill: none; stroke: var(--w45);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ─────────────────────────────────────────────────────────────────
   RIGHT COLUMN — image
   ───────────────────────────────────────────────────────────────── */
.kqs-visual {
  flex: 0 0 45%;
  max-width: 45%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px; /* keep badges inside slide */
  /* Ensures badges never bleed outside the visual column */
  overflow: visible;
  opacity: 0;
  transform: translateX(22px);
  transition: opacity 0.60s ease 0.18s, transform 0.60s var(--spring) 0.18s;
}
.kqs-visual img.kqs-main-img {
  width: 100%;
  max-width: 460px;
  /* Consistent height on desktop — all 3 slides render identically */
  max-height: calc(var(--slider-max) - 40px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 44px rgba(0,0,0,0.38));
  margin-left: auto;
  position: relative;
  z-index: 2;
}
/* New slide 1 image — black bg blends away on gold using multiply */
/* mix-blend removed — slide 1 now blue, no gold bg to blend into */
.kqs-visual img.kqs-bg-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  opacity: 0.9;
  pointer-events: none;
}

/* ── Live price badges — custom HTML, JS-driven ─────────────────── */
.kqs-live-badge {
  position: absolute;
  padding: 9px 13px;
  border-radius: 8px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
  min-width: 115px;
  animation: kqs-float 4.0s ease-in-out infinite;
  cursor: default;
}
.kqs-live-badge:nth-of-type(2) { animation-delay: -1.8s; }
.kqs-live-badge:nth-of-type(3) { animation-delay: -2.8s; }
.kqs-live-badge:nth-of-type(4) { animation-delay: -1.1s; }
.kqs-live-badge-sym {
  font-family: var(--f-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(255,255,255,0.60);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 5px;
}
.kqs-live-badge-sym span.dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #22a948; flex-shrink: 0;
  animation: kqs-pulse 2s ease-in-out infinite;
}
@keyframes kqs-pulse {
  0%,100% { opacity:1; } 50% { opacity:0.3; }
}
.kqs-live-badge-price {
  font-family: var(--f-display);
  font-size: 20px; font-weight: 800;
  color: #ffffff; line-height: 1;
  letter-spacing: -0.02em;
}
.kqs-live-badge-chg {
  font-family: var(--f-body);
  font-size: 10.5px; font-weight: 600;
  margin-top: 4px;
}
.kqs-live-badge-chg.up { color: #22a948; }
.kqs-live-badge-chg.dn { color: #f04e4e; }
@media (max-width:768px) {
  .kqs-live-badge { display: none !important; }
}
  position: absolute;
  padding: 8px 13px;
  border-radius: 7px;
  background: rgba(5,12,28,0.90);
  border: 1px solid rgba(201,168,76,0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
  pointer-events: none;
}
.kqs-badge.gold-pill {
  background: var(--gold-bright);
  border-color: rgba(255,255,255,0.20);
}
.kqs-badge-lbl {
  font-family: var(--f-display);
  font-size: 8px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 2px;
}
.kqs-badge.gold-pill .kqs-badge-lbl { color: rgba(0,0,0,0.55); }
.kqs-badge-val {
  font-family: var(--f-display);
  font-size: 15px; font-weight: 800;
  color: var(--white); line-height: 1;
  letter-spacing: -0.02em;
}
.kqs-badge.gold-pill .kqs-badge-val { color: #000; }
.kqs-badge-chg {
  font-family: var(--f-body);
  font-size: 10px; font-weight: 600; margin-top: 2px;
}
.kqs-badge-chg.up { color: var(--green); }
.kqs-badge-chg.dn { color: #e04545; }
.kqs-badge.gold-pill .kqs-badge-chg.up { color: #145c28; }

@keyframes kqs-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.kqs-badge   { animation: kqs-float 4.0s ease-in-out infinite; }
.kqs-badge:nth-child(2) { animation-delay: -1.8s; }
.kqs-badge:nth-child(3) { animation-delay: -2.8s; }
.kqs-badge:nth-child(4) { animation-delay: -1.1s; }

/* ─────────────────────────────────────────────────────────────────
   ANIMATE IN — triggered when .kqs-slide gets .active
   ───────────────────────────────────────────────────────────────── */
.kqs-slide.active .kqs-eyebrow,
.kqs-slide.active .kqs-h,
.kqs-slide.active .kqs-body,
.kqs-slide.active .kqs-ctas,
.kqs-slide.active .kqs-usps,
.kqs-slide.active .kqs-stats,
.kqs-slide.active .kqs-trust,
.kqs-slide.active .kqs-visual {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────────
   NAVIGATION: PREV / NEXT ARROWS
   ───────────────────────────────────────────────────────────────── */
.kqs-arrow {
  position: absolute;
  top: 50%; left: 16px;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 30;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.kqs-arrow.next { left: auto; right: 16px; }
.kqs-arrow:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.50);
  transform: translateY(-50%) scale(1.06);
}
.kqs-arrow::before {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid rgba(255,255,255,0.85);
  border-top:   2px solid rgba(255,255,255,0.85);
  transform: rotate(225deg) translate(1px,-1px);
  display: block;
}
.kqs-arrow.next::before { transform: rotate(45deg) translate(-1px,1px); }

/* Dark arrows when slide 1 (gold bg) is active */
.kqs[data-slide="0"] .kqs-arrow {
  background: rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.22);
}
.kqs[data-slide="0"] .kqs-arrow::before {
  border-color: rgba(0,0,0,0.55);
}
.kqs[data-slide="0"] .kqs-arrow:hover {
  background: rgba(0,0,0,0.18);
  border-color: rgba(0,0,0,0.45);
  transform: translateY(-50%) scale(1.06);
}

/* ─────────────────────────────────────────────────────────────────
   DOT INDICATORS
   ───────────────────────────────────────────────────────────────── */
.kqs-dots {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 30;
}
.kqs-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  border: none; padding: 0; cursor: pointer;
  transition: background 0.28s, width 0.28s, border-radius 0.28s;
}
.kqs-dot.active {
  background: rgba(255,255,255,0.90);
  width: 22px; border-radius: 4px;
}
.kqs-dot:hover:not(.active) { background: rgba(255,255,255,0.55); }

/* ─────────────────────────────────────────────────────────────────
   PROGRESS BAR
   ───────────────────────────────────────────────────────────────── */
.kqs-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--gold);
  z-index: 30;
  border-radius: 0 2px 2px 0;
}
.kqs-bar.go { animation: kqs-prog 6s linear forwards; }
@keyframes kqs-prog { from{width:0%} to{width:100%} }

/* ─────────────────────────────────────────────────────────────────
   SLIDE COUNTER
   ───────────────────────────────────────────────────────────────── */
.kqs-counter {
  position: absolute;
  top: 14px; right: 54px;
  font-family: var(--f-display);
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.28);
  letter-spacing: 1.5px; z-index: 30;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

/* ── 1280px and below — tighten padding ── */
@media (max-width:1280px) {
  .kqs-inner   { padding: 40px 48px; gap: 36px; }
  .kqs-content { flex: 0 0 52%; max-width: 52%; }
  .kqs-visual  { flex: 0 0 48%; max-width: 48%; }
}

/* ── Tablet landscape — compress columns ── */
@media (max-width:1024px) {
  .kqs-inner   { padding: 36px 40px; gap: 28px; }
  .kqs-content { flex: 0 0 56%; max-width: 56%; }
  .kqs-visual  { flex: 0 0 44%; max-width: 44%; }
  .kqs-main-img { max-width: 360px !important; }
  .kqs-badge   { display: none; }
  .kqs-h       { font-size: clamp(24px,2.6vw,36px); }
}

/* ── Mobile — all phones and tablet portrait (≤768px) ── */
@media (max-width:768px) {

  /* Slide grows with content — no fixed min-height, but keep max-height constraint */
  .kqs-slide   { min-height: auto; align-items: flex-start; max-height: none; }

  /*
   * On mobile, slider height is controlled by content, not viewport calc.
   * We remove the max-height so the stacked layout can breathe,
   * but keep the image height capped so both CTAs are always above fold.
   */
  .kqs         { max-height: none; }

  /* Stack: image on top, text below. Tight padding. */
  .kqs-inner   {
    flex-direction: column;
    padding: 28px 20px 32px;
    gap: 0;
    align-items: center;
  }

  /* Content: full width, centred */
  .kqs-content {
    flex: 0 0 100%; max-width: 100%;
    text-align: center;
    align-items: center;
  }
  .kqs-eyebrow { justify-content: center; }
  .kqs-body    {
    text-align: center; max-width: 100%;
    font-size: 13px;
    margin-bottom: 16px;
  }
  .kqs-ctas    { justify-content: center; flex-direction: column; width: 100%; gap: 10px; }
  .kqs-btn-primary,
  .kqs-btn-dark,
  .kqs-btn-light { width: 100%; justify-content: center; padding: 13px 20px; }
  .kqs-usps    { justify-content: center; }
  .kqs-trust   { justify-content: center; }
  /* Google badge — centre on mobile, not left-aligned */
  a[href*="share.google"] { align-self: center !important; }

  /* Visual: hide completely on mobile — images desktop only */
  .kqs-visual  { display: none !important; }

  /* Full width content since no image column */
  .kqs-content { flex: 0 0 100%; max-width: 100%; }

  .kqs-badge   { display: none; }
  .kqs-h       { font-size: clamp(22px,7vw,32px); margin-bottom: 10px; }

  /* Stats: 2×2 grid — all 4 values visible on all phones */
  .kqs-stats   {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px 0;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  .kqs-stat    {
    padding-right: 0; margin-right: 0;
    border-right: none;
    text-align: center;
  }
  .kqs-stat:nth-child(odd)  { border-right: 1px solid var(--w20); }
  .kqs-stat:nth-child(1),
  .kqs-stat:nth-child(2)    { border-bottom: 1px solid var(--w20); padding-bottom: 10px; }
  .kqs-stat:nth-child(3),
  .kqs-stat:nth-child(4)    { padding-top: 10px; }
  .kqs-stat-num { font-size: 20px; }

  /* Arrows: sit in image zone (top of slide), not over text */
  .kqs-arrow {
    top: 85px;
    transform: none;
    width: 32px; height: 32px;
  }
  .kqs-arrow:hover { transform: scale(1.06); }
  .kqs-arrow       { left: 10px; }
  .kqs-arrow.next  { left: auto; right: 10px; }
  .kqs-counter { display: none; }
}

/* ── Small phones — iPhone SE, Galaxy A, 420px and below ── */
@media (max-width:420px) {
  .kqs-inner        { padding: 12px 16px 20px; gap: 10px; }
  .kqs-h            { font-size: clamp(20px,6.5vw,26px); }
  .kqs-main-img     { max-height: 150px !important; }
  .kqs-btn-primary,
  .kqs-btn-dark,
  .kqs-btn-light    { padding: 12px 16px; font-size: 11.5px; }
}

@media (max-width:768px) {
  /* ── Slide 3 mobile: single column USPs, hide trust strip ── */
  .kqs-s3 .kqs-usps {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  .kqs-s3 .kqs-usp {
    font-size: 12px;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  /* Hide trust strip on mobile — already shown in trust bar below slider */
  .kqs-s3 .kqs-trust {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kqs-track { transition: none; }
  .kqs-eyebrow,.kqs-h,.kqs-body,.kqs-ctas,
  .kqs-usps,.kqs-stats,.kqs-trust,.kqs-visual { transition: opacity 0.01s; }
  .kqs-badge,.kqs-bar { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   TRUST BAR — Google Reviews + Trustpilot
   Sits directly below the hero slider, above the market ticker.
   Adjust --header-h in :root if bar height changes.
   ═══════════════════════════════════════════════════════════════════ */

.kqs-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.07);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* Update --bar-h if you change this bar's height */
  height: 48px;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}

/* Each review pill */
.kqs-trust-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s;
  flex-shrink: 0;
}
.kqs-trust-pill:hover { background: rgba(0,0,0,0.03); }

/* Divider between pills */
.kqs-trust-divider {
  width: 1px;
  height: 24px;
  background: rgba(0,0,0,0.12);
  flex-shrink: 0;
}

/* Platform logo area */
.kqs-trust-logo {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.kqs-trust-logo-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Stars row */
.kqs-trust-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.kqs-trust-stars svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

/* Score + label */
.kqs-trust-info { display: flex; flex-direction: column; justify-content: center; }
.kqs-trust-score {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.1;
  white-space: nowrap;
}
.kqs-trust-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(0,0,0,0.45);
  line-height: 1.1;
  white-space: nowrap;
}

/* Google colours */
.kqs-g-blue  { color: #4285F4; }
.kqs-g-red   { color: #EA4335; }
.kqs-g-yellow{ color: #FBBC05; }
.kqs-g-green { color: #34A853; }

/* Trustpilot green */
.kqs-tp-green { color: #00b67a; }

/* "Coming soon" badge on Trustpilot */
.kqs-coming-soon {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
  background: #00b67a;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* Mobile — stack vertically or single row with smaller text */
@media (max-width: 768px) {
  .kqs-trust-bar  { height: auto; padding: 8px 12px; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; }
  .kqs-trust-pill { padding: 4px 10px; gap: 7px; height: auto; justify-content: center; }
  .kqs-trust-divider { width: 24px; height: 1px; }
  .kqs-trust-logo-text { font-size: 12px; }
  .kqs-trust-score { font-size: 12px; }
  .kqs-trust-label { font-size: 9.5px; }
  .kqs-trust-stars svg { width: 12px; height: 12px; }
}

@media (max-width: 420px) {
  .kqs-trust-bar  { flex-direction: column; gap: 4px; padding: 10px 16px; }
  .kqs-trust-divider { display: none; }
}



/* =================================================================
   THEME-DRIVEN OVERRIDES (CMS) — added for the Laravel CMS so the
   chosen `theme` (blue|gold) drives the look regardless of slide
   position. Placed last so it wins over the position-based .kqs-sN
   rules by source order (equal specificity).
   ================================================================= */

/* ── GOLD theme ── */
.kqs-slide.kqs-theme-gold {
  background:
    radial-gradient(ellipse 60% 80% at 65% 30%,
      rgba(255,230,100,0.40) 0%, transparent 58%),
    linear-gradient(110deg, #c9920a 0%, #e6b818 30%, #c08c0c 55%, #8a5c04 100%);
}
.kqs-theme-gold .kqs-eyebrow         { color: var(--dk55); }
.kqs-theme-gold .kqs-eyebrow::before { background: var(--dk30); }
.kqs-theme-gold .kqs-body            { color: var(--dk70); }
.kqs-theme-gold .kqs-usp             { color: var(--dk55); }
.kqs-theme-gold .kqs-usp-dot         { background: var(--dk10); }
.kqs-theme-gold .kqs-usp-dot svg     { stroke: rgba(0,0,0,0.45); }
.kqs-theme-gold .kqs-btn-light {
  color: rgba(0,0,0,0.72) !important;
  border-color: rgba(0,0,0,0.38) !important;
}
.kqs-theme-gold .kqs-btn-light:hover {
  border-color: rgba(0,0,0,0.60) !important;
  background: rgba(0,0,0,0.06) !important;
}
.kqs-theme-gold .kqs-stat-num { color: rgba(0,0,0,0.82); }
.kqs-theme-gold .kqs-stat-lbl { color: rgba(0,0,0,0.50); }
.kqs-theme-gold .kqs-stat     { border-right-color: rgba(0,0,0,0.18); }
.kqs-theme-gold .kqs-stat-ab  { color: #1a8f3c; }

/* ── BLUE theme ── (restores the blue look if a blue slide sits in the gold position) */
.kqs-slide.kqs-theme-blue {
  background:
    radial-gradient(ellipse 55% 70% at 70% 45%,
      rgba(10,80,200,0.40) 0%, transparent 60%),
    linear-gradient(135deg, #06469f 0%, #0550b8 40%, #053e8a 100%);
}
.kqs-theme-blue .kqs-eyebrow         { color: var(--gold); }
.kqs-theme-blue .kqs-eyebrow::before { background: var(--gold); }
.kqs-theme-blue .kqs-body            { color: var(--w65); }
.kqs-theme-blue .kqs-usp             { color: var(--w65); }
.kqs-theme-blue .kqs-usp-dot         { background: var(--w10); }
.kqs-theme-blue .kqs-usp-dot svg     { stroke: rgba(255,255,255,0.55); }
.kqs-theme-blue .kqs-stat-num        { color: var(--white); }
.kqs-theme-blue .kqs-stat-lbl        { color: var(--w45); }

/* =================================================================
   IN-SLIDE GOOGLE REVIEW BADGE
   The original prototype styled this with inline styles; the Blade
   template uses .kqs-google-badge/-stars/-score classes, so the
   matching CSS is reproduced here (white rounded pill).
   ================================================================= */
.kqs-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 10px;
  background: #ffffff;
  border-radius: 20px;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: box-shadow 0.15s ease;
  width: fit-content;
  align-self: flex-start;
}
.kqs-google-badge:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.kqs-google-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.kqs-google-score {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}
/* Centre the badge on mobile (matches prototype) */
@media (max-width: 768px) {
  .kqs-google-badge { align-self: center; }
}