/* ==========================================================
   P19.2 — MOBILE COMPONENT REBUILD
   Presentation-only. Foundation/navigation remains P19.1.4.
   Scope: <= 860px. Loaded after mobile-foundation.css.
   ========================================================== */

@media(max-width:860px){
  /* ---------- shared mobile rhythm ---------- */
  .section{padding:46px 0}
  .section-soft{background:#f7fafc}
  .section-heading{margin-bottom:24px}
  .section-heading.center{text-align:left}
  .section-heading .eyebrow,.eyebrow{font-size:.68rem;letter-spacing:.1em}
  .section-heading h2,
  .why-copy h2,
  .faq-intro h2,
  .marka-about-content h2,
  .marka-product-request-copy h2,
  .service-scope-copy h2{
    font-size:clamp(1.55rem,5.8vw,2.15rem);line-height:1.1;letter-spacing:-.028em
  }
  .section-heading>p,.why-copy>p,.faq-intro>p,
  .service-scope-copy>p,.marka-product-request-copy>p{
    font-size:.92rem;line-height:1.55
  }
  .breadcrumbs{gap:6px;margin-bottom:14px;font-size:.72rem;white-space:normal}
  .page-hero,.page-hero.compact{padding:34px 0 30px}
  .page-hero h1{margin-bottom:10px}
  .page-hero>div>p,.page-hero-text{font-size:.94rem;line-height:1.55}

  /* ---------- home hero: mobile composition, not desktop shrink ---------- */
  .hero{padding:34px 0 26px}
  .hero-grid{gap:20px}
  .hero-badge{margin-bottom:13px;padding:6px 10px;font-size:.72rem;box-shadow:none}
  .hero h1{margin-bottom:13px}
  .hero-lead{font-size:.94rem;line-height:1.58;max-width:35rem}
  .hero-actions{margin-top:18px}
  .hero-actions .btn{min-height:40px}
  .hero-trust{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:20px
  }
  .hero-trust>div{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:5px;min-width:0;padding:10px;border:1px solid #dce8f1;border-radius:12px;background:#fff
  }
  .hero-trust .trust-icon{width:28px;height:28px;border-radius:9px}
  .hero-trust .trust-icon svg{width:15px;height:15px}
  .hero-trust strong{font-size:.72rem;line-height:1.2}
  .hero-trust small{display:none}
  .hero-side{justify-content:stretch}
  .service-request-card{
    width:100%;padding:18px;border-radius:18px;box-shadow:0 14px 34px rgba(11,31,51,.15)
  }
  .service-request-card .card-kicker{font-size:.65rem}
  .service-request-card h2{font-size:1.25rem;line-height:1.18;margin:12px 0 6px}
  .service-request-card>p{display:none}
  .quick-service-list{gap:6px;margin-top:13px}
  .quick-service-list a{min-height:40px;padding:9px 11px;border-radius:10px;font-size:.83rem}
  .quick-service-list b{font-size:1rem}
  .service-request-footer{margin-top:12px;padding-top:11px}
  .service-request-footer small{font-size:.67rem}
  .service-request-footer a{font-size:.92rem}

  /* ---------- service category cards: compact two-column catalog ---------- */
  .service-overview .section-heading{margin-bottom:26px}
  .service-group{margin-top:34px}
  .service-group:first-of-type{margin-top:0}
  .service-group-head{
    align-items:center;flex-direction:row;gap:12px;margin-bottom:13px;padding-bottom:11px
  }
  .service-group-head>div{min-width:0}
  .group-number{margin-bottom:3px;font-size:.64rem}
  .service-group-head h2,.service-group-head h3{font-size:1.2rem;margin-bottom:3px}
  .service-group-head p{font-size:.8rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .service-group-head .text-link{font-size:.75rem;flex:0 0 auto}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .service-card{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:9px;min-width:0;min-height:126px;padding:13px;border-radius:15px;box-shadow:none
  }
  .service-card:before{display:none}
  .service-card-icon{width:42px;height:42px;border-radius:12px;flex:0 0 auto}
  .service-card-icon svg{width:21px;height:21px}
  .service-card-body{min-width:0;width:100%}
  .service-card-body h2,.service-card-body h3,.service-card-body h4{
    margin:0;font-size:.86rem;line-height:1.25;overflow-wrap:anywhere
  }
  .service-card-body p{display:none}
  .service-card-arrow{display:none}

  /* ---------- why-us: compact proof strip ---------- */
  .why-grid{gap:27px}
  .why-points{gap:11px;margin-top:22px}
  .why-points>div{grid-template-columns:38px 1fr;gap:11px}
  .why-points>div>span{width:36px;height:36px;border-radius:10px;font-size:.67rem}
  .why-points strong{font-size:.9rem;margin-bottom:2px}
  .why-points small{font-size:.78rem;line-height:1.4}
  .why-panel{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-width:none}
  .why-stat,.why-stat.wide{
    grid-column:auto;min-width:0;min-height:86px;padding:12px;border-radius:14px;
    justify-content:center;align-items:flex-start;gap:3px;box-shadow:none
  }
  .why-stat strong{font-size:1.65rem}
  .why-stat>span{margin-top:3px;font-size:.68rem;line-height:1.25}
  .why-stat.wide{flex-direction:column}
  .why-stat.wide .why-stat-icon{display:none}
  .why-stat.wide strong{font-size:.78rem;line-height:1.2}
  .why-stat.wide>div span{font-size:.64rem;line-height:1.25;margin-top:3px}

  /* ---------- process cards become a vertical stepper ---------- */
  .process-grid,.service-process-grid{display:grid;grid-template-columns:1fr;gap:0}
  .process-card,.service-process-card{
    position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:12px;
    min-height:0;padding:0 0 22px;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none
  }
  .process-card:after{display:none}
  .process-card:not(:last-child):before,
  .service-process-card:not(:last-child):before{
    content:"";position:absolute;left:20px;top:39px;bottom:2px;width:2px;background:#d9e8f3
  }
  .process-card>span,.service-process-card>span{
    grid-column:1;grid-row:1/3;width:40px;height:40px;margin:0;border-radius:12px;z-index:1
  }
  .process-card h3,.service-process-card h3{
    grid-column:2;margin:1px 0 4px;font-size:1rem;line-height:1.3
  }
  .process-card p,.service-process-card p{
    grid-column:2;margin:0;font-size:.82rem;line-height:1.5
  }

  /* ---------- guides / FAQ ---------- */
  .home-guides-head{gap:0}
  .home-guides-all{font-size:.78rem}
  .guide-grid,.guide-grid.compact{grid-template-columns:1fr;gap:10px}
  .guide-card{min-height:0;padding:17px;border-radius:16px;box-shadow:none}
  .guide-card-category{margin-bottom:8px;font-size:.64rem}
  .guide-card h2,.guide-card h3{font-size:1rem;margin-bottom:7px}
  .guide-card p{margin-bottom:12px;font-size:.82rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .guide-card-link{font-size:.78rem}
  .faq-grid{gap:18px}
  .faq-list{gap:7px}
  .faq-list details{border-radius:12px;padding:0 14px}
  .faq-list summary{padding:15px 28px 15px 0;font-size:.88rem;line-height:1.35}
  .faq-list summary:after{top:12px}
  .faq-list details p{padding:0 25px 15px 0;font-size:.82rem;line-height:1.5}

  /* ---------- service landing hero / detail components ---------- */
  .service-landing-hero{padding:34px 0 28px}
  .service-landing-hero-grid{grid-template-columns:1fr;gap:17px}
  .service-landing-copy h1{margin-bottom:11px}
  .service-landing-copy>p{font-size:.93rem;line-height:1.55}
  .service-landing-copy .page-hero-actions{margin-top:18px}
  .service-hero-trust{gap:6px;margin-top:17px}
  .service-hero-trust span{padding:6px 8px;font-size:.7rem}
  .service-hero-trust svg{width:14px;height:14px}
  .service-landing-icon-panel{
    min-height:0;padding:14px 15px;border-radius:16px;box-shadow:none;
    display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 11px;align-items:center
  }
  .service-landing-big-icon{
    grid-column:1;grid-row:1/3;width:44px;height:44px;margin:0;border-radius:12px
  }
  .service-landing-big-icon svg{width:22px;height:22px}
  .service-landing-icon-panel small{grid-column:2;font-size:.6rem}
  .service-landing-icon-panel strong{grid-column:2;margin:0;font-size:1rem;line-height:1.2}
  .service-landing-icon-panel p{display:none}
  .service-fault-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .service-fault-card{min-height:82px;padding:12px;border-radius:13px;gap:8px;box-shadow:none}
  .service-fault-card span{width:28px;height:28px;border-radius:8px;font-size:.62rem}
  .service-fault-card strong{font-size:.8rem;line-height:1.35;padding-top:3px}
  .service-scope-layout{gap:20px}
  .service-scope-grid{grid-template-columns:1fr;gap:7px;margin-top:18px}
  .service-scope-grid>div{padding:10px 11px;border-radius:11px}
  .service-scope-grid>div>span{width:32px;height:32px;border-radius:9px}
  .service-scope-grid strong{font-size:.82rem}
  .service-safe-box{padding:17px;border-radius:16px;box-shadow:none}
  .service-safe-box h3{font-size:1.08rem;margin-bottom:11px}
  .service-safe-box ol{gap:7px;font-size:.82rem;line-height:1.45}
  .service-safety-note{grid-template-columns:30px 1fr;gap:8px;margin-top:15px;padding:11px;border-radius:11px}
  .service-safety-note>svg{width:20px;height:20px}
  .service-safety-note p{font-size:.75rem;line-height:1.45}
  .service-region-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .service-region-grid>a{
    min-height:74px;padding:11px;border-radius:12px;grid-template-columns:34px 1fr;column-gap:8px
  }
  .service-region-grid>a>span{width:34px;height:34px;border-radius:9px}
  .service-region-grid svg{width:17px;height:17px}
  .service-region-grid strong{font-size:.82rem;line-height:1.25}
  .service-region-grid small{display:none}
  .service-section-head{gap:0}
  .service-section-head>.text-link{margin:-10px 0 18px;font-size:.78rem}
  .service-guide-grid.is-single .service-guide-card{
    grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px;border-radius:15px
  }
  .service-guide-grid.is-single .service-guide-icon{width:42px;height:42px;border-radius:11px}
  .service-guide-grid.is-single .service-guide-icon svg{width:20px;height:20px}
  .service-guide-grid.is-single .service-guide-card h3{font-size:1rem}
  .service-guide-grid.is-single .service-guide-card p{font-size:.8rem}
  .service-guide-grid.is-single .service-guide-cta,
  .service-guide-grid:not(.is-single) .service-guide-cta{
    grid-column:1/-1;min-height:38px;width:100%;margin-top:0;border-radius:10px;font-size:.76rem
  }
  .service-final-cta{padding:34px 0}
  .service-final-cta-inner{gap:17px}
  .service-final-cta h2{font-size:1.6rem}
  .service-final-cta p{font-size:.86rem}

  /* ---------- brand archive: logo-first two-column catalog ---------- */
  .marka-main-hero,.marka-brand-hero,.marka-product-hero{padding:34px 0 30px}
  .marka-main-hero-grid,.marka-brand-hero-grid,.marka-product-hero-grid{gap:17px}
  .marka-main-hero-grid>div:first-child>p,
  .marka-brand-copy>p,.marka-product-hero-grid>div:first-child>p{font-size:.93rem;line-height:1.55}
  .marka-main-stat{
    min-height:78px;padding:13px 15px;border-radius:15px;box-shadow:none;
    display:grid;grid-template-columns:42px auto 1fr;gap:10px;align-items:center;justify-content:start
  }
  .marka-main-stat>span{width:40px;height:40px;margin:0;border-radius:11px}
  .marka-main-stat svg{width:20px;height:20px}
  .marka-main-stat strong{font-size:1.8rem}
  .marka-main-stat small{margin:0;font-size:.7rem;line-height:1.25}
  .marka-filter-panel{gap:10px;margin:-4px 0 18px;padding:12px;border-radius:14px;box-shadow:none}
  .marka-search-row{grid-template-columns:minmax(0,1fr) auto;gap:7px}
  .marka-search-row input{min-height:42px;padding:0 12px;border-radius:10px;font-size:16px}
  .marka-result-count{min-width:64px;padding:7px 8px;font-size:.68rem}
  .marka-alpha-filter{gap:5px;padding-bottom:3px}
  .marka-alpha-filter button{min-width:31px;height:31px;padding:0 7px;border-radius:8px;font-size:.7rem}
  .marka-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .marka-card{min-width:0;border-radius:15px;box-shadow:none}
  .marka-card-main{
    display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;padding:11px;text-align:center
  }
  .marka-logo--card{
    width:100%;height:54px;padding:7px 10px;border:0;border-radius:10px;background:#fff
  }
  .marka-card-main>div{min-width:0}
  .marka-card-main small,.marka-card-main p{display:none}
  .marka-card-main h2{
    margin:0;font-size:.84rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .marka-card-meta{
    justify-content:center;padding:7px 9px;border-top:1px solid #e7eef3;background:#fafcfd;font-size:.66rem
  }
  .marka-card-meta a{display:none}

  /* brand and brand×product identity cards */
  .marka-brand-panel,.marka-product-identity{
    min-height:0;padding:14px;border-radius:16px;box-shadow:none;justify-content:flex-start
  }
  .marka-logo--hero{width:min(100%,170px);height:72px;padding:10px 14px;margin-bottom:9px;border-radius:12px}
  .marka-logo--product{width:min(100%,160px);height:68px;padding:9px 13px;margin-bottom:8px;border-radius:12px}
  .marka-brand-panel small,.marka-product-identity small{font-size:.6rem}
  .marka-brand-panel strong,.marka-product-identity strong{font-size:1.05rem}
  .marka-brand-panel p{margin-top:4px;font-size:.76rem}
  .marka-product-brand{margin-bottom:10px;padding:6px 9px;font-size:.65rem}
  .marka-product-large-icon{width:46px;height:46px;margin-bottom:9px;border-radius:12px}
  .marka-product-large-icon svg{width:23px;height:23px}
  .marka-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .marka-product-card{
    min-height:112px;padding:12px;border-radius:14px;display:flex;flex-direction:column;align-items:flex-start;gap:7px
  }
  .marka-product-icon{width:38px;height:38px;border-radius:10px}
  .marka-product-icon svg{width:19px;height:19px}
  .marka-product-card small{display:none}
  .marka-product-card strong{font-size:.82rem;line-height:1.3}
  .marka-product-card p{display:none}
  .marka-product-arrow{display:none}
  .marka-about-layout,.marka-product-request-layout{gap:23px}
  .marka-process-mini{grid-template-columns:1fr;gap:0;margin-top:20px}
  .marka-process-mini>div{
    position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:10px;
    padding:0 0 18px;border:0;border-radius:0;background:transparent
  }
  .marka-process-mini>div:not(:last-child):before{
    content:"";position:absolute;left:18px;top:35px;bottom:2px;width:2px;background:#d9e8f3
  }
  .marka-process-mini span{grid-column:1;grid-row:1/3;width:36px;height:36px;margin:0;border-radius:10px;z-index:1}
  .marka-process-mini strong{grid-column:2;font-size:.86rem}
  .marka-process-mini p{grid-column:2;margin-top:3px;font-size:.76rem;line-height:1.4}
  .marka-contact-quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
  .marka-contact-quick>a{min-width:0;padding:11px;border-radius:11px;gap:8px}
  .marka-contact-quick>a>svg{width:20px;height:20px;flex:0 0 auto}
  .marka-contact-quick small{font-size:.62rem}
  .marka-contact-quick strong{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* ---------- forms ---------- */
  .sy-request-form-wrap,.sy-request-form-wrap.is-compact{padding:17px;border-radius:16px;box-shadow:none}
  .sy-request-head h2{font-size:1.2rem;margin-bottom:6px}
  .sy-request-head p{margin-bottom:15px;font-size:.82rem;line-height:1.45}
  .sy-request-grid{grid-template-columns:1fr;gap:9px}
  .sy-request-problem{grid-column:auto}
  .sy-request-grid label{gap:4px}
  .sy-request-grid label>span{font-size:.7rem}
  .sy-request-grid input,.sy-request-grid select,.sy-request-grid textarea{
    min-height:44px;padding:9px 10px;border-radius:10px
  }
  .sy-request-grid textarea{min-height:102px}
  .sy-request-consent{margin:10px 0 13px;font-size:.7rem;line-height:1.4}
  .sy-request-actions{gap:8px}
  .sy-request-actions .btn{min-height:42px}

  /* ---------- generic content / regions / contact ---------- */
  .content-layout{gap:16px}
  .article-card{padding:20px;border-radius:16px;box-shadow:none}
  .sidebar-card{padding:18px;border-radius:15px;box-shadow:none}
  .entry-content h2,.entry-content h3{margin-top:1.35em}
  .posts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .post-card{min-width:0;padding:13px;border-radius:14px;box-shadow:none}
  .post-card-icon{width:38px;height:38px;margin-bottom:11px;border-radius:10px}
  .post-card-icon svg{width:19px;height:19px}
  .post-card h2{font-size:.88rem;line-height:1.3;margin-bottom:7px}
  .post-card p{display:none}
  .post-card .text-link{font-size:.7rem;white-space:normal}
  .geo-service-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .geo-service-links a{justify-content:center;min-width:0;padding:8px 7px;border-radius:10px;font-size:.72rem;text-align:center}
  .contact-grid{grid-template-columns:1fr;gap:9px}
  .contact-card{
    display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:11px;align-items:center;
    padding:14px;border-radius:14px;box-shadow:none
  }
  .contact-icon{grid-column:1;grid-row:1/4;width:40px;height:40px;margin:0;border-radius:11px}
  .contact-icon svg{width:20px;height:20px}
  .contact-card small,.contact-card h2,.contact-card p{grid-column:2}
  .contact-card small{font-size:.66rem}
  .contact-card h2{font-size:.95rem;margin:1px 0 2px;overflow-wrap:anywhere}
  .contact-card p{font-size:.76rem;line-height:1.35}

  /* ---------- prefooter + footer: much shorter on mobile ---------- */
  .prefooter-cta{padding:30px 0}
  .prefooter-inner{gap:16px}
  .prefooter-inner h2{font-size:1.45rem;margin-bottom:7px}
  .prefooter-inner p{font-size:.82rem;line-height:1.45}
  .prefooter-actions{gap:7px}
  .site-footer{padding:32px 0 18px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
  .footer-brand{grid-column:1/-1}
  .footer-logo{width:min(100%,210px);margin-bottom:9px}
  .footer-logo img{max-height:58px}
  .footer-brand p{max-width:31rem;font-size:.78rem;line-height:1.5}
  .site-footer h3{margin-bottom:9px;font-size:.82rem}
  .footer-links,.footer-contact{gap:6px;font-size:.75rem}
  .footer-contact strong{font-size:.6rem}
  .footer-bottom{margin-top:22px;padding-top:13px;font-size:.68rem;line-height:1.35}
  .footer-bottom span:last-child{display:none}
}

@media(max-width:620px){
  /* Sticky mobile bar already owns call/WhatsApp conversion. Remove duplicates. */
  .hero-actions{display:none}
  .service-landing-copy .page-hero-actions{display:none}
  .service-parent-hero .page-hero-actions{display:none}
  .service-final-actions{display:none}
  .prefooter-actions{display:none}
  .sidebar-card{display:none}

  /* Brand archive keeps only the primary request action; call/WA live in sticky bar. */
  .marka-main-hero .page-hero-actions{margin-top:16px}
  .marka-main-hero .page-hero-actions .btn{display:none}
  .marka-main-hero .page-hero-actions .btn:first-child{display:inline-flex;width:100%;justify-content:center}

  .marka-brand-hero .page-hero-actions,
  .marka-product-hero .page-hero-actions{display:none}

  .section{padding:42px 0}
  .service-group-head p{display:none}
  .service-request-card{padding:16px}
  .marka-filter-bar label{font-size:.68rem}
  .marka-alpha-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .marka-alpha-filter::-webkit-scrollbar{display:none}
  .service-final-cta{padding:28px 0}
  .footer-grid>div:nth-child(3){display:block}
}

@media(max-width:380px){
  .section{padding:38px 0}
  .hero{padding:29px 0 23px}
  .hero-trust{gap:5px}
  .hero-trust>div{padding:8px}
  .hero-trust strong{font-size:.67rem}
  .service-grid,.marka-grid,.marka-product-grid,.posts-grid,.service-region-grid{gap:7px}
  .service-card{min-height:120px;padding:11px}
  .service-card-icon{width:39px;height:39px}
  .service-card-body h2,.service-card-body h3,.service-card-body h4{font-size:.8rem}
  .marka-card-main{padding:9px}
  .marka-logo--card{height:50px}
  .marka-card-main h2{font-size:.78rem}
  .marka-card-meta{padding:6px 7px;font-size:.62rem}
  .why-stat,.why-stat.wide{padding:10px;min-height:80px}
  .why-stat strong{font-size:1.5rem}
  .why-stat.wide strong{font-size:.7rem}
  .service-fault-card{padding:10px;gap:6px}
  .service-fault-card strong{font-size:.75rem}
  .service-region-grid strong{font-size:.76rem}
  .footer-grid{gap:18px 14px}
}

@media(prefers-reduced-motion:reduce){
  .service-card,.marka-card,.marka-product-card,.guide-card,.post-card{transform:none!important}
}