/* ============================================================
   SVGS GOLD — Responsive v3 (Complete)
   Breakpoints: 1200 · 992 · 768 · 576
   ============================================================ */

/* ── ≤ 1200px ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .service-block-img { width: 200px; }
  /* .about-image-box { height: 380px; } */
}


/* ── ≤ 992px (Tablet) ─────────────────────────────────────── */
@media (max-width: 992px) {
  /* ── Nav ── */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    gap: 0;
    z-index: 99;
    margin-left: 0;
    order: 4;
  }
  .site-nav.open { display: flex; }
  .nav-link { width: 100%; padding: 0.75rem 1.5rem; }
  .nav-link::after { display: none; }
  .nav-cta { margin: 0.5rem 1.5rem 0.25rem; }
  .site-logo { order: 1; margin-right: auto; }
  .nav-toggle { order: 2; display: flex; margin-left: 0.75rem; flex-shrink: 0; }

  .site-header { position: relative; overflow: visible; }
  .header-inner { position: relative; }
  .nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Hero ── */
  .hero-slider { aspect-ratio: 992 / 520; max-height: none; }

  /* ── Ribbon ── */
  .ribbon-label { display: none; }

  /* ── About ── */
  .about-section { padding: 4.5rem 0; }
  .about-text { padding-left: 0; margin-top: 1rem; }
  /* .about-image-box { height: 320px; } */
  .about-badge { position: static; display: inline-block; margin-top: 1rem; }

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

  /* ── Feature cards ── */
  .features-section { padding: 4.5rem 0; }

  /* ── Services ── */
  .services-content-section { padding: 4.5rem 0; }
  .service-block { flex-direction: column !important; }
  .service-block-img { width: 100%; height: 220px; }
  .service-block-body { padding: 1.75rem 2rem 1.25rem; }
  .service-block-foot { padding: 0.9rem 2rem; }

  /* ── Process (homepage accordion + services timeline) ── */
  .process-section { padding: 4.5rem 0; }
  .process-left { margin-bottom: 2rem; }
  .process-visual { min-height: 280px; padding: 2rem; }

  /* ── Contact ── */
  .contact-section { padding: 4.5rem 0; }
  .contact-wrap { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* ── Branches ── */
  .branches-section { padding: 4.5rem 0; }

  /* ── Footer ── */
  .footer-tagline { max-width: 100%; }
}

/* ── ≤ 768px (Mobile) ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── Hero ── */
  .hero-prev, .hero-next { display: none !important; }

  /* ── Ribbon ── */
  .ribbon-item { padding: 0 0.5rem; gap: 0.4rem; }
  .ribbon-item-text { font-size: 0.52rem; letter-spacing: 0.04em; }
  .ribbon-item-icon { width: 26px; height: 26px; }
  .ribbon-item-icon i { font-size: 1rem; }

  /* ── Section spacing ── */
  .about-section,
  .features-section,
  .about-content-section,
  .services-content-section,
  .contact-section { padding: 4rem 0; }

  /* ── Stats ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-box { padding: 3rem 1.5rem; }

  /* ── About ── */
  .about-image-box { height: 270px; }
  .about-body { font-size: 0.9rem; }

  /* ── Feature cards ── */
  .feature-card-img { height: 210px; }

  /* ── Services ── */
  .service-block-img { height: 200px; }
  .service-block-body { padding: 1.4rem 1.5rem 1rem; }
  .service-block-foot {
    padding: 0.8rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
  .service-block-foot .btn-red { width: 100%; justify-content: center; }

  /* ── bg-fixed-parallax: background-attachment:fixed is broken on iOS Safari ── */
  .bg-fixed-parallax { background-attachment: scroll; }

  /* ── Process (homepage accordion + services timeline) ── */
  .process-section { padding: 4rem 0; }
  .process-visual { min-height: auto; padding: 1.75rem; gap: 1.1rem; }
  .process-visual-heading { font-size: 1.4rem; }
  .accordion-trigger { padding: 0.9rem 1rem; }

  /* ── CTA ── */
  .cta-band { padding: 3.5rem 0; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }

  /* ── Contact ── */
  .contact-info-panel,
  .contact-form-panel { padding: 2rem 1.5rem; }
  .map-strip-inner { height: 260px; }
  .contact-maps-strip { flex-direction: column; }
  .contact-map-item { height: 260px; }

  /* ── Branches ── */
  .branches-section { padding: 4rem 0; }
  .branch-card-map { height: 200px; }

  /* ── Footer ── */
  .footer-main { padding: 3rem 0 2rem; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* ── ≤ 576px (Small mobile) ──────────────────────────────── */
@media (max-width: 576px) {
  /* ── Header ── */
  .header-inner { height: 64px; }
  .site-logo-img { height: 60px; }

  /* ── Hero ── */
  .hero-slider { aspect-ratio: 576 / 420; }

  /* ── Page hero (inner pages) ── */
  .page-hero { padding: 118px 0 2.5rem; }
  .page-hero-heading { font-size: 1.75rem; }
  .page-hero-sub { font-size: 0.65rem; }

  /* ── Stats ── */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-box { padding: 2.5rem 1rem; }
  .stat-box-num { font-size: 2.6rem; }
  .stat-box::before { margin-bottom: 1rem; }

  /* ── About ── */
  .about-section { padding: 3.5rem 0; }
  .about-image-box { height: 210px; }
  .about-heading { font-size: 1.8rem; }
  .about-points { gap: 0.65rem; }

  /* ── Feature cards ── */
  .features-section { padding: 3.5rem 0; }
  .features-header { margin-bottom: 2rem; }
  .feature-card-img { height: 195px; }
  .feature-card-body { padding: 1.25rem 1.25rem 1rem; }
  .feature-card-title { font-size: 1.3rem; }

  /* ── Services ── */
  .services-content-section { padding: 3.5rem 0; }
  .service-block-img { height: 180px; }
  .service-block-body { padding: 1.2rem 1.25rem 0.9rem; }
  .service-block-foot { padding: 0.75rem 1.25rem; }
  .service-block-title { font-size: 1.4rem; }
  .service-tags { flex-direction: column; gap: 0.3rem; }
  .service-tag { font-size: 0.65rem; padding: 0.25rem 0.6rem; }

  /* ── Process (homepage accordion + services timeline) ── */
  .process-section { padding: 3.5rem 0; }
  .process-visual { padding: 1.25rem 1rem; }
  .process-visual-heading { font-size: 1.25rem; }
  .process-step-item { gap: 0.55rem; }
  .accordion-trigger { padding: 0.85rem 0.9rem; }
  .accordion-trigger-text { font-size: 0.82rem; }
  .accordion-body { padding: 0 0.9rem 1rem; }
  .accordion-body-text { font-size: 0.82rem; }
  /* ── Jewellery band ── */
  .jewellery-band { padding: 3rem 0; }

  /* ── CTA ── */
  .cta-band { padding: 3rem 0; }
  .cta-band-heading { font-size: 1.55rem; }

  /* ── Contact ── */
  .contact-section { padding: 3.5rem 0; }
  .contact-info-panel,
  .contact-form-panel { padding: 1.5rem 1.25rem; border-radius: var(--radius); }
  .contact-info-heading { font-size: 1.4rem; }
  .contact-form-heading { font-size: 1.35rem; }
  .map-strip-inner { height: 210px; }

  /* ── Branches ── */
  .branches-section { padding: 3.5rem 0; }
  .branch-card-name { font-size: 1.5rem; }
  .branch-card-map { height: 185px; }

  /* ── Footer ── */
  .footer-main { padding: 2.5rem 0 1.5rem; }
  .footer-tagline { font-size: 0.8rem; }
  .footer-col-head { margin-bottom: 0.9rem; }
  .footer-logo-img { height: 52px; }

  /* ── Back to top ── */
  .back-to-top { bottom: 1rem; right: 1rem; }
}

/* ── ≤ 400px (Narrow phones — fits down to 300px) ────────── */
@media (max-width: 400px) {
  /* ── Header: prevent hamburger from vanishing ── */
  .header-inner { height: 56px; }
  .site-logo-img { height: 48px; max-width: 140px; width: auto; object-fit: contain; }
  .gold-ticker { height: 46px; }
  .ticker-badge { padding: 0 1.3rem 0 0.9rem; gap: 0.38rem; }
  .ticker-badge::after { border-width: 23px 0 23px 15px; right: -15px; }
  .ticker-badge-text { font-size: 0.62rem; letter-spacing: 0.09em; }
  .ticker-item { padding: 0 0.85rem; gap: 0.3rem; }
  .ticker-karat { font-size: 0.58rem; letter-spacing: 0.1em; }
  .ticker-price { font-size: 0.84rem; }
  .ticker-unit { font-size: 0.56rem; }
  .nav-toggle { margin-left: 0.4rem; }

  /* ── Ribbon: 2-col grid so text stays visible ── */
  .ribbon-items { grid-template-columns: repeat(2, 1fr); }
  .ribbon-item { padding: 0.6rem 0.5rem; border-left: none; border-top: 1px solid rgba(255,255,255,0.07); }
  .ribbon-item-text { font-size: 0.5rem; }
  .ribbon-item-icon { width: 22px; height: 22px; }
  .ribbon-item-icon i { font-size: 0.9rem; }

  /* ── Page hero ── */
  .page-hero { padding: 110px 0 2rem; }
  .page-hero-heading { font-size: 1.45rem; }
  .page-hero-sub { font-size: 0.6rem; }

  /* ── Stats ── */
  .stat-box { padding: 1.75rem 0.75rem; }
  .stat-box-num { font-size: 2rem; }

  /* ── About ── */
  .about-heading { font-size: 1.6rem; }
  .about-image-box { height: 190px; }

  /* ── Feature cards ── */
  .feature-card-img { height: 175px; }
  .feature-card-body { padding: 1rem; }
  .feature-card-title { font-size: 1.15rem; }

  /* ── Service blocks ── */
  .service-block-body { padding: 1rem; }
  .service-block-foot { padding: 0.65rem 1rem; }
  .service-block-title { font-size: 1.25rem; }

  /* ── Process step cards ── */
  .step-card { padding: 1.5rem 1.25rem 1.25rem; }
  .step-n { font-size: 4.5rem; }
  .step-title { font-size: 1.2rem; }

  /* ── CTA ── */
  .cta-band-heading { font-size: 1.25rem; }
  .btn-gold, .btn-red { font-size: 0.68rem; padding: 0.55rem 1.1rem; }

  /* ── Contact ── */
  .contact-info-panel,
  .contact-form-panel { padding: 1.25rem 1rem; }
  .contact-info-heading { font-size: 1.25rem; }
  .contact-form-heading { font-size: 1.2rem; }

  /* ── Footer ── */
  .col-6 { width: 100% !important; }
  .footer-main { padding: 2rem 0 1rem; }
  .footer-link { font-size: 0.72rem; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .swiper-wrapper { transition: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}