/* TehranWeb English Layout v1.0.0
 * Scoped to HTML lang=en. Does not change Persian/Turkish pages, text, data,
 * photographs, brand marks, background imagery or non-directional SVGs.
 * Overrides only directional layout established by the Persian-first theme.
 */
html[lang^="en"] body { direction: ltr; }
html[lang^="en"] .tw-main { direction: ltr; }

/* Global header: English reading order is brand | navigation | actions. */
@media (min-width: 901px) {
  html[lang^="en"] .tw-header .tw-header__inner {
    direction: ltr !important;
    grid-template-areas: "brand nav tools" !important;
  }
  html[lang^="en"] .tw-header .tw-brand { justify-self: start !important; direction: ltr !important; }
  html[lang^="en"] .tw-header .tw-header__tools { justify-self: end !important; direction: ltr !important; }
}
html[lang^="en"] .tw-header .tw-nav--desktop,
html[lang^="en"] .tw-header .tw-nav__list,
html[lang^="en"] .tw-header .tw-nav__list ul,
html[lang^="en"] .tw-header .tw-header-consultation,
html[lang^="en"] .tw-header .tw-account-control {
  direction: ltr !important;
}
html[lang^="en"] .tw-header .tw-nav__sub-menu,
html[lang^="en"] .tw-header .sub-menu { text-align: left; direction: ltr; }

@media (max-width: 900px) {
  html[lang^="en"] .tw-header .tw-header__inner {
    grid-template-areas: "brand tools" !important;
    direction: ltr !important;
  }
  html[lang^="en"] .tw-header .tw-brand { justify-self: start !important; direction: ltr !important; }
  html[lang^="en"] .tw-header .tw-header__tools { justify-self: end !important; direction: ltr !important; }
  html[lang^="en"] .tw-mobile-menu__panel {
    direction: ltr !important;
    text-align: left !important;
    left: auto !important;
    right: 0 !important;
  }
  html[lang^="en"] .tw-mobile-menu__brand-logo { margin: 0 auto 1rem 0 !important; }
  html[lang^="en"] .tw-language-compact__menu { left: auto !important; right: 0 !important; }
}

/* Existing account dialog has its own RTL declaration in theme CSS. */
html[lang^="en"] .tw-account-dialog,
html[lang^="en"] .tw-account-dialog__shell,
html[lang^="en"] .tw-account-dialog__header,
html[lang^="en"] .tw-account-dialog__form,
html[lang^="en"] .tw-account-dialog__panel { direction: ltr !important; text-align: left; }
html[lang^="en"] .tw-account-dialog :is(input, textarea, select) { direction: ltr !important; text-align: left !important; }
html[lang^="en"] .tw-account-dialog__header p { text-align: left !important; }

/* FOOTER - current desktop template uses absolute physical positions; retain
 * those approved positions, and correct reading flow inside each column.
 * Moving columns/brand pictures would disrupt a layout that already works.
 */
html[lang^="en"] .tw-footer--acf,
html[lang^="en"] .tw-footer--acf .tw-footer__grid,
html[lang^="en"] .tw-footer--acf .tw-footer__brand,
html[lang^="en"] .tw-footer--acf .tw-footer__column,
html[lang^="en"] .tw-footer--acf .tw-footer__quick,
html[lang^="en"] .tw-footer--acf .tw-footer__services,
html[lang^="en"] .tw-footer--acf .tw-footer__contact,
html[lang^="en"] .tw-footer--acf .tw-footer__links,
html[lang^="en"] .tw-footer--acf .tw-footer__contact-list,
html[lang^="en"] .tw-footer--acf .tw-footer__contact-list li,
html[lang^="en"] .tw-footer--acf .tw-footer__socials,
html[lang^="en"] .tw-footer--acf .tw-footer__bottom-inner,
html[lang^="en"] .tw-footer--acf .tw-footer__copyright,
html[lang^="en"] .tw-footer--acf .tw-footer__legal {
  direction: ltr !important;
}
html[lang^="en"] .tw-footer--acf :is(.tw-footer__brand, .tw-footer__column, .tw-footer__quick, .tw-footer__services, .tw-footer__contact, .tw-footer__heading, .tw-footer__tagline, .tw-footer__links, .tw-footer__contact-list, .tw-footer__contact-list li) {
  text-align: left !important;
}
html[lang^="en"] .tw-footer--acf .tw-footer__links li,
html[lang^="en"] .tw-footer--acf .tw-footer__contact-list li { justify-content: flex-start; }
html[lang^="en"] .tw-footer--acf .tw-footer__heading::after {
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}
html[lang^="en"] .tw-footer--acf .tw-footer__socials { direction: ltr !important; }
html[lang^="en"] .tw-footer--acf .tw-footer__contact-list a[dir="ltr"] {
  direction: ltr !important;
  unicode-bidi: isolate;
  text-align: left !important;
}
html[lang^="en"] .tw-footer--acf .tw-footer__legal { direction: ltr !important; }
html[lang^="en"] .tw-footer--acf .tw-footer__copyright-years { direction: ltr !important; unicode-bidi: isolate; }
@media (min-width: 1121px) {
  html[lang^="en"] .tw-footer--acf .tw-footer__brand-link,
  html[lang^="en"] .tw-footer--acf .tw-footer__logo { justify-content: flex-start !important; }
  html[lang^="en"] .tw-footer--acf .tw-footer__logo img {
    left: 0 !important; right: auto !important;
    object-position: left top !important;
    transform-origin: left top !important;
  }
  html[lang^="en"] .tw-footer--acf .tw-footer__brand,
  html[lang^="en"] .tw-footer--acf .tw-footer__quick,
  html[lang^="en"] .tw-footer--acf .tw-footer__services,
  html[lang^="en"] .tw-footer--acf .tw-footer__contact {
    direction: ltr !important; text-align: left !important;
  }
}
@media (min-width: 721px) and (max-width: 1120px) {
  html[lang^="en"] .tw-footer--acf .tw-footer__brand-link,
  html[lang^="en"] .tw-footer--acf .tw-footer__logo { justify-content: flex-start !important; }
  html[lang^="en"] .tw-footer--acf .tw-footer__logo img {
    object-position: left center !important;
    transform-origin: left center !important;
  }
}
@media (max-width: 720px) {
  /* Preserve the centered brand and social buttons on narrow screens. */
  html[lang^="en"] .tw-footer--acf .tw-footer__brand,
  html[lang^="en"] .tw-footer--acf .tw-footer__tagline {
    text-align: center !important;
  }
  html[lang^="en"] .tw-footer--acf .tw-footer__socials { justify-content: center !important; }
  html[lang^="en"] .tw-footer--acf .tw-footer__quick .tw-footer__heading,
  html[lang^="en"] .tw-footer--acf .tw-footer__services .tw-footer__heading,
  html[lang^="en"] .tw-footer--acf .tw-footer__contact .tw-footer__heading {
    text-align: left !important;
  }
  html[lang^="en"] .tw-footer--acf .tw-footer__legal,
  html[lang^="en"] .tw-footer--acf .tw-footer__copyright {
    text-align: center !important;
    justify-content: center !important;
  }
  html[lang^="en"] .tw-footer--acf .tw-footer__contact-list li {
    direction: ltr !important;
    text-align: left !important;
    padding-inline-start: .45rem !important;
    padding-inline-end: .8rem !important;
  }
}
@media (max-width: 460px) {
  html[lang^="en"] .tw-footer--acf .tw-footer__contact-list li {
    padding-inline-start: .35rem !important;
    padding-inline-end: .35rem !important;
  }
}

/* HOME: sections explicitly define RTL even while the document is LTR. */
html[lang^="en"] .tw-home-sequence,
html[lang^="en"] #hero,
html[lang^="en"] #services,
html[lang^="en"] #process,
html[lang^="en"] #start-project,
html[lang^="en"] #portfolio,
html[lang^="en"] #statistics,
html[lang^="en"] #testimonials,
html[lang^="en"] #cta { direction: ltr !important; }

/* Hero media is on the left in Persian; English desktop content begins left. */
html[lang^="en"] .tw-reference-hero__content {
  direction: ltr !important;
  text-align: left !important;
}
html[lang^="en"] .tw-reference-hero__features { direction: ltr !important; }
@media (min-width: 901px) {
  html[lang^="en"] .tw-reference-hero__media {
    inset: 0 0 0 auto !important;
  }
  html[lang^="en"] .tw-reference-hero__shade {
    background:
      linear-gradient(270deg, rgba(2,13,22,.04) 0%, rgba(2,13,22,.10) 37%, rgba(2,13,22,.70) 53%, #03111d 63%, #03111d 100%),
      linear-gradient(180deg, rgba(2,13,22,.12) 0%, rgba(2,13,22,0) 28%, rgba(2,13,22,.12) 100%) !important;
  }
  html[lang^="en"] .tw-reference-hero__layout { grid-template-columns: 54% 46% !important; direction: ltr !important; }
  html[lang^="en"] .tw-reference-hero__content {
    grid-column: 1 !important;
    padding-inline-start: clamp(.5rem, 2vw, 1.75rem) !important;
    padding-inline-end: clamp(1.2rem, 3vw, 3rem) !important;
  }
  html[lang^="en"] .tw-reference-hero__description {
    margin-left: 0 !important; margin-right: auto !important;
  }
}
@media (min-width: 901px) and (max-width: 1120px) {
  html[lang^="en"] .tw-reference-hero__layout { grid-template-columns: 58% 42% !important; }
}
@media (max-width: 900px) {
  /* The mobile hero already has a correct stacked, centered composition. */
  html[lang^="en"] .tw-reference-hero__content { text-align: center !important; }
  html[lang^="en"] .tw-reference-hero__description,
  html[lang^="en"] .tw-reference-hero__eyebrow,
  html[lang^="en"] .tw-reference-hero__title { text-align: center !important; }
}

/* Cards are intentionally centered; change only their reading order. */
html[lang^="en"] #services .tw-services__grid,
html[lang^="en"] #process .tw-process__timeline,
html[lang^="en"] #portfolio .tw-portfolio__grid,
html[lang^="en"] #statistics .tw-statistics-reference__grid {
  direction: ltr !important;
}
html[lang^="en"] #portfolio .tw-portfolio-card__body,
html[lang^="en"] #portfolio .tw-portfolio-card__category { text-align: left !important; direction: ltr !important; }
html[lang^="en"] #portfolio .tw-portfolio-card__link {
  left: auto !important; right: 1.25rem !important;
}
@media (max-width: 680px) {
  html[lang^="en"] #portfolio .tw-portfolio-card__link { right: 1rem !important; }
}

/* Process: 01 -> 05 runs left-to-right on desktop; only horizontal arrows
 * reverse. The mobile vertical arrows remain pointing down. */
@media (min-width: 42.01rem) {
  html[lang^="en"] #process .tw-process__connector--after::after {
    border-right: 0 !important;
    border-left: .46rem solid #08c1df !important;
  }
}
@media (max-width: 42rem) {
  html[lang^="en"] #process .tw-process__step { text-align: left !important; }
}

/* Start Project: existing left form/right image is already right for English.
 * Preserve its grid and media. Fix form flow, chevron and benefit text only. */
html[lang^="en"] #start-project .tw-start-project__content,
html[lang^="en"] #start-project .tw-start-project__fields,
html[lang^="en"] #start-project .tw-start-project__benefits,
html[lang^="en"] #start-project .tw-start-project__benefit-copy {
  direction: ltr !important;
}
html[lang^="en"] #start-project .tw-start-project__benefit-copy { text-align: left !important; }
html[lang^="en"] #start-project .tw-start-project__field :is(input, select, textarea) {
  direction: ltr !important;
  text-align: left !important;
}
html[lang^="en"] #start-project .tw-start-project__field input::placeholder { text-align: left !important; }
html[lang^="en"] #start-project .tw-start-project__field select {
  padding-left: 1rem !important;
  padding-right: 2.8rem !important;
}
html[lang^="en"] #start-project .tw-start-project__field--select svg {
  left: auto !important; right: 1.05rem !important;
}
html[lang^="en"] #start-project .tw-start-project__benefit + .tw-start-project__benefit {
  border-right: 0 !important;
  border-left: 1px solid rgba(137,172,187,.17) !important;
}
@media (max-width: 680px) {
  html[lang^="en"] #start-project .tw-start-project__benefit + .tw-start-project__benefit {
    border-left: 0 !important;
  }
}

/* Statistics/testimonials: centered headings remain centered, items read LTR. */
html[lang^="en"] #testimonials .tw-testimonial-card__identity,
html[lang^="en"] #testimonials .tw-testimonial-card__quote { direction: ltr !important; text-align: left !important; }
html[lang^="en"] #statistics .tw-statistics-reference__value,
html[lang^="en"] #trust-bar .tw-trust-bar__value {
  direction: ltr !important; unicode-bidi: isolate;
}

/* CTA: desktop image left/content right in Persian -> reverse for English.
 * Keep the already-correct mobile content-first vertical composition. */
html[lang^="en"] #cta .tw-cta-reference-exact__content { direction: ltr !important; text-align: left !important; }
@media (min-width: 821px) {
  html[lang^="en"] #cta .tw-cta-reference-exact__card {
    grid-template-columns: 49.3% 50.7% !important;
    direction: ltr !important;
  }
  html[lang^="en"] #cta .tw-cta-reference-exact__content {
    grid-column: 1 !important; grid-row: 1 !important;
    padding: 1.15rem 2rem 1.05rem 3.1rem !important;
  }
  html[lang^="en"] #cta .tw-cta-reference-exact__media {
    grid-column: 2 !important; grid-row: 1 !important;
  }
  html[lang^="en"] #cta .tw-cta-reference-exact__media-fade {
    background:
      linear-gradient(270deg, rgba(4,20,29,0) 0%, rgba(4,20,29,0) 58%, rgba(4,20,29,.08) 70%, rgba(4,20,29,.42) 88%, #051b25 100%),
      linear-gradient(180deg, rgba(4,20,29,.02), rgba(4,20,29,.10)) !important;
  }
}

/* Other English pages: honor existing article card design but remove fixed RTL
 * from article text/panels. No global mirroring of photos or illustration. */
html[lang^="en"] .tw-articles-hero__content,
html[lang^="en"] .tw-articles-lead-grid > *,
html[lang^="en"] .tw-article-card--feature .tw-article-card__body {
  direction: ltr !important; text-align: left !important;
}

/* Directional glyphs only. Flip arrows, never ordinary icons, illustrations,
 * text, photos, logos, social icons, play icons, or dropdown chevrons. */
html[lang^="en"] .tw-header-consultation__arrow,
html[lang^="en"] .tw-reference-hero__button--primary > svg,
html[lang^="en"] .tw-start-project__submit-arrow,
html[lang^="en"] .tw-service-card__arrow,
html[lang^="en"] .tw-portfolio__all-arrow,
html[lang^="en"] .tw-cta-reference-exact__button--primary .tw-cta-reference-exact__button-circle svg,
html[lang^="en"] .tw-account-form__submit > span[aria-hidden="true"],
html[lang^="en"] .tw-article-card__read-button > span[aria-hidden="true"],
html[lang^="en"] .tw-community-card__content > a > span[aria-hidden="true"],
html[lang^="en"] .tw-live-result__arrow {
  display: inline-block;
  transform: scaleX(-1) !important;
  transform-origin: 50% 50%;
}
/* Portfolio cards already print a right-pointing arrow, and Service Single
 * back-links already point LEFT in LTR. Do not flip either. */