/* ═══════════════════════════════════════════════════════════════════
   DOLIA THEME — Responsive CSS
   Breakpoints: 1200px, 1024px, 768px, 480px
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1200px — Large tablets & small desktops ── */
@media (max-width: 1200px) {
  .hero-content { padding: 100px 40px 60px; }
  #stats { padding: 70px 40px; }
  #video { padding: 70px 40px; }
  #services { padding: 70px 40px; }
  .clients-inner { padding: 0 40px; }
  #awards { padding: 70px 40px; }
  #gallery { padding: 70px 40px; }
  #reviews { padding: 70px 40px; }
  #faq { padding: 70px 40px; }
  #cta { padding: 80px 40px; }
  .order-form-inner { padding: 60px 40px; }
  .order-form-deco { height: 140%; }
  .foot { padding: 40px; }
  .container { padding: 0 40px; }
  .container--narrow { padding: 0 40px; }

  .svc-g { grid-template-columns: repeat(4, 1fr); }
  .orbit-wrap { width: 480px; height: 500px; }
  .orbit-outer { width: 500px; height: 500px; }
  .orbit-mid { width: 450px; height: 450px; }
  .orbit-ring { width: 400px; height: 400px; }
  .photo-card { width: 260px; height: 340px; }
}

/* ── 1024px — Tablets landscape ── */
@media (max-width: 1024px) {
  nav { padding: 0 32px; }

  /* Hero: stack columns */
  .hero-content { grid-template-columns: 1fr; text-align: center; padding: 100px 40px 60px; }
  .hero-left { display: flex; flex-direction: column; align-items: center; }
  .hero-right { justify-content: center; margin-top: 40px; }
  .eyebrow { align-self: center; }
  .hero-desc { max-width: 540px; }
  .hero-actions { justify-content: center; }

  .orbit-wrap { width: 380px; height: 400px; }
  .orbit-outer { width: 420px; height: 420px; }
  .orbit-mid { width: 375px; height: 375px; }
  .orbit-ring { width: 320px; height: 320px; }
  .photo-card { width: 240px; height: 310px; }

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

  /* Video */
  .video-layout { grid-template-columns: 1fr; gap: 40px; }

  /* Services */
  .svc-g { grid-template-columns: repeat(2, 1fr); }

  /* Awards */
  .awards-l { grid-template-columns: 1fr; gap: 40px; }
  .award-visual { margin-top: 20px; }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .post-cta { flex-direction: column; text-align: center; }
}

/* ── 768px — Tablets portrait & mobile ── */
@media (max-width: 768px) {
  nav { padding: 0 20px; height: 60px; }

  /* Show burger */
  .burger { display: flex; }

  /* Mobile nav */
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    inset: 0;
    top: 60px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px 24px;
    gap: 20px;
    z-index: 99;
    align-items: flex-start;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 15px; }
  .nav-cta { align-self: stretch; text-align: center; padding: 14px 20px; }

  /* Hero */
  .hero-content { padding: 80px 24px 40px; gap: 20px; }
  .hero-title { font-size: clamp(32px, 10vw, 52px); letter-spacing: -1px; }
  .hero-desc { font-size: 14px; }

  .orbit-wrap { width: 300px; height: 340px; }
  .orbit-outer { width: 340px; height: 340px; }
  .orbit-mid { width: 295px; height: 295px; }
  .orbit-ring { width: 250px; height: 250px; }
  .photo-card { width: 200px; height: 260px; }

  /* Hide 3 of 6 badges on mobile */
  .s-badge:nth-child(7),
  .s-badge:nth-child(8),
  .s-badge:nth-child(9) { display: none; }
  .s-badge:nth-child(5) { left: -5px; }
  .s-badge:nth-child(4) { right: -5px; }

  /* Sections */
  #stats { padding: 60px 24px; }
  .stats-g { grid-template-columns: repeat(2, 1fr); }

  #video { padding: 60px 24px; }
  .video-layout { grid-template-columns: 1fr; gap: 32px; }

  #order-form .order-form-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px; }
  .order-form-grid { grid-template-columns: 1fr; }
  .order-form-full { grid-column: span 1; }
  .order-form-deco { height: 110%; }
  .order-bg-text { font-size: 80px; opacity: 0.03; }
  .inline-form-msg { grid-column: span 1; }

  #services { padding: 60px 24px; }
  .svc-g { grid-template-columns: 1fr 1fr; gap: 2px; }

  #clients { padding: 60px 0; }
  .clients-inner { padding: 0 24px; }
  .partner-item { min-width: 100px; padding: 12px 14px; }
  .partner-logo { height: 36px; }

  #awards { padding: 60px 24px; }
  .awards-l { grid-template-columns: 1fr; gap: 32px; }
  .award-visual { margin-top: 20px; }

  #gallery { padding: 60px 24px; }
  .gal-g { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .gi.wide { grid-column: span 1; }
  .gi.tall { grid-row: span 1; }
  .gal-g .gi { height: 180px; }

  #reviews { padding: 60px 24px; }
  .rv { flex: 0 0 calc(100% - 10px); }

  #faq { padding: 60px 24px; }
  .faq-i { max-width: 100%; }

  #cta { padding: 60px 24px; }
  .cta-btns { flex-direction: column; align-items: center; }
  .btn-tg, .btn-call, .btn-gold { width: 100%; justify-content: center; text-align: center; max-width: 320px; }

  .foot { flex-direction: column; gap: 20px; padding: 32px 24px; text-align: center; }
  .flinks { flex-wrap: wrap; justify-content: center; }

  .mic-fab { bottom: 20px; right: 20px; width: 54px; height: 54px; }
  .mic-wrap { width: 54px; height: 54px; }
  .mic-tooltip { display: none; }

  .modal-box { padding: 32px 24px; }

  .container { padding: 0 24px; }
  .container--narrow { padding: 0 24px; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-main, .blog-single, .page-main { padding-top: 80px; padding-bottom: 60px; }
  .post-nav-inner { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; }
  .author-box { flex-direction: column; gap: 16px; }
}

/* ── 480px — Small phones ── */
@media (max-width: 480px) {
  .hero-title { font-size: clamp(28px, 9vw, 44px); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-gold, .btn-out { text-align: center; justify-content: center; width: 100%; }

  .svc-g { grid-template-columns: 1fr; }
  .stats-g { grid-template-columns: 1fr 1fr; }

  .orbit-wrap { width: 260px; height: 300px; }
  .orbit-outer { width: 300px; height: 300px; }
  .orbit-mid { width: 260px; height: 260px; }
  .orbit-ring { width: 220px; height: 220px; }
  .photo-card { width: 180px; height: 230px; }

  .gal-g { grid-template-columns: 1fr; }
  .gal-g .gi { height: 220px; }

  .partners-track { gap: 30px; }
  .partner-item { min-width: 80px; }

  .order-form-inner { gap: 24px; }
  .order-form-deco { height: 85%; }

  .fq-qt { font-size: 13.5px; }
}

/* ── Specific hero fix: badges on very small ── */
@media (max-width: 360px) {
  .s-badge { padding: 8px 10px; }
  .bn { font-size: 16px; }
  .bl { font-size: 9px; }
}

/* ── Video embed modal ── */
.video-modal { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.92); backdrop-filter: blur(16px); display: none; align-items: center; justify-content: center; padding: 20px; }
.video-modal.open { display: flex; }
.video-modal-inner { width: 100%; max-width: 900px; aspect-ratio: 16/9; position: relative; }
.video-modal-inner iframe { width: 100%; height: 100%; border: none; border-radius: 12px; }
.video-modal-close { position: absolute; top: -44px; right: 0; background: none; border: none; color: rgba(255,255,255,0.7); font-size: 28px; cursor: pointer; transition: color 0.2s; }
.video-modal-close:hover { color: #fff; }

/* ── Print ── */
@media print {
  nav, .mic-fab, .modal-bg, .lb, #order-form, #cta, footer { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}