/* Responsive layout (loaded last, after en.css). Grid columns are minmax(0, 1fr) so long text wraps
   instead of pushing a column past the screen edge.
   1200px and up: the Figma frame, scaled with zoom (style.css), untouched.
   Under 1200px: the frame turns into a normal top-to-bottom flow at readable sizes. Absolute Figma
   coordinates (including inline ones written by the page generators) are switched off, the decorative frame
   lines and corner squares are hidden, grids collapse to two columns (tablet) or one (under 700px), and the
   header nav moves into a menu panel. Reading order follows the page language (rtl for fa, ltr for en). */

.menu-btn { display: none; }

@media (max-width: 1199px) {
  /* ---------- frame: flow instead of a scaled canvas ---------- */
  #smooth-content, .site-header { padding-left: 0; }
  .frame {
    width: auto;
    height: auto !important; /* the project pages set it inline */
    zoom: 1;
    direction: rtl;
  }
  html[lang="en"] .frame { direction: ltr; }
  .frame > * {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    translate: none;
  }
  .line, .hline, .sq, .glow, .cs-vline, .cs-hline { display: none !important; }

  /* ---------- header: logo, actions, menu button; nav in a panel ---------- */
  .site-header, .site-header.is-stuck { height: 64px; }
  .site-header .hdr-frame,
  .site-header.is-stuck .hdr-frame {
    display: flex;
    gap: 10px;
    align-items: center;
    width: auto;
    height: 64px;
    padding: 0 20px;
    zoom: 1;
    translate: none;
    direction: rtl;
  }
  html[lang="en"] .site-header .hdr-frame,
  html[lang="en"] .site-header.is-stuck .hdr-frame { direction: ltr; }
  .hdr-frame > * { position: static !important; }
  .logo { width: 96px; height: auto; }
  .nav-actions { gap: 10px; margin-inline-start: auto; }
  .menu-btn {
    display: grid;
    flex: none;
    place-items: center;
    width: 41px;
    height: 41px;
    border-radius: 8px;
    background: var(--chip);
    color: var(--text);
    cursor: pointer;
  }
  .menu-btn i { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transition: box-shadow 0.25s, rotate 0.25s; }
  .site-header.menu-open .menu-btn i { box-shadow: none; rotate: 45deg; }
  .site-header.menu-open .menu-btn i::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; rotate: 90deg; }
  .nav {
    position: absolute !important;
    top: 64px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column-reverse; /* the markup lists the links right-to-left for the desktop row: Home first */
    align-items: stretch;
    gap: 4px;
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    box-shadow: 0 0 0 100vmax rgba(var(--bg-rgb), 0.6); /* dims the page under the open panel */
    clip-path: inset(0 0 -100vmax 0); /* ...but not the bar above it */
  }
  .site-header.menu-open .nav { display: flex; }
  .site-header.menu-open::before { opacity: 1; }
  .nav a { justify-content: flex-start; border-radius: 8px; }
  .nav a .trim { white-space: normal; }

  /* ---------- hero: text, then the dither shape ---------- */
  .hero-right { width: auto; height: auto; overflow: visible; }
  .hero-content,
  html[lang="en"] .hero-content {
    position: static;
    width: auto;
    max-width: 760px; /* keeps line length readable on wide tablets */
    padding: 104px 24px 40px;
    align-items: flex-start;
  }
  .hero-text, .hero-copy { align-items: flex-start; text-align: start; }
  .hero-copy h1 { text-align: match-parent; } /* a Latin project name (dir=ltr) still lines up with the page */
  .hero-copy h1, .hero-copy h1.cs-h1-long { font-size: clamp(40px, 7vw, 60px); white-space: normal; word-break: normal; overflow-wrap: normal; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-label { white-space: normal; }
  .lead { font-size: 18px; }
  .hero-actions, html[lang="en"] .hero-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .hero-actions .btn-primary { order: -1; }
  .btn-primary, .nav-cta { flex-direction: row-reverse; }
  .hero-left {
    width: auto;
    height: auto;
    aspect-ratio: 696 / 682;
    max-height: 70vh;
    margin: 0 auto;
    border-block: 1px solid var(--line);
  }
  .hero-left .grid { grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; height: 100%; }

  /* ---------- stripes, trust, clients ---------- */
  .stripes { width: auto; height: 48px; transform: none; }
  .trust,
  html[lang="en"] .trust {
    width: auto;
    height: auto;
    align-items: flex-start;
    padding: 24px;
    text-align: start;
  }
  .trust-title, .trust-sub { font-size: 24px; }
  .clients { width: auto; height: 120px; border-inline: 0; }
  .client { height: 120px; }

  /* ---------- services ---------- */
  .svc-section { width: auto; height: auto; }
  .svc-head { position: relative; width: auto; height: auto; min-height: 150px; }
  .svc-heading, html[lang="en"] .svc-heading { position: relative; top: auto; right: auto; left: auto; padding: 36px 24px; white-space: normal; }
  .svc-heading .lead-line, .work-heading .lead-line { font-size: 28px; }
  .svc-heading .muted, .work-heading .muted { font-size: 24px; }
  .svc-cols {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: auto;
    height: auto;
    background: var(--line); /* the 1px gaps draw the dividers */
  }
  .svc, html[lang="en"] .svc { padding: 32px 24px; border: 0; background: var(--bg); }
  .svc-title { min-height: 0; margin-top: 28px; font-size: 22px; }
  .svc-list { margin-top: 20px; padding-top: 24px; }
  .svc-list li { font-size: 17px; }

  /* ---------- portfolio ---------- */
  .work-section { width: auto; height: auto; }
  .work-head { position: relative; display: flex; flex-direction: column; width: auto; height: auto; }
  .work-heading, html[lang="en"] .work-heading { position: relative; top: auto; right: auto; left: auto; padding: 36px 24px 16px; white-space: normal; }
  .work-head-side,
  html[lang="en"] .work-head-side {
    position: relative;
    right: auto;
    left: auto;
    flex-wrap: wrap;
    gap: 16px;
    width: auto;
    height: auto;
    padding: 0 24px 28px;
    border: 0;
  }
  .work-intro { max-width: none; }
  .work-feature {
    position: relative;
    top: auto;
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    height: auto;
  }
  .work-feature .work-stage { order: -1; aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--line); }
  .work-feature .work-info { padding: 28px 24px; }
  .work-feature .work-name { font-size: 28px; }
  .work-grid {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    width: auto;
  }
  .work-grid .work { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .work-grid .work-stage { aspect-ratio: 4 / 3; }
  .work-name { white-space: normal; }
  .work-meta dd { white-space: normal; }
  .work-foot { grid-template-columns: minmax(0, 1fr) auto; }
  .work-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-feature .work-foot, .work-feature .work-meta { grid-template-columns: minmax(0, 1fr); }
  .ct-social { flex-wrap: wrap; }
  .ct-social > span { white-space: nowrap; }
  .work:hover, .work.is-hover { translate: none; }

  /* ---------- contact ---------- */
  .ct-section { width: auto; height: auto; }
  .ct-body { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); width: auto; height: auto; }
  .ct-info, html[lang="en"] .ct-info { padding: 36px 24px; border: 0; border-bottom: 1px solid var(--line); }
  .svc-heading.ct-heading { padding: 0; }
  .ct-info .svc-dither { width: 100%; height: 220px; }
  .ct-reach { margin-top: 32px; }
  .ct-form-cell { padding: 32px 24px; }

  /* ---------- footer ---------- */
  .ft { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; height: auto; }
  .ft > * { position: relative !important; top: auto !important; right: auto !important; left: auto !important; width: auto !important; }
  .ft-brand, .ft-social, .ft-bottom { grid-column: 1 / -1; }
  .ft-brand, html[lang="en"] .ft-brand { height: 300px; padding: 32px 24px; border: 0; border-bottom: 1px solid var(--line); }
  .ft-cell, html[lang="en"] .ft-cell { height: auto; gap: 16px; padding: 28px 24px; }
  .ft-cell:nth-of-type(2), html[lang="en"] .ft-cell:nth-of-type(2) { border-left: 0; border-right: 0; border-inline-end: 1px solid var(--line); }
  .ft-social { grid-template-rows: none; grid-auto-rows: 60px; border-top: 0; }
  .ft-link, html[lang="en"] .ft-link { padding: 0 24px; }
  .ft-bottom { flex-wrap: wrap; gap: 12px; height: auto; padding: 18px 24px; }

  /* ---------- project pages ---------- */
  .cs-intro,
  html[lang="en"] .cs-intro {
    width: auto;
    max-width: 760px;
    height: auto !important;
    padding: 104px 24px 36px;
    align-items: flex-start;
  }
  .cs-cover, html[lang="en"] .cs-cover { width: auto; height: auto !important; aspect-ratio: 4 / 3; }
  .cs-cell,
  .cs-scope-head,
  .cs-scope {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    border-bottom: 1px solid var(--line);
  }
  .cs-cell, .cs-scope-head { padding: 36px 24px; }
  .cs-scope { padding: 0 24px 36px; }
  .cs-scope-wrap { position: relative !important; }
  .cs-text { font-size: 19px; }
  .cs-gallery { grid-template-columns: minmax(0, 1fr); width: auto; }
  .cs-shot { height: auto !important; aspect-ratio: 4 / 3; }
  .cs-shot.full { grid-column: auto; }
  .cs-shot.tall { aspect-ratio: auto; height: 70vh !important; }
  .cs-next { grid-template-columns: minmax(0, 1fr); width: auto; height: auto; }
  .cs-next .work-stage { order: -1; aspect-ratio: 16 / 9; border: 0; }
  .cs-next .work-name { font-size: 32px; }
}

/* ---------- phones ---------- */
@media (max-width: 699px) {
  .nav-cta { display: none; } /* no room in the bar; the hero button and the menu's Contact link lead to the same place */
  .hero-content, html[lang="en"] .hero-content { padding: 96px 20px 32px; }
  .hero-copy h1, .hero-copy h1.cs-h1-long { font-size: clamp(32px, 9vw, 44px); }
  .lead { font-size: 16px; }
  .kpi-num { font-size: 26px; }
  .kpi-label { font-size: 13px; }
  .kpis li { padding: 0 12px; }
  .svc-cols, .work-grid { grid-template-columns: minmax(0, 1fr); }
  /* every project card is built like the featured one: image, text at the same sizes, the three facts as
     label/value rows, and the full-width "View project" button */
  .work-grid .work-info { padding: 28px 24px; }
  .work-grid .work-name { font-size: 28px; }
  .work-grid .work-desc { margin-top: 14px; font-size: 17px; }
  .work-grid .work-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
  }
  .work-grid .work-meta { grid-template-columns: minmax(0, 1fr); }
  .work-grid .work-meta div,
  .work-grid .work-meta div + div {
    display: flex;
    gap: 16px;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .work-grid .work-meta div:first-child { border-top: 1px solid var(--line); }
  .work-grid .work-meta dd { margin: 0; font-size: 16px; text-align: end; }
  .work-grid .work-go-sq { justify-content: space-between; width: 100%; height: 52px; padding: 0 18px; }
  .work-grid .work-go-sq .go-label { display: inline; }
  .ct-lines dd { white-space: normal; text-align: end; }
  .ct-form { grid-template-columns: minmax(0, 1fr); }
  .ct-foot { flex-wrap: wrap; }
  .ft { grid-template-columns: minmax(0, 1fr); }
  .ft-cell:nth-of-type(2), html[lang="en"] .ft-cell:nth-of-type(2) { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .ft-social { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-link, html[lang="en"] .ft-link { padding: 0 16px; font-size: 15px; }
  .ft-brand, html[lang="en"] .ft-brand { height: 240px; }
  .ft-tagline { font-size: 18px; }
}

/* small phones (320 to 380px): the three KPIs still fit side by side */
@media (max-width: 380px) {
  .kpis li { padding: 0 8px; }
  .kpi-top { gap: 6px; }
  .kpi-num { font-size: 22px; }
}