/* ============================================
   Cape Global — Responsive Styles
   responsive.css — Mobile-first
   ============================================ */

/* ============================================
   Base: Mobile (up to 599px)
   ============================================ */
@media (max-width: 599px) {

  :root {
    --section-pad: 64px;
  }

  /* Hero heading — hard cap on mobile */
  h1, .hero__title { font-size: 1.75rem; line-height: 1.2; }

  .container {
    padding: 0 16px;
  }

  /* Nav */
  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__mobile {
    display: flex;
  }

  /* Hero */
  .hero__content {
    padding: 110px 0 60px;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* Trust Bar — horizontal scroll on mobile */
  .trust-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .trust-bar::-webkit-scrollbar { display: none; }

  .trust-bar__items {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 8px;
    width: max-content;
    animation: none;
  }

  .trust-bar__item {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Grids → Stack */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-item {
    padding: 28px 16px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .stat-item:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.06);
  }

  .stat-item:nth-child(3),
  .stat-item:nth-child(4) {
    border-bottom: none;
  }

  .trust-pillars {
    grid-template-columns: 1fr;
  }

  /* Services */
  /* Pricing */
  .pricing-card--featured {
    transform: none;
    order: -1;
  }

  .shared-features {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Testimonials — scroll snap */
  .testimonials-track {
    grid-template-columns: 85vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    scrollbar-width: none;
  }

  .testimonials-track::-webkit-scrollbar { display: none; }

  .testimonial-card {
    scroll-snap-align: start;
  }

  /* About */
  .grid-2.about-grid {
    grid-template-columns: 1fr;
  }

  .tech-visual {
    grid-template-columns: repeat(3, 1fr);
    padding: 24px;
  }

  /* Contact */
  .contact-form-wrap {
    padding: 28px 20px;
  }

  /* Footer — single column + centred on mobile */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .footer__brand {
    margin-bottom: 0;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* WhatsApp float — move up so it doesn't cover submit buttons */
  .whatsapp-float__text {
    display: none;
  }

  .whatsapp-float {
    padding: 14px;
    border-radius: 50%;
    bottom: 80px;
    right: 16px;
  }

  /* HR page */
  .hr-services-grid {
    grid-template-columns: 1fr;
  }

  .features-check-grid {
    grid-template-columns: 1fr;
  }

  /* About page */
  .values-grid {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    left: 24px;
  }

  .timeline-item {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto;
  }

  .timeline-dot {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 8px;
  }

  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .credentials-grid {
    flex-direction: column;
    align-items: stretch;
  }

  /* Software logos — horizontal scroll on mobile */
  .trust-logos__row {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .trust-logos__row::-webkit-scrollbar { display: none; }

  .software-logo {
    flex-shrink: 0;
  }

  /* Page hero */
  .page-hero {
    padding: 120px 0 72px;
  }

  .section-header {
    margin-bottom: 40px;
  }

  /* CTA section */
  .cta-section .btn-group {
    flex-direction: column;
    align-items: center;
  }

  /* Legal pages */
  .legal-page {
    padding: 100px 0 60px;
  }

  /* Legal grid — TOC stacks above body */
  .legal-content {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .legal-toc {
    position: static;
  }
}

/* ============================================
   Tablet: 600px – 899px
   ============================================ */
@media (min-width: 600px) and (max-width: 899px) {

  :root {
    --section-pad: 80px;
  }

  /* Nav */
  .nav__links {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__mobile {
    display: flex;
  }

  /* Hero */
  .hero__content {
    padding: 120px 0 70px;
  }

  /* Grids */
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .stat-item:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.06);
  }

  .stat-item:nth-child(3),
  .stat-item:nth-child(4) {
    border-bottom: none;
  }

  .trust-pillars {
    grid-template-columns: 1fr 1fr;
  }

  /* Pricing */
  .pricing-card--featured {
    transform: none;
    grid-column: 1 / -1;
    max-width: 480px;
    margin: 0 auto;
  }

  /* Testimonials */
  .testimonials-track {
    grid-template-columns: 1fr 1fr;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .testimonials-track::-webkit-scrollbar { display: none; }

  .testimonial-card {
    scroll-snap-align: start;
  }

  /* HR */
  .hr-services-grid {
    grid-template-columns: 1fr 1fr;
  }

  .features-check-grid {
    grid-template-columns: 1fr;
  }

  /* About */
  .values-grid {
    grid-template-columns: 1fr 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  .timeline::before {
    left: 24px;
  }

  .timeline-item {
    grid-template-columns: 48px 1fr;
  }

  .timeline-dot {
    grid-column: 1;
    justify-content: flex-start;
    padding-top: 8px;
  }

  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    grid-column: 2;
    text-align: left;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  /* WhatsApp */
  .whatsapp-float__text {
    display: none;
  }

  .whatsapp-float {
    padding: 14px;
    border-radius: 50%;
  }
}

/* ============================================
   Large Tablet / Small Desktop: 900px – 1099px
   ============================================ */
@media (min-width: 900px) and (max-width: 1099px) {

  .grid-3 {
    gap: 20px;
  }

  /* Hamburger active at this breakpoint too */
  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__mobile {
    display: flex;
  }

  .nav__links a {
    padding: 8px 10px;
    font-size: 0.85rem;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 32px;
  }

  /* Pricing — prevent featured card overflow */
  .pricing-card--featured {
    transform: scale(1.01);
  }
}

/* ============================================
   Desktop: 1100px+
   ============================================ */
@media (min-width: 1100px) {

  .nav__hamburger {
    display: none;
  }

  .nav__mobile {
    display: none !important;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .trust-pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   Wide screens: 1400px+
   ============================================ */
@media (min-width: 1400px) {
  :root {
    --container-max: 1300px;
    --section-pad: 120px;
  }

  h1 { font-size: 4.4rem; }
  h2 { font-size: 3rem; }
}

/* ============================================
   Accessibility / Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__badge,
  .hero__title,
  .hero__sub,
  .hero__ctas,
  .hero__scroll {
    animation: none;
    opacity: 1;
  }

  .tech-item {
    animation: none;
  }

  .whatsapp-float::before {
    animation: none;
  }

  .trust-bar__items {
    animation: none;
  }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .nav,
  .hero__canvas,
  .whatsapp-float,
  .scroll-progress,
  .nav__mobile {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}