/* =========================================================
   FARVAHAR MOBILE FINAL FIX v1.0.0
   Exact root cause:
   A later desktop "Refined Matcha" CSS layer re-declared
   grid-template-columns AFTER the original mobile media rules.
   On iPhone, Hero/About/Quick sections therefore remained desktop
   grids, causing squeezed columns, clipped content and huge blank areas.
   This file loads LAST and restores the intended mobile layout.
   ========================================================= */

@media (max-width: 860px) {

  html,
  body,
  body.fv4-home,
  .fv4-main{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .fv4-shell{
    width:min(calc(100% - 28px),1320px)!important;
    max-width:100%!important;
  }

  /* ---------- HEADER ---------- */
  .fv4-header{
    overflow:visible!important;
  }
  .fv4-header__main{
    min-height:76px!important;
    grid-template-columns:minmax(132px,190px) 1fr!important;
    gap:10px!important;
  }
  .fv4-desktop-nav{
    display:none!important;
  }
  .fv4-header__actions{
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:0!important;
  }
  .fv4-menu-toggle{
    display:inline-block!important;
    order:-1;
  }
  .fv4-header-track span,
  .fv4-header__actions > .fv4-btn{
    display:none!important;
  }

  /* ---------- HERO: TRUE SINGLE COLUMN ---------- */
  .fv4-hero{
    padding:48px 0 64px!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .fv4-hero__grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:32px!important;
    align-items:start!important;
  }
  .fv4-hero__copy{
    width:100%!important;
    max-width:none!important;
    text-align:start!important;
  }
  .fv4-kicker{
    justify-content:flex-start!important;
  }
  .fv4-hero__copy h1{
    width:100%!important;
    max-width:100%!important;
    margin-inline:0!important;
    font-size:clamp(34px,9vw,46px)!important;
    line-height:1.28!important;
  }
  html[dir="rtl"] .fv4-hero__copy h1{
    font-size:clamp(34px,9vw,44px)!important;
    line-height:1.55!important;
  }
  .fv4-hero__copy > p{
    width:100%!important;
    max-width:100%!important;
    margin-inline:0!important;
    font-size:13.5px!important;
    line-height:1.95!important;
  }
  .fv4-hero__actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
    margin-bottom:24px!important;
  }
  .fv4-hero__actions .fv4-btn{
    width:100%!important;
    min-width:0!important;
    padding-inline:12px!important;
  }

  /* compact trust statistics */
  .fv4-hero__trust{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-top:18px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    text-align:center!important;
  }
  .fv4-hero__trust > div,
  .fv4-hero__trust > div + div{
    display:block!important;
    padding:3px 10px!important;
    border-bottom:0!important;
    border-inline-start:1px solid rgba(13,42,33,.10)!important;
  }
  .fv4-hero__trust > div:first-child{
    border-inline-start:0!important;
  }
  .fv4-hero__trust strong{
    display:block!important;
    margin-bottom:5px!important;
    font-size:21px!important;
  }
  .fv4-hero__trust span{
    display:block!important;
    font-size:8.5px!important;
    line-height:1.45!important;
  }

  /* image now sits below the text rather than beside it */
  .fv4-hero__visual{
    width:100%!important;
    min-height:340px!important;
    height:340px!important;
    margin:0!important;
    position:relative!important;
  }
  .fv4-hero__figure,
  html[dir="rtl"] .fv4-hero__figure{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border-radius:24px 24px 62px 24px!important;
  }
  html[dir="rtl"] .fv4-hero__figure{
    border-radius:24px 24px 24px 62px!important;
  }
  .fv4-hero__figure img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .fv4-hero__badge--top{
    top:18px!important;
    inset-inline-start:12px!important;
    max-width:170px!important;
    padding:11px 12px!important;
  }
  .fv4-hero__badge--bottom{
    display:none!important;
  }

  /* ---------- QUICK ACTIONS ---------- */
  .fv4-quick{
    margin-top:-22px!important;
    position:relative!important;
    z-index:10!important;
  }
  .fv4-quick__grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
    width:100%!important;
  }
  .fv4-quick__item{
    width:100%!important;
    min-height:auto!important;
    padding:20px!important;
    border-inline-end:0!important;
    border-bottom:1px solid rgba(13,42,33,.09)!important;
  }
  .fv4-quick__item:last-child{
    border-bottom:0!important;
  }
  .fv4-track-form{
    width:100%!important;
  }

  /* ---------- ABOUT: FIX THE GIANT BLANK AREA ---------- */
  .fv4-about{
    overflow:hidden!important;
  }
  .fv4-about__grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:34px!important;
  }
  .fv4-about__media{
    order:1!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:330px!important;
    margin:0!important;
    position:relative!important;
  }
  .fv4-about__copy{
    order:2!important;
    width:100%!important;
    max-width:100%!important;
    text-align:start!important;
  }
  .fv4-about__copy .fv4-kicker{
    justify-content:flex-start!important;
  }
  .fv4-about__main-image,
  html[dir="rtl"] .fv4-about__main-image{
    inset:0 34px 36px 0!important;
    width:calc(100% - 34px)!important;
    height:calc(100% - 36px)!important;
    border-radius:22px 22px 58px 22px!important;
    object-fit:cover!important;
  }
  html[dir="rtl"] .fv4-about__main-image{
    inset:0 0 36px 34px!important;
    border-radius:22px 22px 22px 58px!important;
  }
  .fv4-about__small-image{
    width:112px!important;
    height:112px!important;
    inset-inline-end:0!important;
    bottom:0!important;
    border-radius:18px!important;
  }
  .fv4-about__experience{
    top:18px!important;
    inset-inline-start:8px!important;
    width:120px!important;
    padding:13px!important;
  }
  .fv4-about__experience strong{
    font-size:25px!important;
  }

  /* ---------- GLOBAL SECTION GRIDS ---------- */
  .fv4-section{
    padding:64px 0!important;
  }
  .fv4-section-heading{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:15px!important;
    margin-bottom:28px!important;
    text-align:start!important;
  }
  .fv4-section-heading .fv4-kicker{
    justify-content:flex-start!important;
  }
  .fv4-section-heading h2,
  .fv4-section-heading > p{
    max-width:100%!important;
    margin-inline:0!important;
  }

  .fv4-services__grid,
  .fv4-companies__grid,
  .fv4-insights__grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  .fv4-service-card,
  .fv4-service-card:nth-child(4),
  .fv4-service-card:nth-child(5),
  .fv4-service-card:last-child,
  .fv4-post-card:last-child{
    grid-column:auto!important;
  }

  /* impact stats: compact 2 x 2 */
  .fv4-impact__grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    min-height:0!important;
    padding-block:10px!important;
  }
  .fv4-impact__grid > div{
    padding:18px 10px!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }
  .fv4-impact__grid > div:nth-child(odd){
    border-inline-end:1px solid rgba(255,255,255,.12)!important;
  }
  .fv4-impact__grid > div:nth-last-child(-n+2){
    border-bottom:0!important;
  }

  /* routes */
  .fv4-routes{
    padding:68px 0!important;
  }
  .fv4-routes__grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:30px!important;
    text-align:start!important;
  }
  .fv4-routes__copy .fv4-kicker{
    justify-content:flex-start!important;
  }
  .fv4-routes__copy > p{
    margin-inline:0!important;
  }
  .fv4-routes__visual{
    min-height:300px!important;
    height:auto!important;
    width:100%!important;
  }

  /* why */
  .fv4-why__grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .fv4-why__grid article{
    min-height:auto!important;
    border-inline-end:0!important;
  }

  /* founder */
  .fv4-founder{
    padding-top:64px!important;
  }
  .fv4-founder__grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:26px!important;
    min-height:0!important;
  }
  .fv4-founder__portrait{
    width:min(280px,78vw)!important;
    height:330px!important;
    margin-inline:auto!important;
  }
  .fv4-founder blockquote{
    margin-bottom:30px!important;
    text-align:center!important;
  }

  /* CTA */
  .fv4-cta{
    padding:50px 0!important;
  }
  .fv4-cta__inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
    text-align:center!important;
  }
  .fv4-cta__actions{
    justify-content:center!important;
  }

  /* footer */
  .fv4-footer__grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:32px!important;
  }
  .fv4-footer__contact{
    grid-column:auto!important;
    display:block!important;
  }

  /* remove mobile-only decorative layers that can create visual overflow */
  .fv4-hero__media:after,
  .fv4-hero__visual:after,
  .fvcmp-hero__media:after,
  .fvcmp-about-hero__media:after{
    display:none!important;
  }
}

@media (max-width: 600px) {

  .fv4-shell{
    width:calc(100% - 24px)!important;
  }

  /* header stays readable with the new horizontal logo */
  .fv4-header__main{
    grid-template-columns:134px minmax(0,1fr)!important;
    min-height:72px!important;
  }
  .fv4-brand{
    width:128px!important;
    max-width:128px!important;
    height:50px!important;
  }
  .fv4-language,
  .fv4-header-track,
  .fv4-menu-toggle{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    padding:8px!important;
  }

  .fv4-hero{
    padding-top:36px!important;
  }
  .fv4-hero__copy h1,
  html[dir="rtl"] .fv4-hero__copy h1{
    font-size:33px!important;
  }
  .fv4-hero__actions{
    grid-template-columns:1fr!important;
  }
  .fv4-hero__visual{
    min-height:300px!important;
    height:300px!important;
  }

  .fv4-about__media{
    height:285px!important;
  }
  .fv4-about__small-image{
    width:96px!important;
    height:96px!important;
  }
  .fv4-about__experience{
    width:108px!important;
  }

  .fv4-about__copy h2,
  .fv4-section-heading h2,
  .fv4-routes h2,
  .fv4-cta h2{
    font-size:28px!important;
  }

  .fv4-service-card{
    min-height:360px!important;
  }

  .fv4-routes__visual{
    min-height:260px!important;
  }

  .fv4-impact strong{
    font-size:25px!important;
  }
  .fv4-impact span{
    font-size:8.5px!important;
  }
}

/* tiny phones */
@media (max-width: 380px) {
  .fv4-header__main{
    grid-template-columns:116px minmax(0,1fr)!important;
  }
  .fv4-brand{
    width:112px!important;
    max-width:112px!important;
  }
  .fv4-header__actions{
    gap:4px!important;
  }
  .fv4-language,
  .fv4-header-track,
  .fv4-menu-toggle{
    width:37px!important;
    height:37px!important;
    min-width:37px!important;
  }
  .fv4-hero__trust span{
    font-size:7.8px!important;
  }
}