/* ═══════════════════════════════════════════════════════════════════════
   NATIONAL PLASTO — COMPREHENSIVE MOBILE RESPONSIVENESS
   Covers: Header · Hero · About · Business · Products · Solutions ·
           Manufacturing · Quality · Reach · Footer · Modals · Forms
   Breakpoints: 1200px · 1024px · 768px · 480px · 360px
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── GLOBAL TOUCH FIXES ─── */
* { -webkit-tap-highlight-color: transparent; }

/* Restore normal cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
  body { cursor: auto !important; }
  button, a, .hamburger, .icon-btn { cursor: pointer !important; }
  .cursor-dot, .cursor-ring, .cursor-label { display: none !important; }
}

/* Base rule to hide mobile-bottom-nav on desktop */
.mobile-bottom-nav { display: none; }

/* iOS auto-zooms the page when a focused field is under 16px. Keep every
   text entry at 16px on phones so tapping a field never zooms the layout. */
@media (max-width: 768px) {
  .form-input,
  .form-textarea,
  .mfg-text-input,
  .mfg-textarea-input,
  .mfg-select-input,
  .product-db-search-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 1200px — Large Tablets / Small Desktops
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .header-inner { padding: 0 32px; }
  .container { padding: 0 40px; }
  .section { padding: 100px 0; }
  .section--lg { padding: 120px 0; }
  .hero-mfg-grid { gap: 40px; }
  .about-mfg-grid { gap: 48px; }
  .trust-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-metric-item { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 20px 16px; }
  .trust-metric-item:nth-child(2) { border-right: none; }
  .trust-metric-item:nth-child(3),
  .trust-metric-item:nth-child(4) { border-bottom: none; }
  .verticals-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .solutions-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-steps-grid { grid-template-columns: repeat(3, 1fr); }
  .mfg-capabilities-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps-scroll { grid-template-columns: repeat(4, 1fr); }
  .quality-checkpoints-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-cases-grid { grid-template-columns: 1fr 1fr; }
  .insights-cards-grid { grid-template-columns: 1fr 1fr; }
  .distributor-perks-grid { grid-template-columns: 1fr 1fr; }
  .reach-grid { gap: 40px; }
  .quality-credentials-bar { flex-wrap: wrap; gap: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 1024px — Tablets
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .header-inner { padding: 0 24px; }
  .container { padding: 0 32px; }
  .hero-mfg { padding-top: 90px; min-height: auto; padding-bottom: 60px; }
  .hero-mfg-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-showcase-wrapper { max-width: 600px; margin: 0 auto; }
  .hero-mfg-specs-bar { flex-wrap: wrap; gap: 20px; }
  .about-mfg-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-mfg-features { grid-template-columns: 1fr 1fr; }
  .verticals-grid { grid-template-columns: 1fr 1fr; }
  .solutions-cards-grid { grid-template-columns: 1fr 1fr; }
  .mfg-workflow-wrap { padding: 28px 24px; }
  .workflow-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .mfg-capabilities-grid { grid-template-columns: 1fr 1fr; }
  .process-steps-scroll { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .quality-checkpoints-grid { grid-template-columns: 1fr 1fr; }
  .reach-grid { grid-template-columns: 1fr; }
  .reach-depot-list { grid-template-columns: repeat(2, 1fr); }
  .proof-cases-grid { grid-template-columns: 1fr 1fr; }
  .distributor-perks-grid { grid-template-columns: 1fr 1fr; }
  .insights-cards-grid { grid-template-columns: 1fr 1fr; }
  .final-cta-mfg-section .cta-action-row { flex-wrap: wrap; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 768px — Mobile Devices
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Global */
  :root { --header-h: 64px; }
  html, body { overflow-x: clip; max-width: 100vw; }
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section--sm { padding: 56px 0; }
  .section--lg { padding: 80px 0; }

  /* Typography */
  .t-h1 { font-size: clamp(32px, 8vw, 52px) !important; }
  .t-h2 { font-size: clamp(26px, 7vw, 40px) !important; }
  .t-h3 { font-size: clamp(22px, 5.5vw, 32px) !important; }
  .t-h4 { font-size: 20px !important; }
  .t-giant { font-size: clamp(42px, 11vw, 80px) !important; }
  .t-body-lg { font-size: 16px !important; }
  .mfg-section-title { font-size: clamp(26px, 7vw, 40px) !important; }
  .mfg-section-desc { font-size: 14px !important; }
  .mfg-section-header { margin-bottom: 36px; }

  /* Header */
  .site-header { height: 68px !important; }
  .site-header.scrolled { height: 62px !important; }
  /* .site-header scoped to match vibrant-theme.css, which sets this padding
     at the same weight but higher specificity. */
  .site-header .header-inner { padding: 0 20px !important; }
  /* The nav is hidden on a phone, leaving .header-right-cluster with one
     child; its space-between then parks the buttons mid-header instead of at
     the edge. Pin the cluster right and let it shrink to its content. */
  .header-right-cluster {
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
  }
  .header-actions { gap: 12px !important; }
  .header-logo-primary { height: 48px !important; max-width: 200px !important; }
  .site-header.scrolled .header-logo-primary { height: 40px !important; }
  .header-nav, .header-btn-partner, .header-btn-touch { display: none !important; }

  /* Hamburger icon — properly visible on mobile */
  .hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 8px !important;
    padding: 10px 11px !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  .hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #FFFFFF !important;
    border-radius: 2px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* App-like Bottom Navigation */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    background: rgba(10, 8, 6, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 900;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
  }
  
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-family: var(--font-sans-luxury, 'Instrument Sans', sans-serif);
    font-size: 10px;
    font-weight: 600;
    flex: 1;
    transition: all 0.3s ease;
    height: 48px;
    cursor: pointer;
  }

  .bottom-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .bottom-nav-item.active {
    color: #E5BB52;
  }
  
  .bottom-nav-item.active svg {
    stroke: #E5BB52;
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(229, 187, 82, 0.3));
  }

  /* Floating Action Button (Center) */
  .bottom-nav-fab-wrap {
    flex: 1.2;
    transform: translateY(-24px);
    height: auto;
    color: rgba(255, 255, 255, 0.8);
  }

  .bottom-nav-fab {
    background: linear-gradient(135deg, #E5BB52 0%, #BA8B28 100%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(229, 187, 82, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.4);
    color: #121212;
    border: 4px solid #0A0806;
    margin-bottom: 6px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  }

  .bottom-nav-fab svg {
    width: 24px;
    height: 24px;
    stroke: #121212;
    stroke-width: 2.2;
    fill: none;
  }
  
  .bottom-nav-fab-wrap:active .bottom-nav-fab {
    transform: scale(0.92);
    box-shadow: 0 4px 12px rgba(229, 187, 82, 0.2);
  }
  
  .fab-label {
    font-size: 10px;
    font-weight: 700;
    color: #E5BB52;
    letter-spacing: 0.05em;
  }

  /* Hide the old one completely */
  .mobile-sticky-bar { display: none !important; }

  /* Body bottom padding update for higher nav bar */
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* Loader */
  .yodezeen-loader__content { padding: 0 20px; }
  .yodezeen-logo-wrap img { max-height: 48px; }
  .yodezeen-tagline { font-size: 9px; letter-spacing: 0.16em; }
  .yodezeen-slogan { font-size: 13px; }

  /* Hero Cinematic — full scroll animation, centered content */
  .hero-scroll-track { height: 300vh; } /* Keep full 300vh so all 4 scroll scenes animate properly */
  .hero-sticky-stage { align-items: center; justify-content: center; }
  .hero-stage-layer {
    padding: 0 16px !important;
    align-items: center !important;
    justify-content: center;
    text-align: center;
  }
  .hero-scene-4 { padding-top: 0 !important; }
  .hero-scene-content {
    padding: 0 8px;
    text-align: center !important;
    align-items: center !important;
    width: 100%;
  }
  .hero-title-meet-india {
    align-items: center !important;
    text-align: center !important;
  }
  .hero-kicker-small { font-size: 12px; letter-spacing: 0.28em; }
  .hero-heading-main { font-size: clamp(40px, 13vw, 72px) !important; }
  .hero-subtitle-lead { font-size: 14px; margin-top: 12px; }
  .hero-heading-statement { font-size: clamp(24px, 8vw, 40px) !important; }
  .hero-statement-desc { font-size: 14px; }
  .hero-heading-philosophy { font-size: clamp(22px, 7vw, 36px) !important; gap: 8px; }
  .hero-philosophy-desc { font-size: 13.5px; }
  .hero-reveal-script { font-size: clamp(28px, 9vw, 44px) !important; }
  .hero-reveal-brand-name { font-size: clamp(20px, 7vw, 36px) !important; letter-spacing: 0.12em !important; }
  .hero-reveal-tagline { font-size: 11px; letter-spacing: 0.14em; }
  .hero-reveal-copy { font-size: 13px; margin-bottom: 16px; }
  .hero-reveal-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-cta-explore, .hero-btn-contact { width: 100%; justify-content: center; padding: 14px 20px; font-size: 11px; }
  .hero-bottom-bar { padding: 0 14px; bottom: 14px; }
  .hero-frame-counter { font-size: 9px; padding: 4px 10px; }
  .hero-magazine-sequence { display: none !important; }
  .hero-scroll-indicator { display: none !important; }
  .hero-dots-group { gap: 8px; }
  .hero-dot-item { width: 8px; height: 8px; }

  /* About (luxury hero-advance section) */
  .about-mfg-section { padding: 72px 0 !important; }
  /* minmax(0,1fr), not 1fr: a plain 1fr track is minmax(auto,1fr) and cannot
     shrink below its widest child's min-content, which drags the other column
     out with it. min-width:0 frees the columns the same way. */
  .about-luxury-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about-left-col, .about-right-col { min-width: 0; }
  .about-features-modern-grid { grid-template-columns: 1fr; }
  .about-metric-strip { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .about-metric-divider { display: none; }
  .about-metric-item { flex: 1 1 42%; text-align: center; }
  .about-right-col { max-width: 100%; }
  .about-cta-row { flex-direction: column; width: 100%; gap: 12px; }
  .btn-about-primary, .btn-about-secondary { width: 100%; justify-content: center; }
  .about-floating-badge { position: static; margin-top: 12px; width: 100%; }
  .badge-top-right, .badge-bottom-left { position: static; }
  /* The element is .about-stage-nav — the .about-stage-tabs this rule used to
     name exists in no page, so the scroll fix never applied and the three
     nowrap tabs forced the whole About grid 444px wide. */
  .about-stage-nav {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none; justify-content: flex-start;
  }
  .about-stage-nav::-webkit-scrollbar { display: none; }
  .about-stage-tab { white-space: nowrap; flex-shrink: 0; font-size: 11px; padding: 8px 14px; }

  /* About card mobile */
  .about-card-modern { padding: 18px 16px; }

  /* Hero MFG pages */
  .hero-mfg { padding-top: 80px; padding-bottom: 48px; min-height: auto; }
  .hero-mfg-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-mfg-title { font-size: clamp(28px, 8vw, 44px) !important; }
  .hero-mfg-desc { font-size: 15px; margin-top: 16px; }
  .hero-mfg-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-mfg-primary, .btn-mfg-secondary { width: 100%; justify-content: center; padding: 14px 24px; }

  /* This bar's rows carry inline flex-shrink:0 and min-width:300px, so they
     cannot shrink and clip the button on a 360px screen. Inline styles need
     !important to beat. */
  .quality-credentials-bar > div {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    flex-wrap: wrap;
  }
  .quality-credentials-bar > div:last-child { width: 100%; }

  .hero-mfg-specs-bar { flex-wrap: wrap; gap: 16px; margin-top: 28px; padding-top: 20px; }
  .hero-showcase-wrapper { max-width: 100%; }
  .hero-floating-proof-chip { flex-direction: column; align-items: flex-start; gap: 10px; bottom: 12px; left: 12px; right: 12px; }
  .hero-proof-iso { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); padding-left: 0; padding-top: 10px; width: 100%; }

  /* Trust Strip */
  .trust-strip-section { padding: 24px 0; }
  .trust-strip-grid { grid-template-columns: 1fr 1fr; }
  .trust-metric-item { border-right: 1px solid rgba(255,255,255,0.08) !important; padding: 16px 12px; border-bottom: none; }
  .trust-metric-item:nth-child(even) { border-right: none !important; }
  .trust-metric-num { font-size: clamp(22px, 6vw, 32px) !important; }

  /* Business Verticals */
  .business-verticals-section { padding: 72px 0; }
  .verticals-grid { grid-template-columns: 1fr; gap: 20px; }
  .business-section-header-bar { padding: 48px 20px 28px; }
  .business-brand-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; justify-content: flex-start; gap: 8px; scrollbar-width: none; width: 100%;
  }
  .business-brand-tabs::-webkit-scrollbar { display: none; }
  .business-main-heading { font-size: clamp(22px, 6.5vw, 36px) !important; }
  .brand-panel-grid, .brand-vertical-grid { grid-template-columns: 1fr !important; }

  /* Products */
  .products-mfg-section { padding: 72px 0; }
  .products-taxonomy-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; padding-bottom: 8px; }
  .products-taxonomy-nav::-webkit-scrollbar { display: none; }
  .taxonomy-tab-btn { flex-shrink: 0; }
  .products-visual-grid { grid-template-columns: 1fr; gap: 20px; }
  .product-card-featured { transform: none; }

  /* Solutions */
  .solutions-mfg-section { padding: 72px 0; }
  .solutions-cards-grid { grid-template-columns: 1fr; gap: 16px; }
  .mfg-workflow-wrap { padding: 24px 18px; }
  .workflow-steps-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .workflow-step-card::after { display: none; }

  /* Manufacturing Deep */
  .mfg-deep-section { padding: 72px 0; }
  .mfg-capabilities-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .process-steps-scroll { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Quality */
  .quality-mfg-section { padding: 72px 0; }
  .quality-checkpoints-grid { grid-template-columns: 1fr; gap: 16px; }
  .quality-credentials-bar { flex-direction: column; align-items: flex-start; padding: 24px 20px; gap: 16px; }

  /* Proof Cases */
  .proof-mfg-section { padding: 72px 0; }
  .proof-cases-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Reach */
  .reach-mfg-section { padding: 72px 0; }
  .reach-grid { grid-template-columns: 1fr; gap: 40px; }
  .reach-depot-list { grid-template-columns: 1fr 1fr; }

  /* Distributor */
  .distributor-mfg-section { padding: 72px 0; }
  .distributor-perks-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Insights */
  .insights-mfg-section { padding: 72px 0; }
  .insights-cards-grid { grid-template-columns: 1fr; gap: 20px; }

  /* About MFG (brand-manufacturing.css) */
  .about-mfg-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-mfg-features { grid-template-columns: 1fr; gap: 14px; }
  .about-mfg-visual-card img { aspect-ratio: 16/9; }

  /* Footer */
  .site-footer { padding: 60px 0 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-links-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }

  /* RFQ / Forms */
  .enquiry-inner { grid-template-columns: 1fr; gap: 40px; }
  .enquiry-form-card { padding: 28px 20px; }
  .intent-grid { grid-template-columns: 1fr; }
  .category-select-grid { grid-template-columns: 1fr; }

  /* Search */
  .search-inner { padding: 24px 20px; }
  .search-close { top: 16px; right: 16px; }

  /* Catalogue modal */
  .catalogue-modal-content { grid-template-columns: 1fr; }
  .catalogue-modal-sidebar { height: auto; max-height: 160px; }
  .catalogue-book { display: none; }

  /* Generic grids */
  .hero-content { padding: 0 20px; }
  .hero-badge { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .brand-statement-inner { grid-template-columns: 1fr; gap: 32px; }
  .categories-track { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .b2b-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .manufacturing-grid { grid-template-columns: 1fr; }
  .section-header-split { flex-direction: column; gap: 20px; }
  .catalogue-inner { grid-template-columns: 1fr; }
  .catalogue-cover-wrap { display: none; }
  .timeline-event { grid-template-columns: 1fr; gap: 12px; }
  .timeline-track { padding-left: 32px; }

  /* Page hero banners */
  .page-hero-banner { padding-top: 100px !important; padding-bottom: 60px !important; min-height: auto !important; }
  .page-hero-banner h1, .page-hero-banner .t-display-md { font-size: clamp(28px, 8vw, 48px) !important; }
  .page-hero-banner p, .page-hero-banner .t-body-lg { font-size: 15px !important; }

  /* CTA rows */
  .cta-action-row { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .cta-action-row .btn-mfg-primary,
  .cta-action-row .btn-mfg-secondary { justify-content: center; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 480px — Small Phones
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .header-logo-primary { height: 42px !important; max-width: 170px !important; }
  .site-header .header-inner { padding: 0 18px !important; }
  .hero-heading-main { font-size: clamp(36px, 14vw, 60px) !important; }
  .hero-reveal-brand-name { font-size: clamp(18px, 8vw, 32px) !important; letter-spacing: 0.08em !important; }
  .hero-reveal-script { font-size: clamp(26px, 10vw, 38px) !important; }
  .hero-stage-layer { padding-top: 68px; }
  .trust-strip-grid { grid-template-columns: 1fr; }
  .trust-metric-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
  .trust-metric-item:last-child { border-bottom: none !important; }
  .vertical-card-title { font-size: 18px; }
  .workflow-steps-grid { grid-template-columns: 1fr; }
  .mfg-capabilities-grid { grid-template-columns: 1fr; }
  .process-steps-scroll { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-block { padding: 28px 20px; }
  .stat-divider { display: none; }
  .footer-links-grid { grid-template-columns: 1fr; }
  .footer-bottom { text-align: center; align-items: center; }
  .about-metric-item { flex: 1 1 100%; }
  .about-metric-strip { gap: 10px; }
  .values-grid { grid-template-columns: 1fr; }
  .reach-depot-list { grid-template-columns: 1fr; }
  .quality-credentials-bar { padding: 20px 16px; }
  .categories-track { grid-template-columns: 1fr 1fr; gap: 12px; }
  .collections-grid { grid-template-columns: 1fr; }
  .collection-portal { min-height: 300px; }
  .solutions-cards-grid { grid-template-columns: 1fr; }
  .distributor-perks-grid { grid-template-columns: 1fr; }
  .proof-cases-grid { grid-template-columns: 1fr; }
  .insights-cards-grid { grid-template-columns: 1fr; }
  .b2b-grid { grid-template-columns: 1fr; }
  .form-nav { flex-direction: column; align-items: stretch; }
  .hero-mfg-actions { gap: 10px; }
  .catalogue-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .catalogue-actions a, .catalogue-actions button { width: 100%; justify-content: center; }
  .hero-mfg-specs-bar { gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 360px — Very Small Phones
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .site-header .header-inner { padding: 0 16px !important; }
  .hero-heading-main { font-size: clamp(32px, 13vw, 52px) !important; }
  .hero-reveal-brand-name { font-size: clamp(16px, 8.5vw, 28px) !important; }
  .hero-reveal-script { font-size: clamp(22px, 10vw, 34px) !important; }
  .mfg-section-title { font-size: clamp(22px, 8vw, 34px) !important; }
  .hero-mfg-title { font-size: clamp(24px, 9vw, 36px) !important; }
  .hero-cta-explore, .hero-btn-contact { font-size: 10px; padding: 12px 16px; }
  .trust-metric-num { font-size: 24px !important; }
  .about-metric-num { font-size: 24px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FULLSCREEN MOBILE MENU
   Seven links plus the footer block overflow a phone screen, so the panel
   scrolls and the type is sized to keep long labels on one line.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Stretch, not centre: centring a panel taller than the screen clips
     its top beyond reach. */
  .mobile-menu { align-items: stretch; }

  .mobile-menu-inner {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Clear the 68px fixed header, which sits above this panel. */
    padding: calc(68px + 20px) 20px 32px;
    justify-content: flex-start;
  }

  /* The header clearance now lives on the panel padding. */
  .mobile-nav { margin-top: 0; }

  .mobile-nav-link {
    font-size: clamp(18px, 5.6vw, 25px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    padding: 13px 0;
    gap: 12px;
  }

  .mobile-menu-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SAFE AREA INSETS — iPhone X+ / Home Bar
   ═══════════════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  .site-header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* viewport-fit=cover runs the page under the status bar, so the fixed
     header grows by the top inset and pads its content clear of the notch.
     border-box keeps .header-inner's height:100% at the original 68px. */
  @media (max-width: 768px) {
    .site-header {
      height: calc(68px + env(safe-area-inset-top)) !important;
      padding-top: env(safe-area-inset-top);
    }
    .site-header.scrolled {
      height: calc(62px + env(safe-area-inset-top)) !important;
    }
    .mobile-menu-inner {
      padding-top: calc(68px + env(safe-area-inset-top) + 20px);
    }
  }
  .mobile-sticky-bar {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .mobile-menu-inner {
    padding-bottom: max(40px, calc(40px + env(safe-area-inset-bottom)));
  }
}