/* Phone reading rhythm: editorial hierarchy and touch-sized actions.
   Brand hero, image collages and navigation retain their dedicated owners. */
@media (max-width:767px){
  .sobati-typography{--type-h2:26px;--type-h2-compact:24px;--type-h3:20px;--leading-heading:1.5;--leading-body:1.85}
  .service-hero .hero-heading{margin-top:0;padding-top:22px}
  .sobati-typography main .service-hero h1{font-size:clamp(30px,8.2vw,36px)!important;line-height:1.4;margin-bottom:12px}
  .sobati-typography main .service-hero .hero-heading h2{font-size:22px!important;font-weight:450!important;line-height:1.65;margin-bottom:18px}
  .sobati-typography .service-hero .hero-intro{font-size:16px!important;font-weight:380;line-height:1.9;text-align:right}
  .service-hero .hero-intro strong{font-weight:550}
  .service-hero .hero-heading .button-row{margin-top:24px;gap:10px}
  .range-intro{padding-block:40px 32px;min-height:0}
  .range-intro .eyebrow{margin-bottom:16px}
  .range-intro h2,.design-copy h2{margin-bottom:20px}
  .design-copy .button-row,.split-copy .button-row{margin-top:24px;gap:10px}
  .split-copy .small-print{margin-top:16px;line-height:1.85}
  .split-copy>.solid-button,.split-copy>.outline-button{width:100%;margin-top:24px}
  .service-questions{margin-top:24px}
  .service-question{padding-block:20px}
  .sobati-typography .service-question h3{font-size:19px;line-height:1.75;margin-bottom:10px}
  .feature-scene .feature-panel,.feature-scene[data-panel-side] .feature-panel,.feature-scene[data-feature-mode="extension"] .feature-panel{padding:28px 24px}
  .feature-panel .feature-actions{gap:10px}
  .van-app-section .button-row{gap:10px;margin-top:24px}
  .sobati-typography .van-app-section h2{margin-bottom:20px}
  /* Compact reading panels share the same comfortable edge and line rhythm. */
  .van-section__panel,.ppf-section__panel,.wrap-section__panel{padding:28px 24px}
  .sobati-typography :is(.van-section__copy,.ppf-section__copy p,.wrap-section__copy p){line-height:1.85}
  .van-section .van-section__actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px}
  .van-section .van-section__actions>.van-section__cta,.ppf-section .ppf-section__cta,.wrap-section .wrap-section__cta{width:100%;min-height:48px}
  .complex-section__content{padding:28px 24px;gap:20px}
  .complex-section__cta{width:100%;justify-self:stretch}
  .wrap-section__material::after{background:rgba(0,0,0,.55)}
  .founder-section__content{min-width:0}
  .founder-section__role{line-height:1.8}
  .founder-section__copy p+p{margin-top:16px}
  /* Agency has its own sequence, but matches the shared mobile reading scale. */
  .agency-page{--agency-title-size:26px;--agency-gutter:20px}
  .sobati-typography .recruit-hero__copy>p:not(.agency-wordmark){font-size:16px!important;line-height:1.85;font-weight:380}
  .sobati-typography main .recruit-hero h1{font-size:clamp(30px,8.2vw,36px)!important;line-height:1.5}
  .recruit-hero__copy{margin-top:0;padding-top:20px}
  .recruit-hero{padding-bottom:40px}
  .recruit-actions{gap:10px}
  .agency-page .recruit-intro__copy h2,.agency-page .recruit-editorial-copy h2,.agency-page .partner-section-heading h2,.agency-page .recruit-centered h2,.agency-page .agency-faq h2,.agency-page .recruit-closing h2{font-size:26px!important;line-height:1.55}
  .recruit-intro,.recruit-academy,.recruit-digital,.agency-app-editorial{padding-block:48px;gap:28px}
  .recruit-intro__copy>.agency-kicker,.recruit-editorial-copy>.agency-kicker{margin-bottom:12px}
  .recruit-intro__copy h2,.recruit-editorial-copy h2{margin-bottom:18px}
  .recruit-role-list{gap:16px;margin-top:24px}
  .recruit-role-list>div{padding-top:16px}
  .recruit-role-list p{font-size:14px;line-height:1.85;margin-top:8px}
  .agency-more-questions[disabled],.agency-more-questions[aria-disabled="true"]{display:none}
  .agency-faq__list details{padding-inline:16px;margin-bottom:10px}
  .agency-faq__list summary{padding-block:18px;font-size:16px;line-height:1.8;gap:12px}
  .agency-faq__list details p{padding-inline-start:0;padding-bottom:20px;line-height:1.85}
  .agency-conversion{padding-block:48px}
  .agency-province-selector,.tehran-picker__secondary{padding:22px 20px}
  .agency-page .agency-button{min-height:48px;font-size:14px}
  .agency-page .agency-text-link{font-size:14px}
  .agency-dialog .contact-dialog__copy{font-size:15px;line-height:1.85}
  /* The expandable VAN chooser must fit its first complete card on a phone.
     A dark backing replaces the costly full-banner blur on this small frame. */
  .van-section.van-section--selector-active .van-section__banner{filter:none!important}
  .van-section .van-selector{background:rgba(12,12,14,.96)}
  .van-selector .van-selector__content{padding:18px 20px 24px}
  .van-selector .van-selector__header{padding-inline:32px;margin-bottom:12px}
  .sobati-typography .van-selector .van-selector__title{font-size:20px!important;line-height:1.5}
  .van-selector .van-selector__eyebrow{font-size:8px;letter-spacing:.12em}
  .van-selector .van-selector__visual{height:clamp(112px,35vw,150px)}
  .van-selector .van-selector__choices{gap:28px}
  .van-selector .van-selector__copy{padding:8px 0 0}
  .van-selector .van-selector__name{font-size:20px;margin-bottom:6px}
  .van-selector .van-selector__request{width:100%;margin-top:12px}
  .van-selector .van-selector__close{background:rgba(12,12,14,.96);border:1px solid rgba(255,255,255,.18)}
  .site-footer__sitemap{gap:12px;padding-block:24px}
  .site-footer__sitemap-title{font-size:14px}
  .site-footer__sitemap-links a{font-size:14px}
}
@media (max-width:359px){
  .sobati-typography{--type-h2:24px;--type-h2-compact:22px}
  .sobati-typography main .service-hero .hero-heading h2{font-size:20px!important}
  .feature-scene .feature-panel,.feature-scene[data-panel-side] .feature-panel,.feature-scene[data-feature-mode="extension"] .feature-panel{padding:24px 20px}
  .van-section__panel,.ppf-section__panel,.wrap-section__panel{padding:24px 20px}
}

/* Small, static glass surfaces. Blur stays behind the controls, never on the
   header element that owns fixed menus; no animated filters or extra driver. */
@media (max-width:767px){
  .site-header.header-brand-ready,.page-header{background:transparent;isolation:isolate;-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header.header-brand-ready::before,
  .site-header.header-brand-ready.is-header-scrolled::before,
  .page-header::before,
  .agency-page .page-header::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:rgb(12,12,14);-webkit-backdrop-filter:none;backdrop-filter:none;transition:none;
  }
  .service-nav,.service-nav-wrap.is-stuck .service-nav,.agency-page .agency-local-nav{
    background:rgb(12,12,14);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .site-header.header-brand-ready::before,
    .site-header.header-brand-ready.is-header-scrolled::before,
    .page-header::before,
    .agency-page .page-header::before,
    .service-nav,.service-nav-wrap.is-stuck .service-nav,.agency-page .agency-local-nav{
      background:rgba(12,12,14,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    }
  }
}
@media (max-width:767px) and (prefers-reduced-transparency:reduce){
  .site-header.header-brand-ready::before,
  .site-header.header-brand-ready.is-header-scrolled::before,
  .page-header::before,
  .agency-page .page-header::before,
  .service-nav,.service-nav-wrap.is-stuck .service-nav,.agency-page .agency-local-nav{
    background:rgb(12,12,14);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@media (max-width:767px) and (forced-colors:active){
  .site-header.header-brand-ready::before,
  .site-header.header-brand-ready.is-header-scrolled::before,
  .page-header::before,
  .agency-page .page-header::before,
  .service-nav,.service-nav-wrap.is-stuck .service-nav,.agency-page .agency-local-nav{
    background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}