/* ================================================================
   DELLTONA — Responsive Layout System v2.0
   Authoritative: overrides all legacy/morphism/mobile-fix rules.
   Breakpoints:
     xs:  < 480px   (small phones)
     sm:  480–767px (large phones)
     md:  768–1023px (tablets / iPads)
     lg:  1024–1279px (small desktops / iPad Pro)
     xl:  1280px+   (full desktop)
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════
   1. GLOBAL BOX MODEL RESET — prevent ANY horizontal overflow
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box !important;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}

img, video, iframe, svg {
  max-width: 100% !important;
  height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. CONTAINER — fluid with clamped max-width
   ═══════════════════════════════════════════════════════════════ */
.container {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. TYPOGRAPHY SCALE — clamp() for all viewport widths
   ═══════════════════════════════════════════════════════════════ */
h1, .hero-title {
  font-size: clamp(1.75rem, 5vw, 4rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

h2 {
  font-size: clamp(1.4rem, 4vw, 2.6rem) !important;
  line-height: 1.25 !important;
}

h3 {
  font-size: clamp(1.1rem, 3vw, 1.6rem) !important;
  line-height: 1.35 !important;
}

h4 {
  font-size: clamp(0.95rem, 2.5vw, 1.2rem) !important;
}

p, li, .card-text, .hero-text, .section-lead {
  font-size: clamp(0.875rem, 2.2vw, 1.05rem) !important;
  line-height: 1.7 !important;
}

.hero-text {
  max-width: 600px !important;
  margin-bottom: 1.5rem !important;
}

.hero-tag, .section-eyebrow, .eyebrow, .badge, .tag {
  font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
  padding: 5px 14px !important;
  letter-spacing: 0.08em !important;
}

.card-title, .service-title {
  font-size: clamp(1rem, 2.5vw, 1.3rem) !important;
  line-height: 1.35 !important;
  margin-bottom: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. HERO SECTION — all devices
   ═══════════════════════════════════════════════════════════════ */

/* Desktop: clean, left-aligned, stacked hero (no awkward 2x2 grid) */
@media (min-width: 1024px) {
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    max-width: 850px !important;
    text-align: left !important;
  }

  /* Reset all weird grid placements from old CSS */
  .hero-tag, .hero-title, .hero-text, .hero-cta, .hero-content > .btn {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    order: 0 !important;
    margin: 0 !important;
  }

  .hero-text {
    max-width: 650px !important;
  }

  .hero-cta {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
  }
}

/* Tablet + Mobile: single-column, centered */
@media (max-width: 1023px) {
  .hero {
    min-height: 80vh !important;
    padding-top: calc(var(--header-height, 70px) + 2rem) !important;
    padding-bottom: 3rem !important;
    align-items: center !important;
  }

  .hero > .container {
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.25rem !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .hero-tag, .hero-title, .hero-text, .hero-cta {
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
  }

  .hero-title {
    max-width: 100% !important;
    text-align: center !important;
  }

  .hero-text {
    text-align: center !important;
    max-width: 580px !important;
  }

  .hero-cta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .hero-cta .btn, .hero-cta a.btn {
    flex: 1 1 auto !important;
    min-width: 160px !important;
    max-width: 240px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* Small mobile: stack CTA buttons fully */
@media (max-width: 480px) {
  .hero {
    min-height: 75vh !important;
  }

  .hero-cta {
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-cta .btn, .hero-cta a.btn {
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. SECTION SPACING
   ═══════════════════════════════════════════════════════════════ */
section, .section,
.section-dark, .section-light,
.theme-dark.section, .theme-light.section {
  padding-top: clamp(2.5rem, 6vw, 5rem) !important;
  padding-bottom: clamp(2.5rem, 6vw, 5rem) !important;
  overflow-x: hidden !important;
}

.section-intro, .section-intro--center {
  margin-bottom: clamp(1.5rem, 4vw, 3rem) !important;
}

.section-intro--center {
  text-align: center !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. GRID SYSTEM — true responsive at all breakpoints
   ═══════════════════════════════════════════════════════════════ */

/* Base: mobile first single column */
.grid, .grid-2, .grid-3, .grid-4,
.cards-grid, .services-grid, .features-grid,
.stats-grid, .portfolio-grid, .work-grid,
.testimonials-grid, .pricing-grid, .expertise-grid,
.service-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
  width: 100% !important;
}

/* sm — 480px: 2 columns for grid-2, grid-3, grid-4 */
@media (min-width: 480px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  .grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

/* md — 768px: tablets / iPads */
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .grid, .service-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1.5rem !important;
  }
}

/* lg — 1024px: full desktop layout */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }

  .grid-4 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }

  .service-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
  }
}

@media (min-width: 1280px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   7. CARDS — uniform across all devices
   ═══════════════════════════════════════════════════════════════ */
.card, .service-card, .qa-premium-card,
.page-summary-card, .content-card,
.blog-card, .insight-card, .team-card,
.process-card, .result-card, .stat-card,
.pricing-card, .faq-item, .faq-card,
.testimonial-card, .review-card,
.portfolio-card, .case-study-card,
.work-card, .expertise-card, .creative-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(1.1rem, 3vw, 1.75rem) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Card images: fixed aspect ratio, never overflow */
.card-image, .card .card-image {
  width: 100% !important;
  height: clamp(160px, 25vw, 220px) !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  margin-bottom: 1rem !important;
}

.card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Disable hover transforms on touch devices */
@media (hover: none) {
  .card:hover, .service-card:hover,
  .qa-premium-card:hover, .blog-card:hover,
  .portfolio-card:hover, .work-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   8. TRUST STRIP (stats bar under hero)
   ═══════════════════════════════════════════════════════════════ */
.trust-strip {
  display: grid !important;
  width: 100% !important;
  padding: 1.5rem clamp(1rem, 4vw, 2rem) !important;
  gap: 1rem !important;
}

/* xs: 2 columns */
@media (max-width: 479px) {
  .trust-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* sm–md: 4 columns in a row */
@media (min-width: 480px) {
  .trust-strip {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
  }
}

.trust-strip-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 1rem 0.5rem !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

.trust-strip-item:last-child {
  border-right: none !important;
}

.trust-strip-item strong {
  font-size: clamp(1.2rem, 3.5vw, 1.8rem) !important;
  font-weight: 800 !important;
  display: block !important;
}

.trust-strip-item span {
  font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
  opacity: 0.7 !important;
  margin-top: 0.2rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. MEDIA BLOCKS (text + image split layouts)
   ═══════════════════════════════════════════════════════════════ */
.media-block {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  align-items: center !important;
}

@media (min-width: 768px) {
  .media-block, .media-block.reversed {
    grid-template-columns: 1fr 1fr !important;
    direction: ltr !important;
  }

  .media-block.reversed .media-image {
    order: 2 !important;
  }
  .media-block.reversed .media-content {
    order: 1 !important;
  }
}

.media-image {
  width: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  min-height: 220px !important;
}

.media-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. BUTTONS — gap, sizing, touch targets
   ═══════════════════════════════════════════════════════════════ */
.btn, a.btn, button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: clamp(0.65rem, 2vw, 0.85rem) clamp(1rem, 3vw, 1.75rem) !important;
  font-size: clamp(0.8rem, 2vw, 0.95rem) !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

/* Button containers */
.btn-group, .cta-buttons, .button-group, .action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  align-items: center !important;
}

/* Remove all residual margin collisions */
.btn + .btn, a.btn + a.btn {
  margin-top: 0 !important;
  margin-left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   11. FOOTER GRID
   ═══════════════════════════════════════════════════════════════ */
.footer-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
}

@media (min-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 3rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   12. FAQ LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.faq-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
}

@media (max-width: 767px) {
  .faq-intro {
    position: relative !important;
    top: auto !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }
  .faq-intro h2 {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .faq-layout {
    grid-template-columns: 1fr 2fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   13. PAGE SUMMARY CARD — prevents overflow
   ═══════════════════════════════════════════════════════════════ */
.qa-premium-card.page-summary-card {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(1.25rem, 4vw, 2.5rem) !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. TRUSTPILOT WIDGET — responsive positioning
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .tp-trigger {
    bottom: 16px !important;
    left: 16px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .tp-card {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    bottom: 80px !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   15. CONTACT FLOATING ICONS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #contact-icons {
    bottom: 10px !important;
    right: 10px !important;
    gap: 8px !important;
  }

  #contact-icons .circle-icon,
  #contact-icons .icon-wrap {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  #contact-icons .label {
    font-size: 12px !important;
    margin-right: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   16. PERFORMANCE: reduce blur on mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .card, .service-card, .qa-premium-card,
  .content-card, .blog-card, .pricing-card,
  .work-card, .tp-card {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   17. TABLE OVERFLOW
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   18. TABLET (iPads) — 768px–1023px specific tweaks
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* 2-col hero on tablet */
  .hero {
    min-height: 70vh !important;
  }

  /* Pricing cards: 2-col on tablet, not 3 */
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Section intro narrower */
  .section-intro--center {
    max-width: 600px !important;
  }
}