/* Responsive enhancements (mobile-first + tablet) */

/* Safety: prevent horizontal scroll on all breakpoints */
body { overflow-x: hidden; }

/* --------------------------------------------------
   STEP 1: Reset section height logic (global)
   -------------------------------------------------- */
section,
.section {
  height:auto;
  min-height: unset;
} 

/* --------------------------------------------------
   Global type scaling (only on mobile/tablet to keep desktop unchanged)
   -------------------------------------------------- */
@media (max-width: 1024px) {
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-size: clamp(15px, 2.8vw, 18px);
    line-height: 1.65;
  }
  h1 { font-size: clamp(28px, 5vw, 52px); }
  h2 { font-size: clamp(22px, 4vw, 40px); }
  h3 { font-size: clamp(18px, 3.4vw, 28px); }

  /* Mobile/Tablet navigation: hamburger visible + dropdown menu (desktop unchanged >1024px) */
  .nav__inner { position: relative; }
  .nav__toggle {
    display: inline-flex;
    z-index: 10060;
    -webkit-tap-highlight-color: transparent;
  }

  .nav__menu {
    position: absolute;
    top: 64px;
    right: 16px;
    left: 16px;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(18, 18, 25, 0.08);
    box-shadow: var(--shadow-soft);
    z-index: 10059;

    /* hidden by default */
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .nav__checkbox:checked ~ .nav__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Back-to-top button: ensure it remains visible above content on mobile/tablet */
  .backtotop {
    display: grid;
    right: 16px;
    bottom: 16px;
    z-index: 10080;
  }
}

/* --------------------------------------------------
   Section spacing scale
   -------------------------------------------------- */
@media (max-width: 767px) {
  :root { --section-pad: 48px; }
  /* Minimum tap target sizing */
  .btn { min-height: 44px; }
  /* Prevent long words/URLs from breaking layout */
  .section__title, .final-cta__title, .testimonial__title, .cases__title { overflow-wrap: anywhere; }
  /* 2) Normalize spacing with clamp */
  .section { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }
  /* 4) Neutralize reveal transforms that can create gaps if not triggered */
  .reveal-left, .reveal-right, .reveal-top { opacity: 1 !important; transform: none !important; }
  /* Comfortable header spacing */
  .section__header { margin-bottom: clamp(12px, 3vw, 18px); }
  .section__subtitle { margin-top: 6px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --section-pad: 64px; }
  /* Normalize spacing on tablet (avoid desktop-large gaps) */
  .section { padding-top: clamp(48px, 4.6vw, 80px); padding-bottom: clamp(48px, 4.6vw, 80px); }
  .section__header { margin-bottom: clamp(14px, 2.6vw, 20px); }
}

/* --------------------------------------------------
   Containers and grids
   -------------------------------------------------- */
@media (max-width: 767px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; gap: 28px; }
  .cases-grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .container { width: min(var(--container), 94%); }
}

/* --------------------------------------------------
   Header / Navigation
   -------------------------------------------------- */
@media (max-width: 767px) {
  .brand__logo { height: 44px; }
  .nav__toggle { display: inline-flex; }
  .nav__menu { right: 16px; left: 16px; top: 64px; }
}

/* --------------------------------------------------
   Hero
   -------------------------------------------------- */
@media (max-width: 767px) {
  /* Remove full-screen hero on mobile */
  .hero { min-height: auto !important; height: auto !important; padding: 32px 0 24px; }
  .hero__title { font-size: clamp(28px, 7.5vw, 44px); line-height: 1.15; }
  .hero__subtitle { margin: 8px 0 16px; font-size: clamp(18px, 4.6vw, 22px); }
  .hero__inner { padding: 24px 0; }
  .hero .btn--primary {
    width: 100%;
    height: 56px;
    font-size: clamp(16px, 4.4vw, 18px);
    border-radius: 12px;
  }
  /* Tighten logo strip spacing */
  .logo-strip { margin-bottom: 24px; }
  .logo-strip { border-bottom-width: 16px; }
  .logo-strip__img { height: 64px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet hero: comfortable, not desktop-scale */
  .hero { min-height: auto !important; height: auto !important; padding: 56px 0; }
  .hero__subtitle { margin: 8px 0 36px; }
  .hero .btn--primary { width: 60%; height: 64px; font-size: clamp(18px, 2.6vw, 22px); }
  /* Slightly reduce logo strip spacing on tablet */
  .logo-strip { margin-bottom: 36px; }
  .logo-strip { border-bottom-width: 24px; }
}

/* Restore desktop hero full-height design */
@media (min-width: 1025px) {
  .hero { min-height: 100vh; }
}

/* --------------------------------------------------
   Afterbrand marquee cards
   -------------------------------------------------- */
@media (max-width: 767px) {
  .afterbrand-card { flex: 0 0 80%; }
}

/* --------------------------------------------------
   Feature section
   -------------------------------------------------- */
@media (max-width: 767px) {
  .section__header--left { text-align: left; }
  .feature__content { text-align: left; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .feature { align-items: center; }
}

/* --------------------------------------------------
   Services (Stand Out. Be Heard.)
   -------------------------------------------------- */
@media (max-width: 767px) {
  .services__pair { display: none; }
  .service__title { font-size: clamp(22px, 6vw, 32px); }
  .service__icon { width: clamp(64px, 22vw, 110px); }
  /* 4) Stack content properly */
  .final-cta, .cta { flex-direction: column !important; align-items: flex-start; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .service__title { font-size: clamp(28px, 4.2vw, 40px); }
  /* Keep decorative pair from overlaying copy */
  .services__pair { position: static; transform: none; display: block; width: clamp(100px, 20vw, 140px); margin: 8px 0 0; }
  .services__header { margin-bottom: 18px; }
}

/* --------------------------------------------------
   Testimonials
   -------------------------------------------------- */
@media (max-width: 767px) {
  .testimonial__title { font-size: clamp(28px, 7vw, 40px); }
  .testimonial__pair { display: none; }
  .testimonial-card {
    margin-top: 24px;
    display: block;
    overflow: visible;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.12), rgba(227, 58, 146, 0.12));
    border: 1px solid rgba(18, 18, 25, 0.06);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    padding: 20px 18px; /* mobile-safe inner spacing */
  }
  .testimonial-card__text { font-size: clamp(15px, 4.2vw, 18px); margin: 8px 0 12px; }
  /* Reflow slider to static list to avoid overlap and ensure height */
  .testimonial-slider { min-height: auto; margin-top: 24px; }
  .testimonial-slide { position: relative; opacity: 1; transform: none; animation: none; }
  /* Remove separate BG image; let container own the background */
  .testimonial-card__bg { display: none; }
  .testimonial-card__content {
    position: static;
    inset: auto;
    display: block;
    padding: 0;
    color: inherit;
    text-align: left;
  }
  .testimonial-card__quote { position: static; width: clamp(24px, 6vw, 32px); height: auto; margin-bottom: 8px; }
  /* Separate from next section */
  .section--testimonial { margin-bottom: 24px; }
  .section--cases { padding-top: clamp(32px, 5vw, 48px); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .testimonial__title { font-size: clamp(36px, 5vw, 54px); }
  /* Avoid overlap: place decorative pair inline under title on tablet */
  .testimonial__pair { position: static; transform: none; display: inline; width: clamp(120px, 18vw, 180px); }
  .testimonial-slider { margin-top: 40px; min-height: auto; }
  .testimonial-card { margin-top: 32px; }
}

/* --------------------------------------------------
   Cases
   -------------------------------------------------- */
@media (max-width: 767px) {
  .cases__title { font-size: clamp(26px, 6vw, 36px); }
  .case__footer--overlay { position: static !important; left: auto; right: auto; bottom: auto; margin-top: 8px; }
  .case__round { width: 64px; height: 38px; font-size: 18px; }
  /* Content-driven case cards */
  .case { display: block; overflow: visible; }
  .case__link { display: block; }
  .case__img { width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; }
  .case__footer { padding: 12px 0; }
  .case--wide { grid-column: auto; }
  /* Prevent clipping on sections that used overflow: hidden on desktop */
  .section--cases, .section--stats { overflow: visible; }

  .cases-hero__header { margin-left: 0 !important; }
  .cases-bridge .case__footer--overlay {
    position: static !important;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 8px 0 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cases-hero__header { margin-left: 0 !important; }
  .cases-bridge .case__footer--overlay {
    left: 18px;
    right: 18px;
    bottom: 8px;
  }
}

/* --------------------------------------------------
   CTA (final)
   -------------------------------------------------- */
@media (max-width: 767px) {
  .final-cta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .final-cta__title { font-size: clamp(32px, 9vw, 44px); }
  .section--final-cta .btn { width: 100%; min-height: 52px; }
  .cases__cta .btn { width: 100%; }
  /* Reduce excessive final CTA section padding on mobile */
  .section--final-cta { padding: 40px 0 !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .final-cta__title { font-size: clamp(44px, 6vw, 60px); }
  .final-cta { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --------------------------------------------------
   Footer
   -------------------------------------------------- */
@media (max-width: 767px) {
  .newsletter { flex-direction: column; align-items: stretch; }
  .newsletter .btn { width: 100%; min-height: 48px; }
}

/* --------------------------------------------------
   Misc. safety
   -------------------------------------------------- */
@media (max-width: 767px) {
  /* Avoid horizontal scroll due to absolute elements */
  .stats-bg__img { display: none; }
  .testimonial-slider { min-height: auto; }
}

/* --------------------------------------------------
   Additional responsive enhancements (append-only)
   -------------------------------------------------- */

/* Footer stacking and spacing on small screens */
@media (max-width: 767px) {
  /* Keep logo left and copyright on the same row; place Back to Top under copyright */
  .footer__bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
  .footer { grid-template-columns: 1fr; }
  .brand__logo--footer { height: 56px; }
  .footer__group-right { flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
  .backtotop { display: inline-flex; padding: 8px 12px; white-space: nowrap; gap: 6px; align-items: center; }
  .backtotop__text { font-size: 14px; }
  .backtotop__arrow { margin-left: 4px; line-height: 1; }
  .footer__bar .footer__copy { font-size: 0.85rem; }
}

/* Grids: blog and non-negotiables */
@media (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .nonneg__grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* Feature section: prevent media overflow on small screens */
@media (max-width: 767px) {
  .feature__img { width: 100% !important; height: auto !important; max-width: 100% !important; }
  .feature__media { margin: 20px 0 32px 0; padding-bottom: 24px; }
  .feature__content { max-width: 100%; margin: 24px 0 0 0; padding: 0; }
}

/* Blog page */
@media (max-width: 767px) {
  .blog-card__img { aspect-ratio: 16 / 11; height: auto; }
  .blog-card__meta { font-size: 0.95rem; }
  .blog-more .btn { width: 100%; min-height: 48px; }
}

/* Cases hero/title sizing */
@media (max-width: 767px) {
  .cases-hero { min-height: auto; padding: calc(var(--header-h, 88px) + 16px) 0 24px; }
  .cases-hero__title { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.15; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .cases-hero { min-height: 420px; padding: calc(var(--header-h, 88px) + 24px) 0 40px; }
  .cases-hero__title { font-size: clamp(36px, 5.6vw, 60px) !important; }
}

/* About page: type and spacing on small screens */
@media (max-width: 767px) {
  .about-hero__title { font-size: clamp(32px, 9vw, 48px); }
  .about-why__title { font-size: clamp(28px, 8vw, 40px); }
  .about-why__col p,
  .about-why__boldlist p { font-size: clamp(16px, 4.6vw, 18px); }
  .about-cards { padding: 48px 0; }
  .about-cards__grid { gap: 24px; }
  .about-team__list { gap: 32px; }
  .t-card { grid-template-columns: 1fr; text-align: left; }
  .t-card img { width: 120px; height: 120px; margin: 0; }
  .nonneg__intro { margin: 0 16px; font-size: clamp(14px, 4.2vw, 18px); }
  .partners-section { padding: 80px 0 320px; min-height: auto; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .about-cards { padding: 96px 0; }
}