/* ═══════════════════════════════════════════════════════════════
   ONESTOPCODE — mobile-responsive.css
   Upload this file to your WordPress theme root folder.
   It is automatically linked from header.php.
   Covers every page template at every breakpoint.
   Breakpoints:  1100 · 860 · 640 · 480 · 380
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   GLOBAL — always applied
───────────────────────────────────────────────────────────────*/
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* Smooth scroll on iOS sliders */
.testi-track,
.rev-track {
  -webkit-overflow-scrolling: touch;
}
/* Touch tap targets */
.btn-primary, .btn-outline, .pc-btn, .form-submit, .slider-btn {
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT 1 — ≤ 1100px  (tablet landscape / small desktop)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {

  /* ── Spacing token ── */
  :root { --pad-x: 32px; }

  /* ── Header / Nav ── */
  .site-header { padding: 0 var(--pad-x); height: 68px; }
  .site-header nav.nav-links,
  .nav-right .btn-primary { display: none !important; }
  .nav-burger { display: flex !important; }
  .logo-fallback { font-size: 18px; }

  /* ── Hero ── */
  #hero { padding: 0 var(--pad-x) 60px; }
  .hero-ambient { display: none; }
  .hero-rule { left: var(--pad-x); right: var(--pad-x); top: 100px; }
  .hero-hl { font-size: clamp(52px, 10vw, 100px); margin-bottom: 36px; }
  .hero-eyebrow-right { display: none; }

  /* ── Marquee ── */
  .osc-mq-item { padding: 0 18px; }

  /* ── Intro ── */
  #osc-intro { padding: 80px var(--pad-x); }
  .intro-body { font-size: clamp(22px, 5vw, 44px); }

  /* ── Services table (home) ── */
  #osc-services { padding: 70px var(--pad-x); }
  .svc-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .svc-sub { max-width: 100%; }
  .svc-row { grid-template-columns: 40px 1fr 36px; gap: 12px; padding: 20px 0; }
  .svc-tags { display: none; }
  .svc-name { font-size: clamp(18px, 3.5vw, 32px); }

  /* ── Work grid ── */
  #osc-work { padding: 70px var(--pad-x); }
  .work-grid { grid-template-columns: 1fr; gap: 2px; }
  .wc.big { grid-column: span 1; }
  .wc.big .wc-name { font-size: clamp(28px, 7vw, 52px); }
  .wc { padding: 32px; min-height: 220px; }
  .wc-desc { opacity: 1 !important; transform: none !important; }

  /* ── About section ── */
  #osc-about { grid-template-columns: 1fr; gap: 48px; padding: 80px var(--pad-x); }
  .about-hl { font-size: clamp(32px, 7vw, 56px); }

  /* ── Process (home) ── */
  #osc-process { padding: 70px var(--pad-x); }
  .proc-steps { grid-template-columns: 1fr 1fr; }
  .ps { padding: 28px 20px 28px 0; }
  .ps:not(:first-child) { padding-left: 20px; }

  /* ── Testimonials strip ── */
  #osc-testi { padding: 70px 0; }
  .testi-head { padding: 0 var(--pad-x) 36px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .testi-track { padding: 0 var(--pad-x); }
  .tc { width: 300px; padding: 28px 24px; }
  .tc-body { font-size: 14px; }

  /* ── Pricing grid (home) ── */
  #osc-pricing { padding: 70px var(--pad-x); }
  .price-grid { grid-template-columns: 1fr; background: none; gap: 12px; }
  .price-grid .pc { border: 1px solid var(--border); }
  .price-grid .pc.feat { border-color: var(--border2); }
  .price-grid .pc:hover { transform: none; }

  /* ── Final CTA (home) ── */
  #osc-cta { padding: 100px var(--pad-x); }
  .cta-hl { font-size: clamp(44px, 10vw, 90px); }
  .cta-bg-word { display: none; }

  /* ── Divider ── */
  .divider { margin: 0 var(--pad-x); }

  /* ─── SERVICES PAGE ─── */
  .pg-hero { display: block !important; padding: 110px var(--pad-x) 70px; min-height: auto; }
  .pg-orb { display: none; }
  .pg-hero-title { font-size: clamp(44px, 10vw, 80px) !important; margin-bottom: 20px; }
  .stat-bars { display: none !important; }
  .ph-stats  { display: none !important; }
  .svc-main { padding: 0 var(--pad-x) 60px; }
  .s-card { grid-template-columns: 1fr !important; direction: ltr !important; min-height: auto; }
  .s-card.rev { direction: ltr !important; }
  .s-visual {
    min-height: 200px;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid var(--border);
  }
  .s-ghost { font-size: 160px; }
  .s-visual-icon svg { width: 56px; height: 56px; }
  .s-body { padding: 40px 36px; }
  .s-body-num { font-size: 72px; margin-bottom: -22px; }
  .s-body h2 { font-size: clamp(22px, 4.5vw, 36px); }
  .addons-sec { padding: 70px var(--pad-x); }
  .addons-inner { max-width: 100%; }
  .addon-grid { grid-template-columns: 1fr 1fr; }
  .svc-proc { padding: 70px var(--pad-x); }
  .proc-row { grid-template-columns: 1fr 1fr; gap: 24px; }
  .proc-row::before { display: none; }
  .p-step { padding: 0; }
  .svc-cta { padding: 80px var(--pad-x); }
  .svc-cta h2 { font-size: clamp(36px, 8vw, 70px); }

  /* ─── ABOUT PAGE ─── */
  .about-hero { display: block !important; padding: 110px var(--pad-x) 70px; min-height: auto; }
  .ah-orb1, .ah-orb2 { display: none; }
  .ah-title { font-size: clamp(44px, 10vw, 80px) !important; margin-bottom: 20px; }
  .ah-desc { font-size: 14px; margin-top: 28px; }
  .story-sec { padding: 70px var(--pad-x); }
  .story-inner { grid-template-columns: 1fr; gap: 40px; }
  .story-h2 { font-size: clamp(28px, 6vw, 44px); }
  .founder-sec { padding: 60px var(--pad-x); }
  .founder-card { padding: 36px 28px; gap: 24px; }
  .founder-name { font-size: clamp(22px, 5vw, 34px); }
  .founder-bio { font-size: 13px; }
  .values-sec { padding: 70px var(--pad-x); }
  .values-inner { max-width: 100%; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .v-card { padding: 28px 22px; }
  .why-sec { padding: 70px var(--pad-x); }
  .why-grid { grid-template-columns: 1fr; }
  .why-item { padding: 28px 22px; gap: 16px; }
  .why-num { font-size: 40px; }
  .about-cta { padding: 80px var(--pad-x); }
  .about-cta h2 { font-size: clamp(36px, 8vw, 70px); }

  /* ─── PRICING PAGE ─── */
  .price-hero { padding: 110px var(--pad-x) 70px; min-height: auto; }
  .price-hero-orb { display: none; }
  .price-hero-title { font-size: clamp(44px, 10vw, 80px) !important; margin-bottom: 20px; }
  .price-sec { padding: 60px var(--pad-x); }
  .p-grid { grid-template-columns: 1fr; background: none; gap: 12px; }
  .p-grid .pc { border: 1px solid var(--border); }
  .p-grid .pc.feat { border-color: var(--border2); }
  .p-grid .pc:hover { transform: none; }
  .custom-banner { padding: 0 var(--pad-x) 60px; }
  .cb-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px; }
  .cb-inner::before { display: none; }
  .cb-inner h2 { font-size: clamp(22px, 5vw, 36px); }
  .cb-inner .btn-primary { width: 100%; justify-content: center; }
  .compare-sec { padding: 0 var(--pad-x) 60px; }
  .compare-sec h2 { font-size: clamp(24px, 5vw, 40px); margin-bottom: 28px; }
  .faq-sec { padding: 0 var(--pad-x) 70px; }
  .faq-sec h2 { font-size: clamp(24px, 5vw, 40px); }
  .faq-q { font-size: clamp(14px, 3.5vw, 18px); padding: 18px 0 8px; }
  .price-cta { padding: 80px var(--pad-x); }
  .price-cta h2 { font-size: clamp(36px, 8vw, 70px); }

  /* ─── TESTIMONIALS PAGE ─── */
  .testi-hero { padding: 110px var(--pad-x) 70px; min-height: auto; }
  .testi-hero-orb { display: none; }
  .testi-hero-title { font-size: clamp(44px, 10vw, 80px) !important; margin-bottom: 20px; }
  .t-stats { padding: 44px var(--pad-x); }
  .t-stats-inner { grid-template-columns: 1fr 1fr; gap: 0; }
  .t-stat { border-right: none; padding: 16px 20px; border-bottom: 1px solid var(--border); }
  .t-stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .t-stat:nth-last-child(-n+2) { border-bottom: none; }
  .t-stat-num { font-size: clamp(32px, 7vw, 56px); }
  .port-sec { padding: 70px var(--pad-x); }
  .feat { grid-template-columns: 1fr !important; direction: ltr !important; min-height: auto; }
  .feat.rev { direction: ltr !important; }
  .feat-media { border-right: none !important; border-left: none !important; border-bottom: 1px solid var(--border); }
  .feat-preview { min-height: 240px; }
  .feat-body { padding: 40px 32px; }
  .feat-body h2 { font-size: clamp(24px, 5vw, 36px); }
  .t-grid { grid-template-columns: 1fr 1fr; }
  .tc-media { height: 160px; }
  .reviews-sec { padding: 70px 0; }
  .rev-header { padding: 0 var(--pad-x) 32px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .rev-track { padding: 0 var(--pad-x); }
  .rc { width: 300px; padding: 28px 24px; }
  .rc-body { font-size: 14px; }
  .rev-controls { padding: 20px var(--pad-x) 0; }
  .testi-cta { padding: 80px var(--pad-x); }
  .testi-cta h2 { font-size: clamp(36px, 8vw, 70px); }

  /* ─── CONTACT PAGE ─── */
  .contact-hero { padding: 110px var(--pad-x) 70px; min-height: auto; }
  .contact-hero-orb { display: none; }
  .contact-hero-title { font-size: clamp(44px, 10vw, 80px) !important; margin-bottom: 20px; }
  .c-main { padding: 60px var(--pad-x) 70px; }
  .c-inner { grid-template-columns: 1fr; gap: 48px; }
  .c-info h2 { font-size: clamp(22px, 5vw, 32px); }
  .c-info > p { font-size: 13px; }
  .c-method { padding: 16px 18px; }
  .c-method-icon { width: 38px; height: 38px; }
  .c-method-title { font-size: 14px; }
  .c-form-wrap { padding: 40px 36px; }
  .c-form-wrap h3 { font-size: 22px; }
  .regions-sec { padding: 0 var(--pad-x) 70px; }
  .regions-grid { grid-template-columns: 1fr 1fr; }
  .region-card { padding: 26px 20px; }

  /* ─── FOOTER ─── */
  .foot-top { grid-template-columns: 1fr 1fr; gap: 40px; padding: 60px 0 48px; }
  .foot-brand { grid-column: span 2; }
  .foot-bg-word { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT 2 — ≤ 860px  (tablet portrait / touch starts)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* ── Hero stacks ── */
  #hero { padding-bottom: 50px; }
  .hero-hl { font-size: clamp(44px, 12vw, 80px); margin-bottom: 28px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-desc { max-width: 100%; font-size: 14px; }
  .hero-actions { flex-wrap: wrap; gap: 10px; width: 100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline { flex: 1; justify-content: center; min-width: 140px; }
  .hero-scroll-hint { display: none; }

  /* ── Disable custom cursor — useless on touch ── */
  #osc-cursor, #osc-cursor-ring { display: none !important; }
  body { cursor: auto !important; }
  a, button { cursor: pointer !important; }

  /* ── Touch-friendly tap targets (Apple HIG = 44px min) ── */
  .btn-primary,
  .btn-outline,
  .pc-btn,
  .form-submit,
  .slider-btn,
  .nav-mobile a { min-height: 44px; }
  .nav-burger { padding: 12px 8px; }
  .nav-burger span { width: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT 3 — ≤ 640px  (large phone / most iPhones)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Spacing ── */
  :root { --pad-x: 20px; }

  /* ── Header ── */
  .site-header { height: 60px; }
  .logo-fallback { font-size: 16px; }
  .nav-mobile { top: 60px; padding: 32px var(--pad-x); }
  .nav-mobile a { font-size: 24px; padding: 14px 0; }

  /* ── Hero ── */
  #hero { padding-bottom: 40px; padding-top: 16px; }
  .hero-hl { font-size: clamp(34px, 13vw, 60px); margin-bottom: 22px; }
  .hero-eyebrow { font-size: 9px; gap: 8px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline { width: 100%; justify-content: center; padding: 14px 20px; }

  /* ── Intro ── */
  #osc-intro { padding: 60px var(--pad-x); }
  .intro-body { font-size: clamp(18px, 6.5vw, 28px); line-height: 1.18; }

  /* ── Services table ── */
  .svc-row { grid-template-columns: 30px 1fr 24px; gap: 8px; padding: 16px 0; }
  .svc-num { font-size: 9px; min-width: 24px; }
  .svc-name { font-size: clamp(14px, 5vw, 20px); }
  .svc-arr { font-size: 15px; }

  /* ── Work grid ── */
  .wc { padding: 22px; min-height: 170px; }
  .wc-name { font-size: clamp(18px, 7vw, 30px) !important; }
  .wc.big .wc-name { font-size: clamp(20px, 7.5vw, 34px) !important; }
  .wc-stat { display: none; }
  .wc-arr { top: 18px; right: 18px; font-size: 15px; }
  .wc-more-num { font-size: 52px; }

  /* ── About section ── */
  #osc-about { padding: 56px var(--pad-x); }
  .ctr-grid { grid-template-columns: 1fr 1fr; }
  .ctr-block { padding: 18px 14px; }
  .ctr-num { font-size: clamp(24px, 7vw, 38px); }
  .about-quote { font-size: clamp(13px, 4vw, 17px); padding-left: 16px; }
  .about-right p { font-size: 13px; }

  /* ── Process ── */
  .proc-steps { grid-template-columns: 1fr; }
  .ps {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 22px;
    padding-top: 22px;
  }
  .ps:last-child { border-bottom: none; }
  .ps-t { font-size: 20px; }

  /* ── Testimonials strip ── */
  .tc { width: 260px; padding: 20px 16px; }
  .tc-body { font-size: 13px; }
  .tc-stars { font-size: 10px; }

  /* ── Pricing (home) ── */
  .pc { padding: 28px 20px; }
  .pc-num { font-size: clamp(32px, 10vw, 50px); }
  .pc-feats li { font-size: 11px; padding: 7px 0; }
  .pc-badge { font-size: 8px; padding: 4px 14px; }

  /* ── Final CTA ── */
  #osc-cta { padding: 70px var(--pad-x); }
  .cta-hl { font-size: clamp(32px, 12vw, 56px); }
  .cta-sub { font-size: 13px; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn-primary,
  .cta-actions .btn-outline { width: 100%; justify-content: center; }
  .cta-note { font-size: 9px; }
  .cta-label { font-size: 9px; }

  /* ── Shared atoms ── */
  .sec-label { font-size: 9px; gap: 8px; margin-bottom: 14px; }
  .sec-label::before { width: 16px; }
  .sec-title { font-size: clamp(26px, 9.5vw, 40px) !important; }
  .btn-primary { padding: 12px 20px; font-size: 10px; }
  .btn-outline  { padding: 11px 18px; font-size: 10px; }
  .divider { margin: 0 var(--pad-x); }

  /* ─── SERVICES PAGE ─── */
  .pg-hero { padding: 90px var(--pad-x) 50px; }
  .pg-hero-title { font-size: clamp(32px, 12vw, 56px) !important; }
  .pg-hero-right p { font-size: 13px !important; max-width: 100% !important; margin-top: 20px; }
  .svc-main { padding: 0 var(--pad-x) 36px; }
  .s-visual { min-height: 160px; }
  .s-body { padding: 24px 20px; }
  .s-body h2 { font-size: clamp(18px, 6vw, 26px); }
  .s-price-tag { font-size: 9px; padding: 5px 12px; }
  .s-feats li { font-size: 11px; padding: 7px 0; }
  .s-body .s-desc { font-size: 13px; }
  .addons-sec { padding: 48px var(--pad-x); }
  .addon-grid { grid-template-columns: 1fr; }
  .addon-card { padding: 24px 20px; }
  .addon-card h3 { font-size: 17px; }
  .svc-proc { padding: 48px var(--pad-x); }
  .proc-row { grid-template-columns: 1fr; }
  .p-num-box { width: 44px; height: 44px; font-size: 16px; }
  .p-step h3 { font-size: 17px; }
  .svc-cta { padding: 60px var(--pad-x); }
  .svc-cta h2 { font-size: clamp(26px, 10vw, 48px); }
  .svc-cta p  { font-size: 13px; }
  .svc-cta-inner [style*="display:flex"] { flex-direction: column; }
  .svc-cta-inner .btn-primary,
  .svc-cta-inner .btn-outline { width: 100%; justify-content: center; }

  /* ─── ABOUT PAGE ─── */
  .about-hero { padding: 90px var(--pad-x) 50px; }
  .ah-title { font-size: clamp(32px, 12vw, 56px) !important; }
  .story-sec { padding: 56px var(--pad-x); }
  .story-h2 { font-size: clamp(22px, 7vw, 36px); }
  .story-right p { font-size: 13px; }
  .story-quote { padding-left: 16px; }
  .story-quote p { font-size: clamp(13px, 4vw, 17px); }
  .founder-card { grid-template-columns: 1fr !important; padding: 28px 20px; gap: 16px; }
  .founder-av { width: 68px; height: 68px; font-size: 1.6rem; }
  .founder-name { font-size: clamp(20px, 6vw, 30px); }
  .founder-bio { font-size: 13px; }
  .values-sec { padding: 56px var(--pad-x); }
  .values-grid { grid-template-columns: 1fr; }
  .v-card { padding: 24px 18px; }
  .v-card h3 { font-size: 17px; }
  .why-sec { padding: 56px var(--pad-x); }
  .why-item { padding: 22px 18px; gap: 14px; }
  .why-num { font-size: 36px; }
  .why-item h3 { font-size: 17px; }
  .about-cta { padding: 64px var(--pad-x); }
  .about-cta h2 { font-size: clamp(28px, 10vw, 56px); }
  .about-cta p { font-size: 13px; }
  .about-cta-inner [style*="display:flex"] { flex-direction: column; }
  .about-cta-inner .btn-primary,
  .about-cta-inner .btn-outline { width: 100%; justify-content: center; }

  /* ─── PRICING PAGE ─── */
  .price-hero { padding: 90px var(--pad-x) 50px; }
  .price-hero-title { font-size: clamp(32px, 12vw, 56px) !important; }
  .price-hero-sub { font-size: 14px !important; }
  .price-sec { padding: 50px var(--pad-x) 50px; }
  .pc-name { font-size: 22px; }
  .cb-inner { padding: 28px 20px; }
  .cb-inner h2 { font-size: 20px; }
  .compare-sec { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }
  th, td { padding: 10px 12px; font-size: 11px; }
  .faq-q { font-size: clamp(13px, 4vw, 16px); padding: 16px 0 8px; }
  .faq-a { font-size: 12px; }
  .price-cta { padding: 64px var(--pad-x); }
  .price-cta h2 { font-size: clamp(28px, 10vw, 56px); }
  .price-cta p  { font-size: 13px; }
  .price-cta-inner [style*="display:flex"] { flex-direction: column; }
  .price-cta-inner .btn-primary,
  .price-cta-inner .btn-outline { width: 100%; justify-content: center; }

  /* ─── TESTIMONIALS / PORTFOLIO PAGE ─── */
  .testi-hero { padding: 90px var(--pad-x) 50px; }
  .testi-hero-title { font-size: clamp(32px, 12vw, 56px) !important; }
  .testi-hero-sub { font-size: 14px !important; }
  .t-stats { padding: 36px var(--pad-x); }
  .port-sec { padding: 56px var(--pad-x); }
  .feat-body { padding: 26px 22px; }
  .feat-body h2 { font-size: clamp(20px, 6vw, 30px); }
  .feat-desc { font-size: 13px; }
  .feat-pills { gap: 5px; }
  .feat-pill  { font-size: 8px; padding: 4px 8px; }
  .feat-quote p { font-size: 13px; }
  .t-grid { grid-template-columns: 1fr; }
  .rc { width: 272px; padding: 22px 18px; }
  .rc-body { font-size: 13px; }
  .rc::before { font-size: 56px; }
  .rc-av { width: 36px; height: 36px; font-size: 13px; }
  .testi-cta { padding: 64px var(--pad-x); }
  .testi-cta h2 { font-size: clamp(28px, 10vw, 56px); }
  .testi-cta p  { font-size: 13px; }
  .testi-cta-inner [style*="display:flex"] { flex-direction: column; }
  .testi-cta-inner .btn-primary,
  .testi-cta-inner .btn-outline { width: 100%; justify-content: center; }

  /* ─── CONTACT PAGE ─── */
  .contact-hero { padding: 90px var(--pad-x) 50px; }
  .contact-hero-title { font-size: clamp(32px, 12vw, 56px) !important; }
  .contact-hero-sub { font-size: 14px !important; }
  .c-main { padding: 48px var(--pad-x) 56px; }
  .c-form-wrap { padding: 26px 20px; }
  .c-form-wrap h3 { font-size: 20px; }
  .form-row { grid-template-columns: 1fr; }
  /* Prevents iOS auto-zoom on input focus */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px !important; }
  .form-submit { font-size: 11px; padding: 15px; }
  .c-promise h4 { font-size: 17px; }
  .regions-sec { padding: 0 var(--pad-x) 56px; }
  .region-card { padding: 22px 16px; }
  .region-card h3 { font-size: 16px; }
  .region-card p  { font-size: 11px; }

  /* ─── FOOTER ─── */
  .foot-top { grid-template-columns: 1fr; padding: 44px 0 36px; }
  .foot-brand { grid-column: span 1; }
  .foot-tagline { max-width: 100%; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot-bottom-links { gap: 16px; flex-wrap: wrap; }
  .foot-copy { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT 4 — ≤ 480px  (standard phone)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-hl { font-size: clamp(30px, 13vw, 52px); }
  .wc { padding: 18px; }
  .wc-name { font-size: clamp(16px, 6.5vw, 26px) !important; }
  .tc { width: 240px; }
  .rc { width: 248px; }
  .cta-hl { font-size: clamp(28px, 13vw, 48px); }
  .pc { padding: 24px 16px; }
  .cb-inner { padding: 24px 16px; }
  .feat-body { padding: 20px 18px; }
  .c-form-wrap { padding: 22px 16px; }
  .footer-inner,
  .foot-inner { padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT 5 — ≤ 380px  (iPhone SE, small Android)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  :root { --pad-x: 16px; }
  .hero-hl { font-size: 28px; }
  .wc-name { font-size: 15px !important; }
  .ctr-num { font-size: 22px; }
  .sec-title { font-size: 24px !important; }
  .pg-hero-title,
  .ah-title,
  .price-hero-title,
  .testi-hero-title,
  .contact-hero-title { font-size: 28px !important; }
  .regions-grid { grid-template-columns: 1fr; }
  .ctr-grid { grid-template-columns: 1fr; }
  .t-stats-inner { grid-template-columns: 1fr; }
  .t-stat { border-right: none !important; }
  .rc { width: 232px; }
  .tc { width: 220px; }
}