/* =====================================================================
   غرفه سازی کسری — casragroup.com
   پوسته سایت. توکن های رنگ در :root پایین تعریف می شوند و روی
   main.css و site-base.css می نشینند.
   ===================================================================== */
/* =====================================================================
   غرفه سازی کسری — لایه اختصاصی سایت
   بعد از main.css بارگذاری می شود و سه کار می کند:
     ۱. فونت IRANYekanX را واقعاً تعریف می کند
     ۲. سیستم اندازه فونت (Type Scale) را یکدست می کند
     ۳. اجزای اختصاصی این سایت را می سازد
   رنگ ها و طرح کلی main.css دست نخورده می ماند.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ۱ — فونت
   فایل های IRANYekanX در پوشه /fonts موجود بودند و layout هم preload
   می کرد، ولی هیچ جا @font-face نداشت؛ یعنی مرورگر فونت را دانلود
   می کرد و بعد دور می ریخت و سایت با فونت سیستمی رندر می شد.
   font-display: swap تا متن در بارگذاری اول نامرئی نماند.
--------------------------------------------------------------------- */
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Light.woff2') format('woff2'),
       url('/fonts/IRANYekanX-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Regular.woff2') format('woff2'),
       url('/fonts/IRANYekanX-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-DemiBold.woff2') format('woff2'),
       url('/fonts/IRANYekanX-DemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Bold.woff2') format('woff2'),
       url('/fonts/IRANYekanX-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-ExtraBold.woff2') format('woff2'),
       url('/fonts/IRANYekanX-ExtraBold.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------
   ۲ — سیستم اندازه فونت
   یک منبع حقیقت. هر اندازه با clamp() بین موبایل و دسکتاپ سیال است، پس
   نه به بریک پوینت وابسته ایم و نه در تبلت پرش داریم.
   نقاط لنگر: ۳۶۰px (موبایل) تا ۱۲۸۰px (دسکتاپ).

   ┌────────────┬─────────┬────────┬──────────┐
   │ │ موبایل │ تبلت │ دسکتاپ │
   ├────────────┼─────────┼────────┼──────────┤
   │ H1 │ ۲۶ │ ۳۰ │ ۳۶ │
   │ H2 │ ۲۲ │ ۲۴ │ ۲۸ │
   │ H3 │ ۱۹ │ ۲۰ │ ۲۲ │
   │ H4 │ ۱۷ │ ۱۸ │ ۱۹ │
   │ متن اصلی │ ۱۶٫۵ │ ۱۷ │ ۱۸ │
   │ لید │ ۱۸ │ ۱۹ │ ۲۰ │
   │ منو/دکمه │ ۱۵–۱۶ │ ۱۶ │ ۱۶–۱۷ │
   │ فرم │ ۱۶ │ ۱۶ │ ۱۶ │
   │ ریز │ ۱۴ │ ۱۴٫۵ │ ۱۵ │
   └────────────┴─────────┴────────┴──────────┘

   ورودی فرم هیچ وقت زیر ۱۶px نمی رود: سافاری موبایل روی هر ورودیِ
   کوچک تر خودکار زوم می کند و کاربر از صفحه پرت می شود بیرون.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   پالت رنگ
   site-base.css توکن های رنگ را روی فیروزه ای می گذارد؛ سایت قدیم تهران
   ایمن آبی/سرمه ای بود (‎#0033CC‎ عنوان ها، ‎#6D7EDC‎ هدر، ‎#4a0bb4‎ فوتر).
   اینجا فقط همان خانواده رنگی برمی گردد — چیدمان و طرح دست نمی خورد.
   کنتراست هر جفت روی سفید دست کم ۴٫۵:۱ است.
--------------------------------------------------------------------- */
:root {
  /* ---------------------------------------------------------------
     هویت رنگی کسری دیزاین — مشکی، خاکستری، قرمز

     دور اول سرمه ای + قرمز بود، همان پالتی که سایت های دیگر همین
     مجموعه دارند و برای همین سایت شبیه بقیه شده بود. لوگوی واقعی
     کسری فقط دو رنگ دارد: قرمز و مشکی — و خط آسمانِ زیر لوگو
     خاکستری است. پالت روی همان سه رنگ بسته شد و آبی کامل حذف شد.

       #111318  مرکب — تیتر، فوتر، نوار بالا     ۱۷٫۴:۱ روی سفید
       #E4000F  قرمز برند                        ۴٫۹:۱  متن هم مجاز
       #C1000C  قرمز متن ریز                     ۶٫۴:۱
       #6B6E76  خاکستری متن دوم                  ۵٫۳:۱
       #E3E3E6  خط جداکننده — فقط حاشیه، نه متن

     نام توکن ها (blue، teal، gold …) عمداً دست نخورده مانده اند:
     ‏main.css و site-base.css همه جا از همین نام ها استفاده می کنند و
     تغییرشان یعنی بازنویسی دو فایل پایه. مقدارها عوض شده اند، نام ها نه.
     --------------------------------------------------------------- */
  --ink: #111318;
  --ink-soft: #22252C;
  --ink-line: #E3E3E6;

  --brand-blue: #111318;
  --brand-blue-mid: #22252C;
  --brand-blue-dark: #111318;
  --brand-teal: #111318;
  --brand-teal-mid: #22252C;
  --brand-teal-dark: #111318;
  --brand-teal-deep: #111318;
  --brand-teal-pale: #F4F4F5;
  --brand-teal-border: #E3E3E6;
  --brand-navy: #111318;
  --brand-navy-soft: #22252C;

  --action-blue: #E4000F;
  --action-blue-dark: #C1000C;
  --action-blue-deep: #111318;

  --accent: #E4000F;
  --accent-dark: #C1000C;
  --accent-rgb: 228, 0, 15;
  --blue: #111318;
  --blue-dark: #000000;
  --blue-light: #F4F4F5;
  --blue-border: #E3E3E6;

  /* قرمز برند */
  --red: #E4000F;
  --red-text: #C1000C;   /* ۶٫۴:۱ — برای متن ریز و لینک داخل متن */
  --red-dark: #C1000C;
  --red-pale: #FEF0F1;
  --red-border: #F6C0C3;
  --red-mobile: #E4000F;

  /* نام های قدیمیِ توکن طلایی به قرمز نگاشته می شوند تا اجزای موجود
     (نشان ها، زیرخط پرسش و پاسخ، حاشیه ها) بدون بازنویسی کار کنند. */
  --gold: #E4000F;
  --gold-dark: #C1000C;
  --gold-pale: #FEF0F1;
  --gold-border: #F6C0C3;
  --brand-yellow: #E4000F;
  --amber: #E4000F;
  --amber-dark: #C1000C;

  /* خاکستری ها — همان تن های خط آسمان، تا صفحه و تصویر یک خانواده باشند */
  --gray-50:  #FAFAFB;
  --gray-100: #F4F4F5;
  --gray-200: #E3E3E6;
  --gray-300: #CFD1D5;
  --gray-400: #9A9DA4;
  --gray-500: #6B6E76;
  --gray-700: #3A3D45;
  --gray-900: #111318;

  --text: #111318;
  --text-light: #5A5D65;
  --text-muted: #83868E;
  --border: #E3E3E6;
  --bg-light: #FAFAFB;
  --bg-section: #F4F4F5;

  --topbar-bg: #111318;
  --footer-from: #111318;
  --footer-to: #16181E;
  --footer-link: #C9CBD1;
  --copyright-bg: #C1000C;
  --faq-underline: #E4000F;
  --bar-breadcrumb: #F4F4F5;
  --section-alt: #F4F4F5;

  /* گوشه ها تقریباً تیز — معماری غرفه خط صاف است، نه دایره */
  --radius: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --shadow-sm: 0 1px 2px rgba(17,19,24,.05);
  --shadow: 0 6px 24px rgba(17,19,24,.07);
  --shadow-lg: 0 18px 60px rgba(17,19,24,.10);
  --container: 1240px;

  --font: 'IRANYekanX', 'Dana', Tahoma, system-ui, sans-serif;

  --fs-h1: clamp(1.625rem, 1.381rem + 1.087vw, 2.250rem); /* 26 → 36 */
  --fs-h2: clamp(1.375rem, 1.228rem + 0.652vw, 1.750rem); /* 22 → 28 */
  --fs-h3: clamp(1.188rem, 1.114rem + 0.326vw, 1.375rem); /* 19 → 22 */
  --fs-h4: clamp(1.063rem, 1.014rem + 0.217vw, 1.188rem); /* 17 → 19 */
  --fs-body: clamp(1.031rem, 0.995rem + 0.163vw, 1.125rem); /* 16.5 → 18 */
  --fs-lead: clamp(1.125rem, 1.076rem + 0.217vw, 1.250rem); /* 18 → 20 */
  --fs-ui: clamp(0.938rem, 0.913rem + 0.109vw, 1.000rem); /* 15 → 16 */
  --fs-btn: clamp(1.000rem, 0.976rem + 0.109vw, 1.063rem); /* 16 → 17 */
  --fs-small: clamp(0.875rem, 0.851rem + 0.109vw, 0.938rem); /* 14 → 15 */
  --fs-tiny: clamp(0.813rem, 0.801rem + 0.054vw, 0.875rem); /* 13 → 14 */
  --fs-form: 1rem; /* ثابت ۱۶ */

  --lh-h1: 1.35;
  --lh-h2: 1.45;
  --lh-h3: 1.5;
  --lh-body: 1.95; /* متن فنی طولانی است؛ کمی بازتر از پیش فرض */
  --lh-lead: 1.85;
  --lh-ui: 1.6;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 3.5rem;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* رقم فارسی و لاتین در یک خط هم ارتفاع می شوند */
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- تیترها ------------------------------------------------------- */
.page-h1,
.error-page h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 800;
  /* بدون letter-spacing: خط فارسی متصل است و فاصله منفی، اتصال حرف ها
     را باز می کند. روی لاتین بی ضرر بود، روی فارسی نه. */
  margin: 0 0 var(--sp-3);
}
.page-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-light);
  font-weight: 400;
  margin: 0 0 var(--sp-4);
}
.page-head { margin-bottom: var(--sp-5); }
.page-meta {
  font-size: var(--fs-small);
  color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin: 0;
}
.page-meta i { margin-inline-end: 4px; }

/* h2 داخل متن و عنوان بخش ها یک سطح بصری اند و باید یک اندازه باشند.
   قبلاً ۲۲px و ۱۸px بودند و همان اختلافی را می ساختند که در صفحه
   به چشم می آمد: دو تیتر هم رتبه با دو اندازه متفاوت. */
.page-content h2,
.page-section .section-title,
.section-title,
.comments-title,
.related-title,
.home-section-title,
.hs-title,
.quote-cta h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  margin: var(--sp-7) 0 var(--sp-3);
  /* letter-spacing حذف شد — همه این تیترها فارسی اند و فاصله منفی
     اتصال حروف را باز می کند. روی شماره تلفن (rt-tel، hero-phone) که
     رقم لاتین است نگه داشته شده، چون آنجا خوانایی را بهتر می کند. */
}
.page-content h2:first-child,
.page-head + .page-content h2 { margin-top: 0; }

.page-content h3,
.child-card-title,
.news-item-title,
.product-card-title,
.hs-card-title,
.hs-news-title,
.service-card-body h3,
.related-card-body h3,
.article-card h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  margin: var(--sp-5) 0 var(--sp-2);
}
.child-card-title, .news-item-title, .product-card-title,
.hs-card-title, .hs-news-title, .service-card-body h3,
.related-card-body h3, .article-card h3 { margin: 0 0 var(--sp-2); }

.page-content h4 {
  font-size: var(--fs-h4);
  line-height: 1.55;
  font-weight: 600;
  margin: var(--sp-4) 0 var(--sp-2);
}

/* --- متن ---------------------------------------------------------- */
.page-content,
.page-content-intro,
.section-text .section-content,
.home-about-text,
.faq2-a-inner,
.faq-answer-inner,
.comment-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.page-content p,
.page-content-intro p,
.section-text .section-content p { margin: 0 0 var(--sp-4); }
.page-content li,
.section-text .section-content li { margin-bottom: var(--sp-2); }
.page-content ul, .page-content ol { padding-inline-start: 1.5em; margin-bottom: var(--sp-5); }

/* ---------------------------------------------------------------------
   عرض ستون متن
   نسخه قبلی روی تک تک پاراگراف ها max-width می گذاشت. نتیجه این بود که
   پاراگراف ۷۸۰ پیکسل می شد ولی تصویر و جدول و کارت ها ۱۱۴۵ پیکسل، و یک
   ستون خالیِ ۳۶۵ پیکسلی کنار متن می ماند که شبیه خرابی بود.
   حالا عرض روی خودِ ستون کنترل می شود (چیدمان دوستونی پایین تر) و همه
   اجزای صفحه یک لبه دارند.
--------------------------------------------------------------------- */

.page-content strong { font-weight: 700; }
.page-content a { text-underline-offset: .25em; }

/* --- اجزای رابط --------------------------------------------------- */
.ni-link, .dd-link, .drawer-call, .drawer-search input,
.children-list a, .hs-simple-list a, .toc-list li a {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}
.dd-sub li a, .footer-links a, .footer-contact li,
.footer-text, .footer-desc, .ti-links-col ul a {
  font-size: var(--fs-small);
  line-height: 1.85;
}
.footer-title, .footer-col-title, .ti-links-col h3, .ti-clinic-item h3 {
  font-size: var(--fs-h4);
  font-weight: 700;
}
.breadcrumb ol { font-size: var(--fs-tiny); }
.toc-title { font-size: var(--fs-h4); font-weight: 700; }

.cta-btn, .btn, .btn-form-submit, .form-submit-btn,
.home-about-btn, .hs-more-btn, .pg {
  font-size: var(--fs-btn);
  line-height: 1.4;
  font-weight: 600;
}

/* --- فرم ها ------------------------------------------------------- */
.front-form label, .form-field label {
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  display: block;
}
.front-form input, .front-form select, .front-form textarea,
.form-field input, .form-field select, .form-field textarea,
.search-input-wrapper input, .captcha2-input {
  font-family: var(--font);
  font-size: var(--fs-form);
  line-height: 1.7;
}
.front-form input, .front-form select, .front-form textarea {
  padding: .7em .9em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  background: var(--white);
}
.front-form input:focus, .front-form select:focus, .front-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.front-form .form-group { margin-bottom: var(--sp-4); }
.front-form .required { color: var(--red); margin-inline-start: 3px; }

/* تله ربات — از دید کاربر پنهان، ولی برای ربات پرشدنی.
   جابه جایی عمدی است نه افقی: در صفحه راست به چپ، left منفی سمت
   inline-end است و یک اسکرول افقی می سازد. */
.hp-field {
  position: absolute !important;
  top: -9999px; inset-inline-start: 0;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ‏overflow-x: hidden روی html یک scroll-container می سازد و
   position: sticky هدر را از کار می اندازد. clip همان محافظت را بدون
   آن عارضه می دهد. */
html, body { overflow-x: clip; max-width: 100%; }

.form-success-msg {
  background: var(--green-light);
  border: 1px solid var(--green);
  color: #14532d;
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  font-size: var(--fs-body);
}
.form-success-msg .fs-title { font-weight: 700; margin: 0 0 var(--sp-2); }
.form-success-msg .fs-track { margin: 0; font-size: var(--fs-small); }
.form-success-msg strong { font-size: var(--fs-h3); letter-spacing: .08em; }
.form-error-msg {
  background: var(--red-light);
  border: 1px solid var(--red);
  color: #7f1d1d;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  margin-top: var(--sp-3);
}

/* --- ریز متن ها ---------------------------------------------------- */
.child-card-excerpt, .news-item-excerpt, .hs-card-excerpt,
.search-result-excerpt, .gallery-caption, .page-content figcaption,
.comment-date, .news-item-date, .hs-card-date, .share-label,
.download-size, .product-note, .price-box-note {
  font-size: var(--fs-small);
  line-height: 1.75;
}
.comment-badge, .footer-bottom, .ti-bottom { font-size: var(--fs-tiny); }

/* جدول ها: ۱۳px برای عدد و مشخصات فنی کوچک بود */
.page-content table, .section-table td, .section-table th,
.page-content thead th, .page-content td {
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* ---------------------------------------------------------------------
   ۲.۵ — چیدمان صفحه: ستون متن + ساید بار چسبان
   ظرف ۱۱۶۰ پیکسل است. یک ستون متنِ تمام عرض یعنی خط های ۱۱۰ نویسه ای که
   چشم موقع برگشت به سر خط بعدی گم می شود. تقسیمش به ۷۷۰ + ۳۰۰ هم
   خوانایی را درست می کند و هم آن فضا را با چیزی مفید پر می کند.
--------------------------------------------------------------------- */
.page-article.has-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6) 40px;
  align-items: start;
}
.page-main { min-width: 0; }
.page-aside { min-width: 0; position: sticky; top: 90px; }

/* فاصله عمودی اجزا حالا داخل ستون اصلی تنظیم می شود، نه روی article */
.page-article.has-aside > .page-main > * + * { margin-block-start: var(--sp-6); }
.page-article.has-aside > .page-main > .children-section,
.page-article.has-aside > .page-main > .quote-cta,
.page-article.has-aside > .page-main > .tcar { margin-block-start: var(--sp-7); }

.aside-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.aside-card > h2 {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--accent);
}
.aside-card ul { list-style: none; margin: 0; padding: 0; }
.aside-card li { margin-bottom: var(--sp-2); }
.aside-card li:last-child { margin-bottom: 0; }
.aside-card a { font-size: var(--fs-small); line-height: 1.9; color: var(--text); }
.aside-card a:hover { color: var(--accent); }

/* فهرست مطالب داخل ساید بار — بلندش را اسکرول می کنیم تا کارت های
   بعدی از پایین صفحه بیرون نزنند */
.aside-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.aside-toc li { counter-increment: toc; display: flex; gap: 8px; }
.aside-toc li::before {
  content: counter(toc);
  flex-shrink: 0;
  min-width: 1.6em; height: 1.6em;
  display: grid; place-items: center;
  background: var(--blue-light); color: var(--accent-dark);
  border-radius: 5px;
  font-size: var(--fs-tiny); font-weight: 700;
  margin-top: .3em;
}
.aside-toc .aside-toc-scroll { max-height: 46vh; overflow-y: auto; }

.aside-contact { background: var(--blue-light); border-color: var(--blue-border); }
.aside-contact .ac-phone {
  display: flex; align-items: center; gap: .5em;
  font-size: var(--fs-h4); font-weight: 800; direction: ltr;
  color: var(--accent-dark);
  padding: var(--sp-2) 0;
}
.aside-contact .ac-note { font-size: var(--fs-tiny); color: var(--text-light); margin: 0 0 var(--sp-3); }
.aside-contact .btn { width: 100%; justify-content: center; margin-top: var(--sp-2); }

/* روی تبلت و موبایل یک ستونه؛ ساید بار بعد از متن می آید و چسبان نیست */
@media (max-width: 1024px) {
  /* ‏minmax(0,1fr) و نه 1fr خالی. «1fr» یعنی minmax(auto,1fr) و آن
     auto اجازه نمی دهد ستون از اندازه min-content محتوایش باریک تر
     شود — یعنی یک تصویر پهن یا جدولی با min-width، ستون را از عرض
     صفحه بیرون می برد. قاعده دسکتاپ همین محافظ را داشت و اینجا،
     دقیقا جایی که بیشترین نیاز به آن است، افتاده بود. */
  .page-article.has-aside { grid-template-columns: minmax(0, 1fr); }
  .page-aside { position: static; margin-top: var(--sp-6); }
  .aside-toc .aside-toc-scroll { max-height: none; }
  .page-aside .aside-card { max-width: none; }
  /* یک ستونه شد، پس عرض متن دوباره باید مهار شود — وگرنه روی تبلت
     خط ها ۹۵ نویسه می شوند. حاشیه قرینه، نه ستون خالی در یک طرف. */
  .page-article.has-aside > .page-main { max-width: 80ch; margin-inline: auto; }
}
@media (max-width: 720px) {
  .page-article.has-aside > .page-main { max-width: none; }
}

/* بلوک های متنی صفحه اصلی و صفحات فهرست ساید بار ندارند، پس عرضشان
   خودشان محدود و وسط چین می شود — حاشیه قرینه عمدی به نظر می رسد،
   برخلاف یک ستون خالی در یک طرف. */
.hs-html-body,
.page-type-hub > .page-content,
.page-type-hub > .page-content-intro,
.page-type-product > .page-content {
  max-width: 80ch;
  margin-inline: auto;
}

/* --- نشان برند --------------------------------------------------------
   وقتی لوگو هست، نشان متنی فقط برای صفحه خوان می ماند. اگر فایل لوگو
   ۴۰۴ بدهد، اسکریپت کلاس brand-has-logo را برمی دارد و همین نشان متنی
   دیده می شود. سقف عرض هم هست تا هیچ وقت ردیف هدر را نشکند. */
.brand-has-logo .brand-fallback {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
.site-logo, .drawer-logo { max-inline-size: 300px; overflow: hidden; }
.site-logo img, .drawer-logo img { max-width: 100%; object-fit: contain; }
.brand-name {
  display: block; font-weight: 800; line-height: 1.35;
  font-size: var(--fs-h4); white-space: nowrap;
}
.brand-tag {
  display: block; font-size: var(--fs-tiny); color: var(--text-light);
  line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- جعبه بازه قیمت ----------------------------------------------- */
.price-box {
  background: var(--blue-light);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.price-box-label {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: var(--sp-2);
}
.price-box-range {
  font-size: var(--fs-lead);
  line-height: 1.7;
}
.price-box-range strong { font-weight: 800; color: var(--accent-dark); }
.price-box-note { color: var(--text-light); margin: var(--sp-2) 0 0; }

/* --- فراخوان تماس -------------------------------------------------- */
.quote-cta {
  margin: var(--sp-7) 0 0;
  padding: var(--sp-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #000066 0%, #003399 100%);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.quote-cta h2 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-h3); }
.quote-cta p { margin: 0; color: rgba(255,255,255,.9); font-size: var(--fs-small); }
.quote-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* نسخه بالای صفحه — فشرده تر، تا متن اصلی را عقب نراند */
.quote-cta-top {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-5);
}
.quote-cta-top h2 { font-size: var(--fs-h4); }

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .75em 1.4em;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-call {
  background: #fff; color: #000066; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.btn-call:hover { color: #000066; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.btn-call-alt { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-call-alt:hover { color: #fff; background: rgba(255,255,255,.24); }
.btn-request {
  background: #f59e0b; color: #1f2937; font-weight: 800;
  box-shadow: 0 4px 14px rgba(245,158,11,.35);
}
.btn-request:hover { color: #fff; background: var(--red-dark); }

/* ---------------------------------------------------------------------
   صفحه محصول (PDP)
   دو ستون: تصویر با نوار بندانگشتی، و اطلاعات خرید. همان چیدمانی که
   کاربر ایرانی از فروشگاه های بزرگ انتظار دارد.
--------------------------------------------------------------------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  margin-bottom: var(--sp-6);
}
.pdp-media { min-width: 0; }
.pdp-info { min-width: 0; }
.pdp-stage {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
  padding: var(--sp-4);
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pdp-stage img { width: 100%; height: 100%; object-fit: contain; }
.pdp-noimg { color: var(--text-muted); font-size: var(--fs-small); background: var(--bg-light); }

.pdp-thumbs {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.pdp-thumb {
  width: 72px; height: 72px; padding: 4px;
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--white); cursor: pointer;
  transition: border-color .15s;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb:hover { border-color: var(--blue-border); }
.pdp-thumb.is-active { border-color: var(--accent); }

.pdp-facts { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.pdp-facts li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px dashed var(--border);
  font-size: var(--fs-body);
}
.pdp-facts span { color: var(--text-light); font-size: var(--fs-small); }
.pdp-facts strong { font-weight: 700; }
.pdp-facts .is-in { color: var(--green); }
.pdp-facts .is-out { color: var(--red); }

.pdp-models h2 { font-size: var(--fs-h3); margin: 0 0 var(--sp-3); }
.pdp-model-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.pdp-model-list li {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-body);
  background: var(--white);
}
.pdp-model-list .pm-name { font-weight: 700; flex: 1 1 auto; }
.pdp-model-list .pm-price { color: var(--accent-dark); font-weight: 600; }
.pdp-model-list .pm-stock { font-size: var(--fs-small); }
.pdp-model-list .is-in .pm-stock { color: var(--green); }
.pdp-model-list .is-out { opacity: .65; }
.pdp-model-list .is-out .pm-stock { color: var(--red); }

.pdp-buy {
  border: 1px solid var(--blue-border); background: var(--blue-light);
  border-radius: var(--radius-xl); padding: var(--sp-5);
}
.pdp-note { color: var(--text-light); margin: 0 0 var(--sp-4); }
.pdp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pdp-actions .btn-call { background: var(--accent); color: #fff; }
.pdp-actions .btn-call:hover { background: var(--accent-dark); color: #fff; }
.pdp-actions .btn-call-alt {
  background: var(--white); color: var(--accent); border-color: var(--accent);
}
.pdp-actions .btn-call-alt:hover { color: var(--accent-dark); background: #fff; }
.pdp-wa {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: var(--sp-3); font-size: var(--fs-small); font-weight: 600;
  color: #128c7e;
}

/* --- جدول مشخصات و ویژگی ها ----------------------------------------- */
.pdp-spec { margin: var(--sp-7) 0; }
.pdp-spec-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5); align-items: start;
}
.pdp-spec-table { width: 100%; border-collapse: collapse; }
.pdp-spec-table th,
.pdp-spec-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small); line-height: 1.8; text-align: start;
}
.pdp-spec-table th {
  width: 38%; color: var(--text-light); font-weight: 600;
  background: var(--bg-light);
}
.pdp-spec-table tr:last-child th,
.pdp-spec-table tr:last-child td { border-bottom: 0; }
.pdp-spec-table { border: 1px solid var(--border); border-radius: var(--radius-lg);
                  overflow: hidden; }

.pdp-features { list-style: none; margin: 0; padding: 0; }
.pdp-features li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) 0; font-size: var(--fs-small); line-height: 1.85;
}
.pdp-features i {
  flex-shrink: 0; margin-top: .45em;
  color: var(--green); font-size: .8em;
}

/* --- کارت محصول در فهرست دسته --------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-5) 0 var(--sp-6);
}
.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.product-card:hover {
  box-shadow: var(--shadow); transform: translateY(-3px);
  border-color: var(--blue-border);
}
.pc-media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1; padding: var(--sp-4);
  background: var(--bg-light);
}
.pc-media img { width: 100%; height: 100%; object-fit: contain; }
.pc-noimg { color: var(--text-muted); font-size: 2rem; }
.pc-brand {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px;
  background: var(--accent); color: #fff;
  font-size: var(--fs-tiny); font-weight: 600;
  padding: .15em .7em; border-radius: 999px;
}
.pc-body {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4); flex: 1 1 auto;
}
.product-card-title { margin: 0; }
.product-card-title a { color: var(--text); }
.product-card-title a:hover { color: var(--accent); }
.pc-models { color: var(--text-light); font-size: var(--fs-tiny); margin: 0; }
.pc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2);
}
.product-card-price { color: var(--accent-dark); font-weight: 700; font-size: var(--fs-small); }
.product-card-stock { font-size: var(--fs-tiny); font-weight: 600; }
.product-card-stock.is-in { color: var(--green); }
.product-card-stock.is-out { color: var(--red); }
.pc-cta {
  display: block; text-align: center;
  padding: .65em 1em; margin-top: var(--sp-2);
  border: 1px solid var(--accent); border-radius: var(--radius);
  color: var(--accent); font-size: var(--fs-small); font-weight: 600;
}
.pc-cta:hover { background: var(--accent); color: #fff; }

/* --- تماس ---------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.contact-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  background: var(--bg-light);
}
.contact-card h2 { margin-top: 0; }
.contact-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.contact-list li {
  display: flex; gap: var(--sp-3); justify-content: space-between;
  padding: var(--sp-3) 0; border-bottom: 1px dashed var(--border);
  font-size: var(--fs-body);
}
.contact-list li > span:first-child { color: var(--text-light); font-size: var(--fs-small); }
.contact-map iframe {
  width: 100%; min-height: 320px; height: 100%;
  border: 0; border-radius: var(--radius-xl);
}

/* ---------------------------------------------------------------------
   کروسل افقی — مطالب مرتبط، خدمات مرتبط، محصولات مشابه
   با scroll-snap بومی؛ بدون جاوااسکریپت هم با انگشت اسکرول می شود.
--------------------------------------------------------------------- */
.tcar { margin: var(--sp-7) 0 0; }
.tcar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-4);
}
.tcar-head .section-title { margin: 0; }
.tcar-head-side { display: flex; align-items: center; gap: var(--sp-3); }
.tcar-more { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.tcar-nav { display: flex; gap: var(--sp-2); }
.tcar-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--white); color: var(--text); cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
}
.tcar-btn:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.tcar-btn:disabled { opacity: .35; cursor: default; }

.tcar-track {
  list-style: none; margin: 0; padding: 4px 0 var(--sp-3);
  display: flex; gap: var(--sp-4);
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tcar-track::-webkit-scrollbar { display: none; }
.tcar-item { flex: 0 0 auto; width: 250px; scroll-snap-align: start; }
.tcar-compact .tcar-item { width: 210px; }

.tcar-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden; color: inherit;
  transition: box-shadow .18s, transform .18s;
}
.tcar-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); color: inherit; }
.tcar-img { position: relative; display: block; background: var(--bg-light); }
.tcar-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tcar-compact .tcar-img img { aspect-ratio: 1 / 1; object-fit: contain; padding: 10px; }
.tcar-badge {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px;
  background: var(--accent); color: #fff; font-size: var(--fs-tiny);
  padding: .15em .7em; border-radius: 999px;
}
.tcar-body { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4); }
.tcar-title {
  font-size: var(--fs-h4); font-weight: 700; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tcar-meta { font-size: var(--fs-tiny); color: var(--text-light); }

/* --- تصویر شاخص صفحه ------------------------------------------------ */
.page-hero { margin: 0 0 var(--sp-6); }
.page-hero img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-xl);
  aspect-ratio: 16 / 9; object-fit: cover;
}
.page-type-hub .page-hero img,
.page-type-page .page-hero img { aspect-ratio: 21 / 9; }

/* --- جعبه خدمت داخل مقاله ------------------------------------------ */
.inline-service {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  margin: var(--sp-7) 0 0;
  padding: var(--sp-5);
  border: 1px solid var(--blue-border); background: var(--blue-light);
  border-radius: var(--radius-xl);
}
.inline-service h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-h3); }
.inline-service p { margin: 0; font-size: var(--fs-small); color: var(--text-light); }

/* --- ویدیوی صفحه ---------------------------------------------------- */
.page-video { margin: 0 0 var(--sp-6); }
.page-video video {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  background: #000;
  aspect-ratio: 16 / 9;
}

/* --- ظرف های ساده (فقط ریتم عمودی) --------------------------------- */
.quote-cta-text { flex: 1 1 260px; }
.product-box-info { min-width: 0; }
.related-services,
.related-articles { margin-top: var(--sp-7); }
.page-content-bottom { margin-top: var(--sp-6); }
.pg-prev, .pg-next { min-width: 5em; }

/* --- خدمات مرتبط و مقالات مرتبط ------------------------------------ */
.related-list { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3); }
.related-list a {
  display: block; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: var(--fs-small); font-weight: 600;
}
.related-list a:hover { background: var(--blue-light); border-color: var(--blue-border); }

.article-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-5);
}
.article-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white); color: inherit;
}
.article-card:hover { box-shadow: var(--shadow); color: inherit; }
.article-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-card h3 { padding: var(--sp-3) var(--sp-4); margin: 0; }

/* --- صفحه بندی ----------------------------------------------------- */
.pagination {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center; margin: var(--sp-6) 0 0;
}
.pg {
  min-width: 2.6em; padding: .5em .8em; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--text);
}
.pg:hover { border-color: var(--accent); color: var(--accent); }
.pg-cur { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- کارت زیرصفحه ها ----------------------------------------------- */
.children-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-5); margin: var(--sp-5) 0;
}
.child-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white); color: inherit;
  transition: box-shadow .18s, transform .18s;
}
.child-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); color: inherit; }
.child-card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.child-card-body { padding: var(--sp-4); }
.child-card-excerpt { color: var(--text-light); margin: 0; }
.child-card-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--sp-3); font-size: var(--fs-tiny);
  color: var(--accent-dark); background: var(--blue-light);
  border-radius: 999px; padding: .25em .8em;
}

/* --- سوالات متداول -------------------------------------------------- */
.faq2-q {
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: 700;
  padding: 1em 1.1em;
  line-height: 1.6;
}
.faq2-a-inner { padding: 1.1em; }

/* ---------------------------------------------------------------------
   ۴ — فوتر
--------------------------------------------------------------------- */
.ti-footer { background: #0f172a; color: #cbd5e1; margin-top: var(--sp-8); }
.ti-cta {
  background: linear-gradient(135deg, #000066 0%, #003399 100%);
  padding: var(--sp-6) 0;
}
.ti-cta-inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  align-items: center; justify-content: space-between;
}
.ti-cta h2 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-h2); }
.ti-cta p { color: rgba(255,255,255,.9); margin: 0; font-size: var(--fs-small); }
.ti-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ستون های فوتر با ارتفاع برابر.
   قبلاً auto-fit بود و هر ستون ارتفاع محتوای خودش را می گرفت؛ با ۲۱
   برند در یکی از ستون ها، کل فوتر نامیزان می شد. حالا برندها ردیف
   جداگانه دارند و این سه ستون هم ارتفاع اند. */
.ti-info {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5); padding: var(--sp-6) 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  align-items: stretch;
}
.ti-info-item {
  padding: var(--sp-4);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
}
.ti-info-item { display: flex; gap: var(--sp-3); }
.ti-info-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #C8D2F0; font-size: var(--fs-h4);
}
.ti-info-item h3 { color: #fff; margin: 0 0 var(--sp-1); font-size: var(--fs-h4); }
.ti-info-item p, .ti-info-item li { margin: 0; font-size: var(--fs-small); line-height: 1.9; }
.ti-contact { list-style: none; padding: 0; margin: 0; }
.ti-contact li {
  display: flex; gap: var(--sp-3); justify-content: space-between;
  align-items: baseline;
}
.ti-contact > li > span:first-child { color: #94a3b8; flex-shrink: 0; }
.ti-contact a { color: #e2e8f0; }
.ti-contact a:hover { color: #fff; }
/* هر دو شماره ثابت زیر یک برچسب، پشت سر هم */
.ti-tels { display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); justify-content: flex-end; }
.ti-areas { color: #94a3b8; font-size: var(--fs-tiny) !important; margin-top: var(--sp-2) !important; }

/* --- نشانی روی نقشه، بالای نوار پایانی ------------------------------ */
.ti-map {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-5); align-items: stretch;
  padding: var(--sp-5) 0 var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.08);
}
.ti-map-text h3 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-h4); }
.ti-map-text p { margin: 0 0 var(--sp-2); font-size: var(--fs-small); line-height: 1.9; }
.ti-map-hours { color: #94a3b8; }
.ti-map-text .btn-call { margin-top: var(--sp-2); }
.ti-map-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  min-height: 240px;
}
.ti-map-frame iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; }

/* لینک تلفن داخل متن — از linkify_phones */
.tel-link { font-weight: 700; white-space: nowrap; }
.ti-brand-desc .tel-link { color: #C8D2F0; }

.ti-links {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6); padding: var(--sp-6) 0;
  align-items: start;
}

/* --- ردیف برندها ----------------------------------------------------
   ۲۱ برند به شکل چیپ می چینند، نه ستون. هر برند تازه ای اضافه شود فقط
   پهنا را پر می کند و ارتفاع فوتر ثابت می ماند. */
.ti-brands {
  padding: var(--sp-5) 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ti-brands h3 {
  color: #fff; margin: 0 0 var(--sp-3);
  font-size: var(--fs-h4); font-weight: 700;
}
.ti-brands ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.ti-brands a {
  display: inline-block;
  padding: .35em 1em;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #cbd5e1;
  font-size: var(--fs-small);
  line-height: 1.9;
  white-space: nowrap;
}
.ti-brands a:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.ti-brand { display: flex; align-items: center; gap: var(--sp-3); color: #fff; }
.ti-brand img { width: 56px; height: auto; background: #fff; border-radius: var(--radius); padding: 4px; }
.ti-brand strong { display: block; font-size: var(--fs-h4); font-weight: 800; }
.ti-brand em { font-style: normal; font-size: var(--fs-small); color: #94a3b8; }
.ti-brand-desc { font-size: var(--fs-small); line-height: 1.95; margin: var(--sp-4) 0 0; }
.ti-links-col h3 { color: #fff; margin: 0 0 var(--sp-3); }
.ti-links-col ul { list-style: none; padding: 0; margin: 0; }
.ti-links-col li { margin-bottom: var(--sp-2); }
.ti-links-col a { color: #cbd5e1; }
.ti-links-col a:hover { color: #fff; }

.ti-socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.ti-social {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-h4);
  background: rgba(255,255,255,.08); color: #e2e8f0;
}
.ti-social:hover { background: rgba(255,255,255,.16); color: #fff; }

.ti-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-4) 0; }
.ti-bottom-inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
}
.ti-bottom p { margin: 0; color: #94a3b8; }
.ti-bottom a { color: #cbd5e1; }

/* نوار چسبان موبایل */
.ti-mobilebar { display: none; }
@media (max-width: 860px) {
  .ti-mobilebar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 900;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0,0,0,.10);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ti-mb-item {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    padding: .5rem .25rem;
    font-size: var(--fs-tiny); color: var(--text-light);
    text-align: center;
  }
  .ti-mb-item i { font-size: 1.1rem; }
  /* شماره تلفن باید خوانا باشد، نه یک برچسب ریز */
  .ti-mb-phone { color: var(--accent-dark); }
  .ti-mb-phone span { font-size: var(--fs-small); font-weight: 800; }
  .ti-mb-cta { color: #fff; background: var(--accent); }
  .ti-mb-cta:hover { color: #fff; }
  body { padding-bottom: 68px; }
}

/* ---------------------------------------------------------------------
   ۵ — اصلاح های واکنش گرا
--------------------------------------------------------------------- */
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-stage { aspect-ratio: 4 / 3; }
}

@media (max-width: 860px) {
  .ti-info { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .ti-links { grid-template-columns: 1fr 1fr; }
  .ti-map { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .container { padding-inline: 16px; }
  .ti-links { grid-template-columns: 1fr; gap: var(--sp-5); }
  .ti-brands ul { gap: 6px; }
  .ti-brands a { font-size: var(--fs-tiny); padding: .3em .8em; }
  .tcar-item { width: 76vw; max-width: 280px; }
  .tcar-compact .tcar-item { width: 58vw; max-width: 220px; }
  .tcar-head { flex-wrap: wrap; }
  .inline-service { text-align: center; justify-content: center; }
  .pdp-spec-cols { grid-template-columns: 1fr; }
  .quote-cta { padding: var(--sp-5); text-align: center; justify-content: center; }
  .quote-cta-actions { width: 100%; justify-content: center; }
  .btn { flex: 1 1 auto; justify-content: center; }
  /* جدول های عریض داخل متن، به جای شکستن صفحه، خودشان اسکرول می شوند */
  .page-content .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .pdp-model-list li { flex-direction: column; gap: var(--sp-1); align-items: stretch; }
  .ti-contact li { flex-direction: column; gap: 0; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .pc-body { padding: var(--sp-3); }
  .pdp-spec-table th { width: 45%; }
}

/* چاپ: متن مشکی روی سفید و بدون عناصر تعاملی */
@media print {
  .site-header, .ti-footer, .ti-mobilebar, .quote-cta,
  .share-box, .comments-section, .toc-box { display: none !important; }
  body { font-size: 12pt; line-height: 1.7; color: #000; }
  .page-h1 { font-size: 20pt; }
  .page-content h2 { font-size: 15pt; }
}

/* ==========================================================================
   دور akhekojamiri1 — دکمه هدر، مودال درخواست، و بخش های تازه صفحه اصلی
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hs-lead {
  max-width: 68ch;
  margin: 0 auto var(--sp-5, 24px);
  text-align: center;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: #475569;
}

/* --------------------------------------------------------------------------
   ۱) دکمه «ثبت درخواست غرفه» در نوار بالای هدر
   از منو بیرون آمد تا ردیف منو کوتاه شود و مهم ترین اقدام سایت یکی از
   هفت لینک هم وزن نباشد.
   -------------------------------------------------------------------------- */
.topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.16);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.topbar-cta:hover,
.topbar-cta:focus-visible {
  background: #fff;
  color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.topbar-cta i { font-size: .9em; }

/* در موبایل نوار بالا پنهان است؛ همان کار را دکمه آچار در ردیف هدر
   و نوار چسبان پایین انجام می دهند، پس اینجا چیزی تکرار نمی شود. */

/* --------------------------------------------------------------------------
   ۲) نقطه شکست منو
   منو از ۱۰ آیتم به ۷ آیتم رسید، ولی عنوان های فارسی بلندند
   («مشاوره حقوقی ملکی»، «وکیل ملکی در مناطق»…). شکست از ۱۲۰۰ به ۱۲۸۰
   می آید تا در لپ تاپ ۱۳۶۶ پیکسلی هم ردیف جا داشته باشد و هیچ وقت
   روی لوگو نیفتد.
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .hdr-ham { display: flex; }
  .hdr-mobile-actions { display: flex; }
  .hdr-actions { display: none; }
}
/* سپر آخر: حتی اگر روزی آیتمی اضافه شود، لوگو کوچک نمی شود و منو
   روی آن نمی رود — نوار منو خودش کوتاه می آید. */
@media (min-width: 1281px) {
  .hdr-inner { flex-wrap: nowrap; }
  .site-logo { flex: 0 0 auto; }
  .hdr-nav { flex: 1 1 auto; min-width: 0; }
  .nav-list { flex-wrap: nowrap; min-width: 0; }
  .ni-link { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   ۳) مودال درخواست غرفه
   روی دسکتاپ جعبه وسط، روی موبایل ورقه پایین کشیدنی. dvh استفاده شده
   نه vh: با بالا آمدن نوار آدرس سافاری، vh کوچک نمی شود و ته فرم زیر
   لبه صفحه گیر می کند.
   -------------------------------------------------------------------------- */
/* موقعیت صریح نوشته شده و به شیوه نامه پیش فرض مرورگر تکیه نمی کند:
   ‏<dialog> در حالت عادی absolute است و در حالت modal به لایه رویی
   می رود؛ اتکا به این تفاوت یعنی جعبه در یک مرورگر وسط بیفتد و در
   دیگری بالای صفحه. */
.rq-modal {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.rq-modal::backdrop {
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(2px);
}

.rq-modal .rq-panel {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%); /* راست چین: نصف عرض به راست */
  width: min(560px, calc(100vw - 32px));
  max-height: min(88dvh, 780px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.32);
  overflow: hidden;
  outline: none;
  animation: rqIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes rqIn {
  from { opacity: 0; transform: translate(50%, calc(-50% + 14px)); }
  to { opacity: 1; transform: translate(50%, -50%); }
}

.rq-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #E2E8F0;
  background: linear-gradient(180deg, var(--blue-light), #fff);
}
.rq-head-text { flex: 1 1 auto; min-width: 0; }
.rq-title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--brand-blue);
  font-weight: 800;
}
.rq-sub {
  margin: 4px 0 0;
  font-size: var(--fs-small);
  color: #64748B;
  line-height: 1.6;
}
.rq-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #E2E8F0;
  border-radius: 11px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rq-close:hover { background: #F1F5F9; color: var(--brand-navy); }

.rq-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px;
}
.rq-body .form-group { margin-bottom: 14px; }
.rq-body .front-form { margin: 0; }
.rq-body .form-actions { margin-top: 4px; }
.rq-body .btn-form-submit { width: 100%; }

.rq-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 12px 20px;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
  font-size: var(--fs-small);
  color: #64748B;
}
.rq-tel {
  font-weight: 800;
  color: var(--accent-dark);
  text-decoration: none;
  letter-spacing: .3px;
}
.rq-tel:hover { text-decoration: underline; }

/* بدنه صفحه هنگام باز بودن مودال. position:fixed تنها راهی است که
   روی iOS جلوی اسکرول پس زمینه را می گیرد؛ top منفی را جاوااسکریپت
   می گذارد تا صفحه به بالا نپرد. */
body.rq-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  /* ‏scroll و نه hidden: جای اسکرول بار خالی می ماند و صفحه پشت مودال
     به اندازه عرض اسکرول بار جابه جا نمی شود. جبران با padding کار
     نمی کرد چون در چیدمان راست چین، اسکرول بار بین مرورگرها گاهی چپ
     است و گاهی راست. */
  overflow-y: scroll;
}

@media (max-width: 640px) {
  .rq-modal .rq-panel {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline-start: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    animation: rqUp .26s cubic-bezier(.16,1,.3,1);
  }
  @keyframes rqUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  /* دستگیره ورقه — نشانه بصری اینکه این یک لایه رویی است */
  .rq-head::before {
    content: '';
    position: absolute;
    inset-block-start: 7px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: #CBD5E1;
  }
  .rq-head { position: relative; padding-block-start: 20px; }
  .rq-body { padding: 16px; }
  .rq-title { font-size: var(--fs-h4); }
}

@media (prefers-reduced-motion: reduce) {
  .rq-modal .rq-panel { animation: none; }
}

/* --------------------------------------------------------------------------
   ۴) نوار اطمینان
   -------------------------------------------------------------------------- */
.hs-trust { padding-block: clamp(20px, 3vw, 30px); }
.trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--blue-border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, var(--blue-light));
}
.trust-ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
}
.trust-text { display: flex; flex-direction: column; min-width: 0; }
.trust-t {
  font-size: var(--fs-ui);
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1.5;
}
.trust-s {
  font-size: var(--fs-small);
  color: #64748B;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   ۵) سه گام
   -------------------------------------------------------------------------- */
.steps-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
}
.step-num {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-ui);
}
.step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step-t {
  font-size: var(--fs-h4);
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1.5;
}
.step-s {
  font-size: var(--fs-ui);
  color: #475569;
  line-height: 1.75;
}
.steps-cta { text-align: center; }

/* --------------------------------------------------------------------------
   ۶) کارت های علائم خرابی
   -------------------------------------------------------------------------- */
.symp-grid {
  display: grid;
  /* auto-fit و نه auto-fill: با ۱۶ کارت، auto-fill در عرض های میانی
     یک ستون خالی می سازد و ردیف آخر کج به نظر می رسد. */
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.symp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* ارتفاع یکسان برای همه، چه عنوان یک خط باشد چه دو خط. بدون این،
     کارت های یک خطی کوتاه تر می مانند و ردیف دندانه دار می شود. */
  min-height: 58px;
  padding: 11px 13px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #fff;
  color: var(--brand-navy);
  font-size: var(--fs-small);
  line-height: 1.55;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.symp-card:hover,
a.symp-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), .13);
  transform: translateY(-2px);
}
.symp-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--red-pale);
  color: #B45309;
}
.symp-t { flex: 1 1 auto; min-width: 0; }
.symp-arr { flex: 0 0 auto; color: var(--accent); }

.symp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 18px;
  border: 1px dashed var(--blue-border);
  border-radius: 14px;
  background: var(--blue-light);
}
.symp-cta-note {
  font-size: var(--fs-ui);
  color: #475569;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   ۷) هزینه
   -------------------------------------------------------------------------- */
.price-range {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.price-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.price-cell.price-avg {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), .12);
}
.price-lbl { font-size: var(--fs-small); color: #64748B; }
.price-val {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  font-weight: 800;
  color: var(--brand-blue);
}
.price-cur { font-size: var(--fs-tiny); color: #64748B; }

.price-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.price-table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  font-size: var(--fs-ui);
}
.price-table th,
.price-table td {
  padding: 12px 14px;
  text-align: start;
  border-bottom: 1px solid #F1F5F9;
  line-height: 1.7;
}
.price-table thead th {
  background: var(--brand-blue);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-small);
}
.price-table tbody th { font-weight: 600; color: var(--brand-navy); }
.price-table tbody td { color: var(--accent-dark); font-weight: 700; white-space: nowrap; }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:nth-child(even) { background: #F8FAFC; }

.price-foot {
  font-size: var(--fs-small);
  color: #64748B;
  line-height: 1.8;
  margin: 0 0 16px;
}
.price-cta { text-align: center; }

@media (max-width: 560px) {
  .price-range { grid-template-columns: 1fr; gap: 8px; }
  .price-cell {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    text-align: start;
    padding: 12px 14px;
  }
}

/* --------------------------------------------------------------------------
   ۸) چیپ های برند
   -------------------------------------------------------------------------- */
.brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-chip {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--blue-border);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-blue);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
a.brand-chip:hover,
a.brand-chip:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.brand-chip.is-plain { color: #64748B; }

/* --------------------------------------------------------------------------
   ۹) نوار پایانی
   -------------------------------------------------------------------------- */
.hs-cta { padding-block: clamp(26px, 4vw, 42px); }
.hcta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 24px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand-blue), var(--accent));
  color: #fff;
}
.hcta-text { flex: 1 1 320px; min-width: 0; }
.hcta-title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.4;
  font-weight: 800;
  color: #fff;
}
.hcta-sub {
  margin: 8px 0 0;
  font-size: var(--fs-ui);
  line-height: 1.8;
  color: rgba(255,255,255,.9);
}
.hcta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.hcta-box .cta-btn.hcta-main {
  background: #fff;
  color: var(--accent-dark);
  border-color: #fff;
}
.hcta-box .cta-btn.hcta-main:hover { background: #F1F5F9; color: var(--accent-dark); }
.hcta-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-btn);
  text-decoration: none;
  transition: background .15s;
}
.hcta-tel:hover { background: rgba(255,255,255,.14); color: #fff; }
.hcta-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--fs-small);
  color: #64748B;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   ۱۰) کارت خدمت در کروسل
   -------------------------------------------------------------------------- */
.bc-carousel.is-svc .bc-track > * { flex: 0 0 auto; }
.svc-card {
  display: flex;
  flex-direction: column;
  width: 250px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.svc-card:hover,
.svc-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), .15);
  transform: translateY(-3px);
}
.svc-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--blue-light);
  overflow: hidden;
}
.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-noimg {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--blue-border);
}
.svc-card.no-img .svc-noimg { display: grid; }
.svc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px 15px;
  flex: 1 1 auto;
}
.svc-title {
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.65;
  color: var(--brand-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-go {
  margin-top: auto;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 560px) {
  .svc-card { width: 215px; }
}

/* فرزند شبکه باید خودش کشیده شود تا کارت داخلش height:100% بگیرد و
   کارت های یک ردیف هم قد بمانند. */
.symp-item { display: flex; }

/* نشان تیک بالای پیام موفقیت فرم — داخل مودال اولین چیزی است که
   کاربر بعد از ارسال می بیند. */
.fs-icon {
  display: flex;
  justify-content: center;
  color: #16A34A;
  margin-bottom: 10px;
}

/* فاصله میان نوار پایانی و «سوالات متداول» ۱۰۶ پیکسل می شد (۴۲ پایینِ
   یکی + ۶۴ بالای دیگری) و به شکل یک تکه فضای خالیِ بی دلیل دیده می شد. */
.hs-cta { padding-block-end: 16px; }
.hcta-note { margin-block-end: 0; }
.hs-cta + .hs-faq { padding-block-start: 24px; }

/* ==========================================================================
   دور ohom — هدر موبایل، اندازه لوگوها، h1 صفحه اصلی
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱) هدر موبایل
   ردیف هدر سه دکمه داشت: همبرگر، آچار «ثبت درخواست» و تلفن. هر سه
   تکراری بودند — نوار چسبان پایین صفحه (.ti-mobilebar) همیشه دیده
   می شود و همان تلفن، واتساپ و درخواست غرفه را دارد. نتیجه یک ردیف
   شلوغ با سه دکمه کوچک چپ و یک لوگوی کوچک راست بود، با یک حفره خالی
   وسطش.

   حالا ردیف موبایل فقط لوگو و همبرگر است: لوگو جا برای نفس کشیدن
   دارد و بزرگ تر می شود، و هیچ کاری از دست نمی رود.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* نوار بالای هدر هم می رود: پیام کوتاه در آن عرض بریده می شد
     («…محل، تمام برندها، گارانتی:») و تلفن و دکمه اش هم در نوار پایین
     هست. حذفش یک نوار درهم را از بالای صفحه برمی دارد. */
  .topbar { display: none; }

  .hdr-inner {
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
  }
  /* دکمه های تکراری */
  .hdr-mobile-actions { display: none !important; }

  .hdr-ham {
    order: -1; /* در راست چین یعنی سمت چپ */
    flex: 0 0 auto;
    inline-size: 44px;
    block-size: 44px;
  }
  .site-logo { flex: 0 1 auto; min-inline-size: 0; }

  /* لوگو ۲۰٪ بزرگ تر: ۴۸ → ۵۸ */
  .brand-logo { block-size: 58px; }
  .brand-mark { inline-size: 58px; block-size: 58px; }

  /* هنگام اسکرول هدر جمع می شود ولی لوگو نباید ریز شود */
  .site-header.is-compact .brand-logo { block-size: 48px; }
  .site-header.is-compact .brand-mark { inline-size: 48px; block-size: 48px; }

  /* نوار چسبان پایین، انتهای صفحه را می پوشاند */
  body { padding-block-end: 68px; }
}

@media (max-width: 560px) {
  /* ۴۰ → ۴۸ */
  .brand-logo { block-size: 48px; }
  .brand-mark { inline-size: 48px; block-size: 48px; }
  .hdr-inner { min-height: 62px; }
}

@media (max-width: 380px) {
  /* ۳۴ → ۴۱ */
  .brand-logo { block-size: 41px; }
  .brand-mark { inline-size: 41px; block-size: 41px; }
}

/* --------------------------------------------------------------------------
   ۲) لوگوی فوتر — ۳۰٪ بزرگ تر (۵۶ → ۷۳)
   -------------------------------------------------------------------------- */
.ti-brand img { width: 73px; }

/* --------------------------------------------------------------------------
   ۳) h1 صفحه اصلی
   عنوان اسلاید اول حالا h1 است. اندازه اش نباید از h2 قبلی فرق کند —
   فقط معنای نشانه گذاری عوض شده، نه طراحی.
   -------------------------------------------------------------------------- */
.swiper-h1 { font-size: inherit; margin: inherit; }

/* اگر روزی اسلایدر خاموش شود، این بلوک جای h1 را پر می کند */
.home-h1-fallback { padding-block: 22px 0; }
.home-h1-fallback h1 {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--brand-blue);
}

/* --------------------------------------------------------------------------
   سپر آخرِ جدول های محتوا
   جدول های مهاجرت شده min-width: 480px دارند تا ستون هایشان له نشوند.
   این عدد فقط وقتی بی خطر است که یک ظرفِ اسکرول شونده بالای سرشان باشد.
   اگر جدولی به هر دلیل بیرون از .table-scroll رندر شود (محتوای کش شده،
   مسیر رندر دیگری)، روی صفحه ۳۶۰ پیکسلی ۴۸۰ پیکسل می شود — و چون
   html/body مقدار overflow-x: clip دارند، بخش بیرون زده نه اسکرول
   می خورد نه دیده می شود؛ فقط بریده می شود.

   قاعده قبلی می خواست خودِ جدول را اسکرول کند (display:block) ولی
   min-width روی همان عنصر بود، پس اسکرولر هیچ وقت باریک تر از ۴۸۰
   نمی شد. آن ترکیب هیچ وقت نمی توانست کار کند.
   -------------------------------------------------------------------------- */
.page-content > table,
.section-content > table {
  display: table;
  min-width: 0;
  overflow-x: visible;
}

/* ==========================================================================
   مهار سرریز افقی — سپر ساختاری
   --------------------------------------------------------------------------
   html/body مقدار overflow-x: clip دارند. یعنی هر عنصری که از عرض صفحه
   پهن تر شود، نه اسکرول بار می سازد و نه دیده می شود — فقط بریده می شود
   و در چیدمان راست چین، بریدگی از سمت چپ است. کاربر می بیند «متن و
   عکس رفته سمت چپ و نیست».

   محتوای مقاله ها از ویرایشگر سایت قدیم آمده و هیچ کلاسی ندارد؛ نمی توان
   تک تک حالت هایش را پیش بینی کرد. پس به جای شکار مورد به مورد، اینجا
   یک سقف عمومی گذاشته می شود: هیچ فرزندی حق ندارد از ظرفش پهن تر شود.
   ========================================================================== */

.page-article,
.page-main,
.page-aside,
.page-content,
.section-content { min-width: 0; max-width: 100%; }

/* فرزندان مستقیمِ محتوا — همان <div dir="rtl"> های ویرایشگر قدیم */
.page-content > *,
.section-content > * { max-width: 100%; }

/* رسانه ها: با !important چون قاعده های قدیمی main.css و site-base.css
   هر کدام width خودشان را می گذارند و ترتیبشان قابل اتکا نیست. */
.page-content img, .page-content video, .page-content iframe,
.page-content embed, .page-content object, .page-content svg,
.section-content img, .section-content video, .section-content iframe {
  max-width: 100% !important;
  height: auto;
}

/* واژه یا آدرس بلندِ بدون فاصله نباید ظرف را باز کند */
.page-content, .section-content { overflow-wrap: anywhere; }

/* pre و code از همه بیشتر مستعد پهن شدن اند */
.page-content pre, .section-content pre { overflow-x: auto; max-width: 100%; }

/* --------------------------------------------------------------------------
   لایه ای که در بسته قبل جا مانده بود
   قبلا فقط .page-content و فرزندانش سقف گرفتند. ولی .page-main فرزندان
   دیگری هم دارد که هیچ کدام سقف نداشتند:

     .page-head .page-content .quote-cta .share-box .tcar
     .comments-section

   و «.tcar» (کروسل مطالب مرتبط) فقط در صفحات مقاله ساخته می شود —
   page_types/article/view.php تنها جایی است که $relatedCarousel را
   می سازد. همین توضیح می دهد چرا مشکل «فقط در صفحات مقالات» دیده
   می شود و بقیه صفحه ها سالم اند.

   ‏breadcrumb هم بیرون از .page-article است و در بسته قبل پوشش نداشت؛
   روی مقاله ها بلندترین حالتش را دارد (سه سطح با عنوان کامل مقاله).
   -------------------------------------------------------------------------- */
#main-content > *,
.page-article > *,
.page-main > *,
.page-aside > * { max-width: 100%; min-width: 0; }

.breadcrumb, .breadcrumb > ol, .breadcrumb > .container { max-width: 100%; }

/* کروسل: ریل خودش اسکرول می خورد، ولی ظرف و سرش هم نباید پهن شوند */
.tcar, .tcar-head, .tcar-head-side { max-width: 100%; min-width: 0; }
.tcar-track { max-width: 100%; min-width: 0; }
.tcar-head { flex-wrap: wrap; }

/* بخش هایی که ممکن است محتوای پهن داشته باشند */
.quote-cta, .share-box, .comments-section,
.comments-wrapper, .comment-form { max-width: 100%; min-width: 0; }

/* ==========================================================================
   چیدمان موبایل مقاله — گرید کنار گذاشته می شود
   --------------------------------------------------------------------------
   نشانه ای که مالک سایت داد دقیق بود: «در دسکتاپ دو ستون است؛ در موبایل
   ستون سمت راست فیت نمی شود» و «از بالا تا ارسال دیدگاه مشکل هست، بعدش
   نه». در چیدمان راست چین، ستون سمت راست همان ستون اول گرید یعنی
   .page-main است، و دقیقا در «ارسال دیدگاه» تمام می شود. یعنی خودِ ستون
   پهن می ماند، نه یک عنصر تکی داخلش.

   تا اینجا با minmax(0,1fr) و min-width:0 و max-width:100% تلاش شد ستون
   جمع شود و نشد. پس به جای تنظیم کردن گرید، گرید در موبایل **کنار
   گذاشته می شود**: یک جعبه block همیشه دقیقا به اندازه ظرفش است — نه
   fr در کار است، نه کمینه خودکارِ min-content، نه هیچ رفتار ظریف دیگری
   که بشود اشتباه فهمید.

   ‏!important عمدی است. سه شیوه نامه روی هم بار می شوند و بدون مرورگر
   نمی توانم آبشار را قطعی بسنجم؛ اینجا قطعیت مهم تر از ظرافت است.
   ========================================================================== */
@media (max-width: 1024px) {
  .page-article.has-aside { display: block !important; }

  .page-article.has-aside > .page-main,
  .page-article.has-aside > .page-aside {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    float: none !important;
  }
  .page-article.has-aside > .page-aside { margin-block-start: var(--sp-6); }

  .page-article { width: auto !important; max-width: 100% !important; }
}

/* ==========================================================================
   آرشیو مقالات — کارت شاخص + شبکه
   ========================================================================== */

.art-archive { margin-block-start: var(--sp-5); }

/* --- کارت شاخص (تازه ترین مقاله) --------------------------------------- */
.art-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  margin-block-end: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.art-hero:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), .16);
  transform: translateY(-3px);
  color: inherit;
}
.art-hero-media { display: block; overflow: hidden; background: var(--blue-light); }
.art-hero-media img {
  width: 100%; height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.art-hero-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(18px, 2.4vw, 30px);
}
.art-badge {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--accent-dark);
  font-size: var(--fs-tiny);
  font-weight: 700;
}
.art-hero-title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.5;
  font-weight: 800;
  color: var(--brand-blue);
}
.art-hero-excerpt {
  font-size: var(--fs-ui);
  line-height: 1.9;
  color: #475569;
}
.art-go {
  margin-block-start: auto;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent);
}

/* --- شبکه کارت ها ------------------------------------------------------- */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: var(--sp-5);
}
.art-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.art-card:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), .14);
  transform: translateY(-3px);
  color: inherit;
}
.art-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--blue-light);
  overflow: hidden;
}
.art-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-card-noimg {
  position: absolute; inset: 0;
  display: none; place-items: center;
  color: var(--blue-border);
}
.art-card.no-img .art-card-noimg { display: grid; }

.art-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1 1 auto;
}
.art-card-title {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: 1.6;
  font-weight: 700;
  color: var(--brand-navy);
  /* دو خط ثابت تا کارت های یک ردیف هم قد بمانند */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-card-excerpt {
  font-size: var(--fs-small);
  line-height: 1.85;
  color: #64748B;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-meta {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-block-start: var(--sp-2);
  font-size: var(--fs-tiny);
  color: #94A3B8;
}
.art-meta > span + span::before {
  content: '·';
  margin-inline-end: 12px;
  color: #CBD5E1;
}

@media (max-width: 760px) {
  .art-hero { grid-template-columns: 1fr; }
  .art-hero-media img { aspect-ratio: 16 / 9; }
  .art-hero-title { font-size: var(--fs-h4); }
}
@media (max-width: 460px) {
  .art-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* =====================================================================
   قهرمان صفحه اصلی (views/home_sections/hero.php)
   بدون جاوااسکریپت. موبایل فرست: زیر ۹۰۰ پیکسل تک ستونی می شود و
   تصویر پایین متن می رود، چون ۹۴٪ بازدید این سایت موبایل است.
   ===================================================================== */
.hs-hero{
  background:linear-gradient(135deg,var(--brand-navy) 0%,var(--brand-blue) 100%);
  color:#fff;padding:var(--sp-7) 0;
}
.hs-hero .hero-grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:center;
}
.hero-h1{
  font-size:var(--fs-h1);line-height:var(--lh-h1);margin:0 0 var(--sp-4);
  color:#fff;font-weight:700;
}
.hero-lead{
  font-size:var(--fs-lead);line-height:var(--lh-lead);
  margin:0 0 var(--sp-5);color:#DCE6F3;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.hero-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-lg);
  font-size:var(--fs-btn);font-weight:600;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.hero-btn:hover{transform:translateY(-2px)}
/* طلایی روی سرمه ای: متن سرمه ای روی طلایی، کنتراست ۷٫۴:۱ */
.hero-btn-1{background:var(--gold);color:var(--brand-navy);box-shadow:0 6px 18px rgba(201,162,39,.28)}
.hero-btn-1:hover{background:var(--red-dark)}
.hero-btn-2{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.hero-btn-2:hover{background:rgba(255,255,255,.2)}
.hero-phone{font-size:var(--fs-ui);color:#C3D3E8;margin:0 0 var(--sp-4)}
.hero-phone a{color:#fff;font-weight:700;text-decoration:none;letter-spacing:.04em}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  list-style:none;margin:0;padding:0;font-size:var(--fs-small);color:#DCE6F3;
}
.hero-badges li{display:flex;align-items:center;gap:.45rem}
.hero-badges i{color:var(--gold)}
.hero-media img{
  display:block;width:100%;height:auto;max-width:100%;
  border-radius:var(--radius-xl);box-shadow:0 18px 44px rgba(0,0,0,.28);
}
@media (min-width:900px){
  .hs-hero{padding:var(--sp-8) 0}
  .hs-hero .hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-7)}
}

/* =====================================================================
   پرسش و پاسخ حقوقی (page_types/qa/view.php)
   ===================================================================== */
.qa-count{
  font-size:var(--fs-ui);color:var(--text-light);
  padding:var(--sp-3) 0 var(--sp-5);border-bottom:1px solid var(--border);
  margin-bottom:var(--sp-5);
}
.qa-item{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-5);margin-bottom:var(--sp-5);background:var(--bg);
}
.qa-item:target{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-pale)}
.qa-head{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:baseline;margin-bottom:var(--sp-2)}
.qa-who{font-weight:700;color:var(--brand-blue);font-size:var(--fs-ui)}
.qa-who-expert{color:var(--gold-dark)}
.qa-when{font-size:var(--fs-tiny);color:var(--text-muted)}
.qa-text{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text)}
.qa-q{padding-bottom:var(--sp-4)}
.qa-a{
  border-top:2px solid var(--gold);background:var(--gold-pale);
  border-radius:var(--radius);padding:var(--sp-4);margin-top:var(--sp-3);
}
.qa-src{
  display:inline-block;margin-top:var(--sp-3);font-size:var(--fs-small);
  color:var(--brand-blue-mid);text-decoration:none;
}
.qa-src:hover{text-decoration:underline}
.qa-pending{font-size:var(--fs-small);color:var(--text-muted);margin-top:var(--sp-3)}
.qa-empty{padding:var(--sp-6) 0;color:var(--text-light)}
.pager{display:flex;gap:var(--sp-4);align-items:center;justify-content:center;padding:var(--sp-6) 0}
.pager a{
  padding:.6rem 1.2rem;border:1px solid var(--brand-teal-border);
  border-radius:var(--radius);color:var(--brand-blue-mid);
  text-decoration:none;font-size:var(--fs-ui);
}
.pager a:hover{background:var(--blue-light)}
.pager-now{font-size:var(--fs-small);color:var(--text-light)}

/* =====================================================================
   کشوی منوی موبایل — بستنِ واقعی، نه فقط بردن به بیرون کادر
   ---------------------------------------------------------------------
   کشو با right:-100% از دید بیرون می رود ولی visibility همچنان visible
   می ماند؛ یعنی لینک هایش در ترتیب Tab و در درخت دسترس پذیری باقی
   می مانند و کاربر کیبورد داخل منوی بسته گم می شود. اندازه گیری روی
   عرض ۳۷۵ پیکسل: پنل ۳۳۰ پیکسلی در left:420 نقاشی می شد.
   (اسکرول افقی رخ نمی داد چون html و body در این پوسته overflow-x:clip
   دارند — سایت های هم خانواده این محافظ را نداشتند و صفحه می لغزید.)

   انتقالِ visibility با تاخیر برابر مدت اسلاید تنظیم شده تا انیمیشن
   بسته شدن دیده شود و بعد کشو واقعا از دسترس خارج شود؛ در باز شدن
   تاخیر صفر است تا اسلاید از همان لحظه دیده شود.
   ===================================================================== */
@media (max-width: 960px) {
  .hdr-nav {
    visibility: hidden;
    transition: right .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
  }
  .hdr-nav.open {
    visibility: visible;
    transition: right .32s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }
}

/* =====================================================================
   کوتاه کردن متن های بلند — پرسش و پاسخ و دیدگاه ها
   ---------------------------------------------------------------------
   متن در DOM می ماند و فقط بریده نمایش داده می شود. عمدا از
   display:none استفاده نشده: این پرسش و پاسخ ها محتوای ایندکس شونده
   سایت اند. line-clamp متن را برای خزنده کامل نگه می دارد.
   ===================================================================== */
.comment-body.is-clamped,
.qa-text.is-clamped{
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.clamp-toggle{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-top:.5rem;padding:.25rem 0;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--fs-small);font-weight:600;
  color:var(--brand-blue-mid);
}
.clamp-toggle::after{content:'‹';display:inline-block;transform:rotate(-90deg);font-size:1.1em;line-height:1}
.clamp-toggle[aria-expanded="true"]::after{transform:rotate(90deg)}
.clamp-toggle:hover{color:var(--brand-blue);text-decoration:underline}
.clamp-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* =====================================================================
   دکمه داخل متن — .page-content a رنگ لینک را روی .btn-primary سوار
   می کرد (وزن ۰٫۱٫۱ در برابر ۰٫۱٫۰) و متن دکمه سرمه ای روی سرمه ای
   می افتاد؛ یعنی نامرئی. این قاعده همان را برمی گرداند.
   ===================================================================== */
.page-content a.btn,
.hs-html-body a.btn{text-decoration:none;font-weight:600}
.page-content a.btn-primary,
.hs-html-body a.btn-primary{color:#fff}
.page-content a.btn-primary:hover,
.hs-html-body a.btn-primary:hover{color:#fff}

/* =====================================================================
   بلوک پرسش و پاسخ صفحه اصلی (views/home_sections/qa_teaser.php)
   ===================================================================== */
.hs-qa{background:var(--blue-light);padding:var(--sp-7) 0}
.qa-teaser{
  display:grid;grid-template-columns:1fr;gap:var(--sp-5);align-items:center;
}
.qa-teaser-copy h2{margin:0 0 var(--sp-3);font-size:var(--fs-h2);color:var(--brand-blue)}
.qa-teaser-copy p{margin:0 0 var(--sp-4);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-light)}
.qa-teaser-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.qa-teaser-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.5rem;border-radius:var(--radius-lg);
  font-size:var(--fs-btn);font-weight:700;text-decoration:none;
  background:var(--brand-blue);color:#fff;border:1.5px solid var(--brand-blue);
}
.qa-teaser-btn:hover{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.qa-teaser-btn-alt{background:#fff;color:var(--brand-blue)}
.qa-teaser-btn-alt:hover{background:var(--gold);border-color:var(--gold);color:var(--brand-navy)}
.qa-teaser-stats{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.qa-teaser-stat{text-align:center}
.qa-teaser-stat b{display:block;font-size:2rem;line-height:1.2;color:var(--gold-dark)}
.qa-teaser-stat span{font-size:var(--fs-small);color:var(--text-light)}
@media (min-width:900px){
  .qa-teaser{grid-template-columns:1.6fr 1fr;gap:var(--sp-7)}
}

/* =====================================================================
   صفحه پرسش و پاسخ — فرم بالا، فهرست پایین
   ===================================================================== */
.qa-ask-intro h2{margin:0 0 var(--sp-2);font-size:var(--fs-h3);color:var(--brand-blue)}
.qa-ask-intro p{margin:0 0 var(--sp-4);color:var(--text-light);line-height:var(--lh-body)}
.qa-listbar{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  justify-content:space-between;
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-5);
  border-bottom:2px solid var(--gold);
}
.qa-listbar-title{margin:0;font-size:var(--fs-h3);color:var(--brand-blue)}
.qa-listbar .qa-count{
  display:inline-block;margin-inline-start:.6rem;padding:.15rem .6rem;
  border-radius:999px;background:var(--gold-pale);color:var(--gold-dark);
  font-size:var(--fs-tiny);font-weight:700;border:0;
}
.qa-listbar-ask{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:var(--radius);
  background:var(--brand-blue);color:#fff;text-decoration:none;
  font-size:var(--fs-small);font-weight:600;
}
.qa-listbar-ask:hover{background:var(--brand-navy);color:#fff}

/* =====================================================================
   وکلا — کارت فهرست و پروفایل
   ===================================================================== */
.lawyer-grid{
  display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.lawyer-card{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--bg);transition:box-shadow .2s ease,transform .2s ease;
}
.lawyer-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.lawyer-card-link{display:block;text-decoration:none;color:inherit}
.lawyer-card-photo{
  display:block;width:100%;aspect-ratio:10/11;object-fit:cover;background:var(--blue-light);
}
.lawyer-card-noimg{
  display:grid;place-items:center;font-size:3rem;color:var(--brand-teal-border);
}
.lawyer-card-body{display:block;padding:var(--sp-4)}
.lawyer-card-name{display:block;font-size:var(--fs-h4);font-weight:700;color:var(--brand-blue)}
.lawyer-card-specialty{display:block;margin-top:.35rem;font-size:var(--fs-small);color:var(--text-light);line-height:1.7}
.lawyer-card-meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.6rem;font-size:var(--fs-tiny);color:var(--text-muted)}
.lawyer-card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.lawyer-card-tags span{
  padding:.15rem .55rem;border-radius:999px;
  background:var(--blue-light);color:var(--brand-blue-mid);font-size:var(--fs-tiny);
}
.lawyers-empty{padding:var(--sp-6) 0;color:var(--text-light)}

.lawyer-profile{
  display:grid;grid-template-columns:1fr;gap:var(--sp-5);
  padding:var(--sp-5);margin-bottom:var(--sp-5);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--blue-light) 0%,var(--bg) 100%);
}
.lawyer-photo img{
  display:block;width:100%;max-width:280px;height:auto;
  border-radius:var(--radius-lg);object-fit:cover;
  box-shadow:0 10px 30px rgba(14,36,64,.16);
}
.lawyer-specialty{margin:0 0 var(--sp-4);font-size:var(--fs-lead);color:var(--brand-blue);font-weight:600;line-height:1.7}
.lawyer-facts{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);list-style:none;margin:0 0 var(--sp-4);padding:0}
.lawyer-facts li{display:flex;flex-direction:column;gap:.15rem}
.lawyer-facts span{font-size:var(--fs-tiny);color:var(--text-muted)}
.lawyer-facts b{font-size:var(--fs-body);color:var(--brand-blue)}
.lawyer-practice h2{margin:0 0 var(--sp-2);font-size:var(--fs-h4);color:var(--brand-blue)}
.lawyer-practice ul{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 var(--sp-4);padding:0}
.lawyer-practice li{
  padding:.3rem .75rem;border-radius:999px;
  background:var(--gold-pale);color:var(--gold-dark);
  font-size:var(--fs-small);font-weight:600;border:1px solid var(--gold-border);
}
.lawyer-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.lawyer-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.4rem;border-radius:var(--radius-lg);
  font-size:var(--fs-btn);font-weight:700;text-decoration:none;
}
.lawyer-btn-call{background:var(--gold);color:var(--brand-navy);letter-spacing:.03em}
.lawyer-btn-call:hover{background:var(--red-dark);color:#fff}
.lawyer-btn-consult{background:var(--brand-blue);color:#fff}
.lawyer-btn-consult:hover{background:var(--brand-navy);color:#fff}
@media (min-width:760px){
  .lawyer-profile{grid-template-columns:280px 1fr;gap:var(--sp-6);align-items:start}
}

/* =====================================================================
   فاصله گذاری — اصلاح تداخل کلاس کروسل و یکدست کردن پدینگ کارت ها
   ---------------------------------------------------------------------
   ریشه مشکل: کلاس `.tcar-card` در این پوسته دو معنی دارد —
     ۱) نوع اندازه روی خودِ <section> (class="tcar tcar-card")
     ۲) کارت هر آیتم روی <a> (class="tcar-card")
   پس <section> استایل کارت آیتم را به ارث می برد: پس زمینه سفید،
   حاشیه ۱ پیکسل، گردی ۱۰ پیکسل، `flex-direction: column` و
   `height: 100%` — و چون پدینگ ندارد، عنوان «مقالات مرتبط» یک پیکسل
   از گوشه کادر فاصله داشت. اثر جانبی دیگرش این بود که hover روی کل
   کادر، همه بلوک را ۳ پیکسل بالا می برد.

   اینجا ظاهر کادر عمداً و با پدینگ درست تعریف می شود و ارث بری های
   ناخواسته خنثی می شوند. وزن `.tcar.tcar-card` (۰٫۲٫۰) از
   `.tcar-card` (۰٫۱٫۰) بیشتر است، پس بی نیاز از !important برنده است.
   ===================================================================== */
.tcar.tcar-card,
.tcar.tcar-compact{
  display:block; /* لغو flex-direction:column ارث بری شده */
  height:auto;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  margin:var(--sp-7) 0 0;
}
/* کل کادر نباید مثل یک کارت قابل کلیک بالا بپرد */
.tcar.tcar-card:hover,
.tcar.tcar-compact:hover{
  transform:none;
  box-shadow:none;
}
/* عنوان و دکمه ها از لبه کادر نفس بکشند */
.tcar-head{
  margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
}
/* ریل کارت ها تا لبه پدینگ اسکرول می شود، نه بیشتر */
.tcar-track{padding-block:var(--sp-2) var(--sp-3)}

@media (max-width:640px){
  .tcar.tcar-card,
  .tcar.tcar-compact{padding:var(--sp-4)}
  .tcar-head{margin-bottom:var(--sp-4)}
}

/* --------------------------------------------------------------------
   یکدست سازی پدینگ داخلی کارت ها
   مقیاس واحد: کارت بزرگ = --sp-5 (۲۴px) ، کارت کوچک = --sp-4 (۱۶px)
   روی موبایل یک پله پایین تر.
   -------------------------------------------------------------------- */
.lawyer-card-body{padding:var(--sp-5)}
.tcar-body{padding:var(--sp-4);gap:var(--sp-2)}
.qa-a{padding:var(--sp-4) var(--sp-5)}

@media (max-width:640px){
  .lawyer-card-body{padding:var(--sp-4)}
  .qa-item{padding:var(--sp-4)}
  .qa-a{padding:var(--sp-3) var(--sp-4)}
  .lawyer-profile{padding:var(--sp-4)}
}

/* بخش سوالات متداول.
   sections/faq.php کلاس `.section-faq2` را رندر می کند نه `.section-faq`
   (و استایل داخلی خودش را هم دارد)؛ اینجا فقط فاصله بیرونی و عنوان
   تنظیم می شود. */
.section-faq2{margin-block:var(--sp-6) 0}
.section-faq2 .section-title{margin-bottom:var(--sp-4)}
.section-faq2 .faq2-list{gap:var(--sp-3)}

/* ==========================================================================
   دور هشتم — مرز بخش های صفحه اول
   --------------------------------------------------------------------------
   دو ایراد گزارش شد و هر دو یک ریشه داشتند.

   ۱) فضای خالی. سه پدینگ که از وجود هم خبر نداشتند روی هم جمع می شدند:

        پدینگ پایین بخش بالایی   ۶۴ + ۵۴ (ارتفاع موج)  = ۱۱۸px
        پدینگ بالای بخش پایینی                         =  ۵۶px
        مارجین بالای عنوان بخش   (--sp-7 ، خط ۱۹۷)     =  ۴۴px
                                                        ---------
        فاصله کارت ها تا تیتر بعدی                     = ۲۱۸px

      روی نمایشگر ۹۰۰ پیکسلی یعنی نزدیک یک چهارم صفحه بین دو بخش خالی
      می ماند. حالا ۱۲۰px است؛ مرز خوانده می شود ولی صفحه پاره نمی شود.

   ۲) شکل موج. موج قبلی در نوار ۵۴ پیکسلی، ۵۶ واحد از ۶۰ واحدِ viewBox را
      بالا و پایین می رفت — یک S بزرگ و دندانه دار، آن هم بین دو رنگی که
      فقط ۳٪ با هم فرق دارند (‎#EDF5F6‎ و سفید). حالا یک قوس کم عمق و پهن
      است: مرز حس می شود، خودش موضوع صفحه نمی شود.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱) عنوان بخش مارجین بالا نمی گیرد
   --------------------------------------------------------------------------
   قاعده گروهیِ خط ۱۹۷ همین فایل، عنوان بخش را با h2 وسط متن یکی گرفته و به
   هر دو ‎--sp-7‎ مارجین بالا داده. برای h2 وسط مقاله درست است؛ برای عنوانی
   که اولین چیزِ داخل بخش است، دقیقاً پدینگ خودِ بخش را دوباره می سازد.
   (در همه بخش های صفحه اول، عنوان اولین فرزند ظرف است — بررسی شد.)
   -------------------------------------------------------------------------- */

.hs-section .hs-title,
.hs-section .hs-title-row { margin-block-start: 0; }
/* بالا ۴۴ و پایین ۶ بود؛ عنوان از فضای بالای سرش دور و به متن خودش چسبیده
   بود. حالا فاصله زیر عنوان با بقیه بخش ها یکی است. */
.hs-text-image .hs-title { margin-block-end: 16px; }

/* --------------------------------------------------------------------------
   ۲) جداکننده دیگر ارتفاعش را به پدینگ اضافه نمی کند
   --------------------------------------------------------------------------
   دور هفتم برای اینکه موجِ ۵۴ پیکسلی روی کارت ها نیفتد، ارتفاع موج را
   *به علاوهٔ* پدینگ کرده بود. با موجِ کوتاهِ جدید لازم نیست: ۶۴ پیکسل
   پدینگ منهای ۲۴ پیکسل موج، هنوز ۴۰ پیکسل فضای خالی زیر کارت ها می گذارد.

   ‎:not(.hs-slider)‎ لازم است: اسلایدر تمام عرض عمداً پدینگ عمودی ندارد و
   این قاعده نباید به آن پدینگ برگرداند.
   -------------------------------------------------------------------------- */

:root { --sep-h: clamp(14px, 1.8vw, 24px); }

.hs-section.sep-wave:not(.hs-slider),
.hs-section.sep-angle:not(.hs-slider) { padding-block-end: 64px; }

@media (max-width: 768px) {
  .hs-section.sep-wave:not(.hs-slider),
  .hs-section.sep-angle:not(.hs-slider) { padding-block-end: 44px; }
}

/* --------------------------------------------------------------------------
   ۳) شکل موج — یک قوس کم عمق به جای S بزرگ
   --------------------------------------------------------------------------
   قوسِ قبلی در نوار ۵۴ پیکسلی ۲۷ پیکسل بالا و پایین می رفت. این یکی در
   نوار ۲۴ پیکسلی ۸ پیکسل: از ۸px در لبه ها تا ۱۶px در میانه. تک قوس است
   نه S دوتایی و دو لبه اش تقریباً هم ارتفاع اند، پس نه «موجِ کارتونی»
   می شود و نه کج به نظر می رسد.
   -------------------------------------------------------------------------- */

:root {
  --sep-wave-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40C280 16 720 12 1200 36V60H0Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ==========================================================================
   دور نهم — لوگوی هدر و فوتر، ۲۰٪ بزرگ تر
   --------------------------------------------------------------------------
   اندازه لوگو در پنج جای مختلف و در سه فایل نوشته شده بود (main.css با
   ‎.site-logo img‎، و site-base.css در سه دورِ پیاپی). برای اینکه این دور
   هم یک لایه دیگر به آن انبار اضافه نکند، همه اندازه ها یک جا و با همان
   انتخابگرِ برنده (‎.site-logo .brand-logo‎ ، خاص بودگی ۰٬۲٬۰) نوشته شده اند.
   این فایل آخرین فایلِ بارگذاری شده است، پس همین ها ملاک اند.

   ارتفاع hdr-inner هم به همان اندازه ای که لوگو بزرگ شده بالا رفته، وگرنه
   لوگو به لبه بالا و پایین هدر می چسبید:

     عرض        لوگو            hdr-inner
     > ۱۲۰۰     ۶۸ → ۸۲         ۹۰ → ۱۰۴
     ≤ ۱۲۰۰     ۵۶ → ۶۷         ۷۴ → ۸۵
     ≤ ۸۶۰      ۵۶ → ۶۷         ۶۶ → ۷۷
     ≤ ۵۶۰      ۴۴ → ۵۳         ۶۲ → ۷۱
     ≤ ۳۸۰      ۳۸ → ۴۶         ۷۱

   حالت جمع شده (is-compact ، بعد از اسکرول) هم به همان نسبت بزرگ شده،
   وگرنه لوگو موقع اسکرول یک پرش اندازه پیدا می کرد.
   ========================================================================== */

.site-logo .brand-logo,
.drawer-logo .brand-logo { block-size: 82px; height: 82px; }
.site-header.is-compact .site-logo .brand-logo { block-size: 60px; height: 60px; }
.brand.brand-has-logo { max-inline-size: 360px; }
.hdr-inner { min-height: 104px; }
.site-header.is-compact .hdr-inner { min-height: 76px; }

@media (max-width: 1200px) {
  .site-logo .brand-logo,
  .drawer-logo .brand-logo { block-size: 67px; height: 67px; }
  .site-header.is-compact .site-logo .brand-logo { block-size: 53px; height: 53px; }
  .hdr-inner { min-height: 85px; }
  .site-header.is-compact .hdr-inner { min-height: 69px; }
}

@media (max-width: 860px) {
  .hdr-inner { min-height: 77px; }
}

@media (max-width: 560px) {
  .site-logo .brand-logo,
  .drawer-logo .brand-logo { block-size: 53px; height: 53px; }
  .brand.brand-has-logo { max-inline-size: 240px; }
  .hdr-inner { min-height: 71px; }
}

@media (max-width: 380px) {
  .site-logo .brand-logo,
  .drawer-logo .brand-logo { block-size: 46px; height: 46px; }
  .brand.brand-has-logo { max-inline-size: 198px; }
}

/* --------------------------------------------------------------------------
   لوگوی فوتر — ۷۳ → ۸۸
   ارتفاع از روی نسبت خودِ تصویر می آید (height: auto در خط ۱۰۳۰)، پس فقط
   عرض عوض می شود: ۸۳ → ۱۰۰ پیکسل ارتفاع.
   -------------------------------------------------------------------------- */
.ti-brand img { width: 88px; }

/* ==========================================================================
   دور دهم — تصویر بخش معرفی، بدون قاب و پس زمینه
   --------------------------------------------------------------------------
   ‎.ti-image‎ یک «کارت» بود، نه یک تصویر: پس زمینه فیروزه ای کم رنگ، سایه،
   گوشه گرد، ارتفاع کمینه ۲۲۰ پیکسل، و یک قاب فیروزه ای جابه جا شده روی
   ‎::after‎. آن پس زمینه اصلاً برای روزی گذاشته شده بود که پوشه ‎/imgs/‎ هنوز
   از سرور قدیم کپی نشده بود و تصویرها نمی آمدند — یعنی یک داربستِ موقت که
   ماندگار شده بود.

   حالا فقط خودِ تصویر است. اگر PNG با پس زمینه شفاف بگذارید، پس زمینه بخش
   از پشتش دیده می شود، نه یک مستطیل فیروزه ای.

   دامنه: فقط بخش صفحه اول. ‎.ti-image‎ داخل صفحات دیگر قاب خودش را نگه
   می دارد.
   ========================================================================== */

.hs-text-image .ti-image {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  min-block-size: 0;
}
.hs-text-image .ti-image::after { content: none; }
.hs-text-image .ti-image img { border-radius: 0; }

/* =====================================================================
   اجزای اختصاصی غرفه سازی کسری
   این بخش عمداً در انتهای فایل است: بعد از main.css و site-base.css
   بارگذاری می شود و هر چیزی که بالاتر تعریف شده را بازنویسی می کند.
   ===================================================================== */

/* --- کلید زبان در نوار بالا -----------------------------------------
   سایت قدیم همین لینک را با کلاس .lng در نوار آبی داشت. */
.topbar-lang {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; text-decoration: none;
  font-size: var(--fs-tiny); font-weight: 600;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  line-height: 1.9;
}
.topbar-lang span { letter-spacing: .04em; }   /* لاتین است، مجاز */
@media (hover: hover) {
  .topbar-lang:hover { background: rgba(255, 255, 255, .16); }
}
.topbar-lang:active { background: rgba(255, 255, 255, .24); }

/* --- ویدیوی صفحه اصلی ------------------------------------------------
   ردیف «متن + ویدیو» بالای صفحه اصلی سایت قدیم. */
.ti-image.ti-video { box-shadow: var(--shadow); background: #000; }
.ti-image.ti-video video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.ti-more { margin: var(--sp-4) 0 0; }

/* --- صفحه محصول -----------------------------------------------------
   نام کلاس ها عمداً pd-* است و نه product-*: در site-base.css یک
   ‎.product-card‎ هست که کارتِ فهرست محصولات را می سازد، و استفاده دوباره
   از همان نام، کارت جزئیات را با استایل کارت شبکه ای قاطی می کرد. */
.pd-wrap { margin: 0 0 var(--sp-6); }
.pd-card {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-5);
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.pd-main {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}
.pd-main img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: contain;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.pd-thumb {
  padding: 0; border: 2px solid var(--border);
  border-radius: 8px; overflow: hidden;
  background: #fff; cursor: pointer;
  /* هدف لمسی؛ زیر ۴۴ پیکسل روی موبایل قابل زدن نیست */
  min-height: 56px;
}
.pd-thumb img {
  display: block; width: 100%; height: 56px; object-fit: cover;
}
.pd-thumb.is-active { border-color: var(--accent); }
@media (hover: hover) {
  .pd-thumb:hover { border-color: var(--accent); }
}

.pd-price {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.pd-price-value {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 800;
  color: var(--red-text);       /* قرمز متن، نه #E72727 */
}
.pd-price-unit { font-size: var(--fs-small); color: var(--text-light); }
.pd-price-call { font-size: var(--fs-lead); font-weight: 700; color: var(--accent); }
.pd-stock-out {
  margin: 0 0 var(--sp-4);
  color: var(--red-text); font-weight: 600; font-size: var(--fs-small);
}

.pd-actions {
  /* گرید دو ستونه و نه flex-wrap: با flex، دکمه ها به محض بلندتر شدن
     شماره تلفن به خط بعد می پرند و ردیف نامرتب می شود. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.pd-actions .btn { min-width: 0; justify-content: center; }
.pd-btn-wa { background: #1FA855; color: #fff; }   /* ۳٫۴:۱ — متن درشت */
@media (hover: hover) { .pd-btn-wa:hover { background: #17833F; } }

@media (max-width: 780px) {
  .pd-card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-4); }
}

/* --- صفحات انگلیسی ---------------------------------------------------
   ‏html[dir=ltr] را layout.php می گذارد. متن انگلیسی نه نیم فاصله دارد و
   نه به line-height ۱٫۹۵ فارسی نیاز دارد. */
html[lang="en"] body { line-height: 1.75; }
html[lang="en"] .page-content { text-align: left; }
html[lang="en"] .page-h1,
html[lang="en"] .page-content h2,
html[lang="en"] .section-title { text-align: left; }

/* --- موبایل: حالت hover نباید بچسبد -----------------------------------
   بعد از یک تَپ، حالت hover تا تَپ بعدی روی همان کارت می ماند و کاربر
   فکر می کند آن کارت «انتخاب» شده. */
@media (hover: none) {
  .child-card:hover, .news-item:hover, .product-card:hover,
  .pd-thumb:hover, .topbar-lang:hover {
    background: inherit;
    border-color: inherit;
    transform: none;
    box-shadow: inherit;
  }
}

/* --- خط فارسی متصل است: هیچ letter-spacing منفی ------------------------
   main.css و site-base.css روی هشت انتخابگر letter-spacing منفی دارند.
   روی لاتین بی ضرر است، ولی فارسی خط متصل دارد و فاصله منفی، اتصال
   حروف را می شکند و «می شود» را شبیه «می شود» با درزهای نامرتب می کند.
   دو لایه پایه دست نخورده می مانند (تا به روزرسانی مشترکشان ساده بماند)
   و اینجا خنثی می شوند. شماره تلفن ها که رقم لاتین اند مستثنا هستند. */
.logo-text,
.page-h1,
.page-content h2,
.page-content h3,
.section-title,
.page-section .section-title,
.cta-btn,
.form-submit-btn,
.hs-slider .swiper-h2,
.brand-name,
.hs-title,
.child-card-title,
.news-item-title { letter-spacing: normal; }


/* =====================================================================
   دور دوم بازخورد — شهریور ۱۴۰۵
   ===================================================================== */

/* --- ۱) مقیاس فونت، یک پله کوچک تر ---------------------------------------
   در لپ تاپ ۱۳۶۶ پیکسلی h1 به ۳۶، تیتر بخش ها به ۲۸ و متن بدنه به ۱۸
   پیکسل می رسید؛ با عنوان های بلند و فنی این سایت، هر صفحه با یک دیوار
   تیتر شروع می شد. همه جا از همین توکن ها می خوانند، پس یک جا عوض شد. */
:root {
  --fs-h1:   clamp(1.375rem, 1.24rem + .6vw, 1.75rem);      /* 22 → 28 */
  --fs-h2:   clamp(1.1875rem, 1.12rem + .3vw, 1.375rem);    /* 19 → 22 */
  --fs-h3:   clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);   /* 17 → 19 */
  --fs-h4:   clamp(1rem, .98rem + .1vw, 1.0625rem);         /* 16 → 17 */
  --fs-body: clamp(.96875rem, .946rem + .1vw, 1.03125rem);  /* 15.5 → 16.5 */
  --fs-lead: clamp(1.03125rem, 1rem + .15vw, 1.125rem);     /* 16.5 → 18 */
}
/* وزن ۸۰۰ روی تیتر فارسی ۲۸ پیکسلی یک لکه سیاه می سازد */
.page-h1, .error-page h2 { font-weight: 700; }
/* عنوان های انگلیسی سایت قدیم تمام حروف بزرگ اند و درشت تر دیده می شوند */
html[lang="en"] .page-h1 { font-size: clamp(1.25rem, 1.12rem + .5vw, 1.625rem); } /* 20 → 26 */

/* --- ۲) صفحات انگلیسی: چپ به راست ---------------------------------------
   main.css جهت body را روی rtl قفل کرده بود؛ صفت dir="ltr" روی <html>
   به تنهایی کافی نبود و کل چیدمان راست به چپ می ماند. */
html[dir="ltr"] body { direction: ltr; }
html[dir="ltr"] .page-content,
html[dir="ltr"] .section-content { text-align: start; }
/* منوی انگلیسی هشت آیتم بلند دارد («CONSTRUCTION OF STEEL FRAMES»)؛
   با اندازه منوی فارسی از عرض بیرون می زد و روی لوگو می افتاد. */
html[lang="en"] .ni-link { font-size: 13px; padding-inline: 9px; }
@media (max-width: 860px) {
  /* در چپ به راست، لوگو سمت چپ و دکمه منو سمت راست */
  html[dir="ltr"] .hdr-ham { order: 3; }
}

/* --- ۳) نوار بالا: منوی «خانه، معرفی، وبلاگ، تماس با ما» و جستجو ------- */
.topbar-inner { justify-content: space-between; gap: 16px; }
.topbar-menu {
  display: flex; align-items: center; gap: 2px;
  min-width: 0; overflow: hidden;
}
.topbar-menu a {
  color: #fff; text-decoration: none; white-space: nowrap;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.8;
  padding: 3px 10px; border-radius: 6px;
}
@media (hover: hover) {
  .topbar-menu a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
}
.topbar-menu a:active { background: rgba(255, 255, 255, .24); }
.topbar-search {
  display: inline-grid; place-items: center;
  inline-size: 30px; block-size: 30px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.topbar-search svg { inline-size: 15px; block-size: 15px; }
@media (hover: hover) {
  .topbar-search:hover { background: rgba(255, 255, 255, .16); }
}
.topbar-search[aria-expanded="true"] { background: rgba(255, 255, 255, .24); }

/* روی موبایل نوار بالا پنهان است؛ همان منو زیر منوی اصلی داخل کشو می آید */
.nav-list-extra { display: none; }
@media (max-width: 860px) {
  .nav-list-extra {
    display: block; list-style: none;
    margin: 6px 10px 10px; padding: 10px 0 0;
    border-top: 1px solid var(--border);
  }
  .nav-list-extra a {
    display: flex; align-items: center; min-height: 44px;
    padding: 8px 12px; border-radius: 8px;
    color: var(--text); font-weight: 600; text-decoration: none;
  }
  .nav-list-extra a:active { background: var(--blue-light); }
}

/* --- ۴) لوگوی فوتر ۳۰٪ بزرگ تر (۸۸ ← ۱۱۴) ------------------------------- */
.ti-brand img { width: 114px; }
@media (max-width: 560px) {
  .ti-brand img { width: 96px; }
}

/* --- ۵) صفحه اصلی --------------------------------------------------------- */
/* بالای «سوالات متداول»: ۶۴ پیکسل padding بخش و ۴۴ پیکسل margin عنوان روی
   هم می افتادند و یک باند خالی می ساختند. */
.hs-section.hs-faq { padding-block-start: 20px; }
.hs-faq .page-section,
.hs-faq .section-title { margin-block-start: 0; }
.hs-section.hs-html { padding-block: 20px 8px; }

/* بلوک معرفی — در سایت قدیم همین ردیف روی زمینه #F0F0F0 بود */
.ti-v-about { background: var(--section-alt, #F0F0F0); }
.hs-title.hs-h1 {
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  text-align: start; margin-block-end: 18px; color: var(--brand-navy);
}
.about-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); margin: 0 0 10px; }
.about-services {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
}
.about-services li { margin: 0; }
.about-services li > a,
.about-services li > span {
  display: flex; align-items: center; gap: 10px; block-size: 100%;
  padding: 11px 13px; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-inline-start: 4px solid var(--red);
  border-radius: 10px; font-size: var(--fs-ui); font-weight: 600; line-height: 1.7;
  text-decoration: none;
}
.as-num {
  flex: 0 0 30px; block-size: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
}
@media (hover: hover) {
  .about-services a:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
}
.about-services a:active { background: var(--blue-light); }

/* ردیف بنیانگذار */
.ti-v-founder .ti-image { max-width: 360px; justify-self: center; border-radius: 18px; }
.founder-card { border-inline-start: 4px solid var(--red); padding: 6px 20px; }
.founder-name { margin: 0 0 6px; font-size: var(--fs-h2); font-weight: 800; color: var(--brand-navy); }
.founder-role { margin: 0 0 12px; font-size: var(--fs-lead); color: var(--text); }
.founder-place {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 4px 12px; border-radius: 999px;
  background: var(--blue-light); color: var(--accent-dark);
  font-size: var(--fs-small); font-weight: 600;
}
.ti-more { margin-block-start: 18px; }

/* --- ۶) کارت صفحات مرتبط داخل بخش ها (جدول ghesmat سایت قدیم) ---------- */
.lb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin: 14px 0 18px;
}
.lb-grid .link-banner { margin: 0; }
.lb-grid .link-banner-inner { block-size: 100%; }
.dak-more { margin: 6px 0 18px; }

/* --- ۷) لوگو روی صفحات انگلیسی ---------------------------------------------
   فایل لوگو متن فارسی دارد و نشان چرخ دنده در ستون های ۲۶۲ تا ۳۵۷ (از ۳۵۸)
   آن است، با فاصله خالی قبلش. object-fit: cover با object-position راست،
   همان نشان را به شکل مربع نشان می دهد و متن فارسی بیرون قاب می ماند.
   با آپلود لوگوی انگلیسی در site_logo_en این برش خودبه خود کنار می رود.
   انتخابگر دوکلاسه لازم است: «.site-logo img» خودش object-fit: contain و
   max-width: 100% می دهد و با .brand-crop تنها برنده می شد. اندازه هم صریح
   و مربع است؛ بدون آن تصویر ۳۵۸ پیکسلی تا سقف ۳۰۰ پیکسلیِ ظرف لوگو کش
   می آمد و جایی برای نام انگلیسی نمی ماند (روی سایت اندازه گیری شد). */
.site-logo img.brand-crop,
.drawer-logo img.brand-crop {
  object-fit: cover; object-position: 100% 50%;
  flex: 0 0 auto; max-width: none; aspect-ratio: auto;
  inline-size: 58px; block-size: 58px; width: 58px; height: 58px;
}
.site-header.is-compact .site-logo img.brand-crop {
  inline-size: 46px; block-size: 46px; width: 46px; height: 46px;
}
@media (max-width: 1040px) {
  .site-logo img.brand-crop, .drawer-logo img.brand-crop,
  .site-header.is-compact .site-logo img.brand-crop {
    inline-size: 46px; block-size: 46px; width: 46px; height: 46px;
  }
}
@media (max-width: 560px) {
  .site-logo img.brand-crop, .drawer-logo img.brand-crop,
  .site-header.is-compact .site-logo img.brand-crop {
    inline-size: 38px; block-size: 38px; width: 38px; height: 38px;
  }
}
.ti-brand img.ti-brand-crop {
  width: 72px; height: 72px;
  object-fit: cover; object-position: 100% 50%;
}

/* --- ۸) متن انگلیسی با dir="rtl" در صفحات انگلیسی ------------------------
   ویرایشگر سایت قدیم به خیلی از بندهای انگلیسی dir="rtl" داده بود (۸۰ عنصر
   در ۷ صفحه). صفحه های انگلیسی قدیم در قالب راست به چپ بودند و این دیده
   نمی شد؛ در صفحه چپ به راست، متن انگلیسی راست چین می شد و نقطه گذاری اش
   جابه جا. اینجا به چپ به راست برمی گردند. بندهای عربی و کردیِ صفحه اول
   انگلیسی lang دارند و راست به چپ می مانند. */
html[dir="ltr"] main [dir="rtl" i]:not([lang]) { direction: ltr; }

/* =====================================================================
   ۹) اجزای اختصاصی غرفه سازی کسری
   این بخش عمداً آخر فایل است: قاعده های پایه در main.css و site-base.css
   وزن بیشتری دارند و هرچه اینجا نوشته شود باید بعد از آن ها بیاید.
   ===================================================================== */

/* --- گالری گروهی (صفحه دسته طرح ها) --------------------------------- */
/* .gallery-item حالا <figure> است و مرورگر به figure حاشیه پیش فرض
   می دهد؛ بدون این خط، فاصله های شبکه به هم می ریزد. */
.section-gallery .gallery-item { margin: 0; position: relative; }

.gallery-count {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: var(--fs-tiny);
  line-height: 1.7;
  pointer-events: none;
}
.section-gallery-grouped .gallery-caption {
  font-weight: 600;
  color: var(--brand-navy);
  font-size: var(--fs-small);
  /* رقم لاتین کد طرح در متن فارسی باید چپ به راست بماند */
  direction: ltr;
  unicode-bidi: isolate;
}
.section-gallery-grouped .gallery-link { cursor: zoom-in; }

/* روی لمس، :hover بعد از ضربه می چسبد و آخرین کاشی انتخاب شده به نظر
   می رسد. بزرگ نمایی فقط جایی می ماند که موس واقعی هست. */
@media (hover: none) {
  .gallery-item:hover img { transform: none; }
}
.gallery-link:active img { transform: scale(.98); }

/* --- پیکان های لایت باکس -------------------------------------------
   ‏‹ و › از نظر یونیکد Bidi_Mirrored اند و داخل متن راست به چپ برعکس
   می شوند. با border کشیده می شوند تا جهتشان به جهت صفحه وابسته نباشد. */
.lb-chev {
  display: block;
  width: 13px; height: 13px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.lb-chev-l { transform: rotate(-135deg); margin-inline-start: 4px; }
.lb-chev-r { transform: rotate(45deg);   margin-inline-end: 4px; }

/* --- کارت مشخصات پروژه ---------------------------------------------- */
.project-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-5);
  background: var(--blue-light);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-lg);
}
.project-meta-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-ui); color: var(--text);
}
.project-meta-item i { color: var(--brand-navy); }
.project-meta-label { color: var(--text-light); }
.project-meta-item strong { font-weight: 700; color: var(--brand-navy); }

/* --- نوار چسبان پایین موبایل ----------------------------------------
   سایت قدیم همین نوار را داشت (واتساپ + تماس). با safe-area تنظیم
   می شود وگرنه روی آیفون زیر نوار خانه می افتد. */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-block-end: env(safe-area-inset-bottom); }
}

/* --- نوار لوگوی مشتریان --------------------------------------------- */
.hs-logos { background: var(--section-alt); padding-block: var(--sp-7); }
.logo-strip {
  display: flex; gap: var(--sp-5);
  margin: 0; padding: 0 0 var(--sp-2); list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.logo-cell {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  min-width: 150px; height: 84px;
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.logo-cell img {
  max-width: 130px; max-height: 56px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .2s, opacity .2s;
}
@media (hover: hover) {
  .logo-cell:hover img { filter: none; opacity: 1; }
}
@media (hover: none) {
  /* روی لمس، فیلتر خاکستری فقط لوگو را کدر نگه می دارد بدون اینکه
     کاربر بتواند آن را برگرداند. */
  .logo-cell img { filter: none; opacity: 1; }
}

/* --- صفحه ۴۰۴ -------------------------------------------------------
   ‏main.css قاعده «.error-page h1 { font-size: 88px }» دارد که برای
   کد ۴۰۴ نوشته شده بود. حالا h1 خودِ جمله است و عدد در یک <p> جدا
   نشسته، پس اندازه ها اینجا برمی گردند سر جایشان. */
.error-page { text-align: center; padding-block: var(--sp-8); }
.error-page .error-code {
  font-size: clamp(56px, 12vw, 96px);
  font-weight: 900; line-height: 1;
  color: var(--red);
  margin: 0 0 var(--sp-3);
}
.error-page h1 {
  font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-h2);
  color: var(--brand-navy);
  margin: 0 0 var(--sp-3);
}
.error-page .error-lead {
  color: var(--text-light); max-width: 46ch;
  margin: 0 auto var(--sp-5);
}
.error-search {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2);
  max-width: 520px; margin: 0 auto var(--sp-6);
}
.error-search input {
  min-width: 0;                 /* بدون این، ورودی در گرید کوچک نمی شود */
  padding: 12px 14px;
  font: inherit; font-size: var(--fs-form);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text);
}
.error-search button {
  padding: 12px 20px;
  font: inherit; font-weight: 700;
  color: #fff; background: var(--brand-navy);
  border: none; border-radius: var(--radius); cursor: pointer;
}
.error-search button:hover { background: var(--red); }
.error-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center; margin-bottom: var(--sp-6);
}
.error-links a {
  display: inline-flex; align-items: center;
  min-height: 38px;             /* هدف لمسی */
  padding: 6px 14px;
  border: 1px solid var(--blue-border); border-radius: 999px;
  background: var(--blue-light); color: var(--brand-navy);
  font-size: var(--fs-small); font-weight: 600;
}
@media (hover: hover) {
  .error-links a:hover { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
}
.error-page .error-call { color: var(--text-light); margin: 0; }
.error-page .error-call a { font-weight: 700; color: var(--red-text); }


/* =====================================================================
   ۱۰) بازطراحی — لایه هویت کسری دیزاین
   ---------------------------------------------------------------------
   این بلوک عمداً آخرین چیز در فایل است. main.css و site-base.css اسکلت
   مشترک چند سایت اند و قاعده هایشان وزن دارند؛ هرچه اینجا نوشته می شود
   باید بعد از آن ها بیاید وگرنه بی صدا بازنویسی می شود.

   منطق طراحی: کار این شرکت معماری است. پس خط صاف، سفیدِ زیاد، تیتر
   بزرگ مشکی، و قرمز فقط جایی که باید کاری انجام شود. هیچ کارت گرد و
   هیچ گرادیان آبی — همان دو چیزی که سایت را شبیه بقیه کرده بود.
   ===================================================================== */

/* --- ۱۰٫۱ پایه ------------------------------------------------------ */
body { background: #fff; color: var(--ink); }
::selection { background: var(--red); color: #fff; }

a { color: var(--ink); }
a:hover { color: var(--red-text); }
.page-content a { color: var(--red-text); text-decoration: underline;
                  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page-content a:hover { text-decoration-thickness: 2px; }

/* --- ۱۰٫۲ نوار بالا و هدر -------------------------------------------
   هدر قبلی گرادیان سرمه ای داشت. حالا: نوار مرکبِ باریک بالا، و زیرش
   یک نوار سفید با یک خط مو. همین دو تغییر بیشترین سهم را در «شبیه
   بقیه نبودن» دارد. */
.topbar {
  background: var(--ink);
  border-bottom: none;
  font-size: var(--fs-tiny);
}
.topbar-inner { min-block-size: 38px; }
.topbar a, .topbar-menu a { color: #C9CBD1; }
.topbar a:hover { color: #fff; }
.topbar-phone { color: #fff; font-weight: 700; letter-spacing: .04em; }
.topbar-cta {
  background: var(--red); color: #fff;
  border-radius: 2px; border: none;
  padding: 6px 14px; font-weight: 700;
}
.topbar-cta:hover, .topbar-cta:focus-visible { background: #fff; color: var(--ink); }
.topbar-search { color: #C9CBD1; }
.topbar-search:hover { color: #fff; }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--ink-line);
  box-shadow: none;
}
.site-header.is-compact { box-shadow: 0 1px 0 var(--ink-line); }
.hdr-inner { min-block-size: 86px; height: auto; gap: 28px; }

.site-logo .brand-logo { block-size: 56px; height: 56px; width: auto; }
.site-header.is-compact .site-logo .brand-logo { block-size: 44px; height: 44px; }
.brand-name { color: var(--ink); font-weight: 800; letter-spacing: 0; }
.brand-tag  { color: var(--red-text); font-weight: 600; }

/* آیتم منو: بدون پس زمینه، با یک خط قرمز که از پایین رشد می کند */
.nav-list { gap: 2px; }
.ni-link {
  color: var(--ink); font-weight: 600;
  padding-inline: 12px; padding-block: 10px;
  border-radius: 0; background: none;
  position: relative;
}
.ni-link::after {
  content: ''; position: absolute;
  inset-inline: 12px; inset-block-end: 2px;
  block-size: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .22s ease;
}
@media (hover: hover) {
  .ni:hover > .ni-link::after,
  .ni-link:focus-visible::after { transform: scaleX(1); }
}
.ni:hover > .ni-link, .ni-link:focus-visible { color: var(--ink); }
.ni-arr { opacity: .5; }

.dropdown {
  border: 1px solid var(--ink-line);
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(17,19,24,.12);
  border-block-start: 3px solid var(--red);
}
.dd-link { border-radius: 0; font-weight: 600; }
.dd-link:hover { background: var(--gray-100); color: var(--red-text); }

.hdr-m-cta { background: var(--red); border-radius: 2px; }
.hdr-ham span { background: var(--ink); }

/* --- ۱۰٫۳ هیرو ------------------------------------------------------ */
.chero {
  position: relative;
  background: #fff;
  padding-block-start: clamp(38px, 6vw, 76px);
  padding-block-end: 0;
  overflow: hidden;
  isolation: isolate;
}
.chero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  padding-block-end: clamp(140px, 17vw, 230px);
}

/* شش ضلعی محو پشت لوگو — تزئینی، خودش را می کشد */
.chero-hex {
  position: absolute;
  inset-block-start: -6%;
  inset-inline-start: -8%;
  inline-size: min(560px, 52vw);
  color: var(--red);
  opacity: .07;
  z-index: -1;
  pointer-events: none;
}
.chero-hex path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }

.chero-mark { justify-self: center; inline-size: 100%; max-inline-size: 520px; }
.chero-logo {
  display: block; inline-size: 100%; block-size: auto;
  max-block-size: 190px; object-fit: contain; object-position: center;
}
.chero-fallback {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.chero-fallback .cf-word {
  font-size: clamp(2rem, 5.4vw, 3.4rem); font-weight: 900;
  letter-spacing: .02em; color: var(--red); line-height: 1.1;
}
.chero-fallback .cf-sub { color: var(--ink-soft); font-size: var(--fs-ui); }

.chero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-small); font-weight: 700; color: var(--red-text);
  margin-block-end: var(--sp-3);
}
.chero-eyebrow::before {
  content: ''; inline-size: 26px; block-size: 2px; background: var(--red);
}
.chero-h1 {
  font-size: clamp(1.9rem, 1.15rem + 3.3vw, 3.6rem);
  line-height: 1.32; font-weight: 900; color: var(--ink);
  margin: 0 0 var(--sp-4);
}
.chero-h1 em { font-style: normal; color: var(--red); }
.chero-lead {
  font-size: var(--fs-lead); line-height: 1.95; color: var(--text-light);
  max-inline-size: 54ch; margin: 0 0 var(--sp-5);
}
.chero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: var(--sp-5); }

/* دکمه ها: مستطیل، بدون سایه رنگی، با جابه جایی کوچک به جای بزرگ شدن */
.cbtn {
  display: inline-flex; align-items: center; gap: 9px;
  min-block-size: 50px; padding: 0 26px;
  border-radius: 2px; border: 2px solid transparent;
  font-size: var(--fs-btn); font-weight: 700; line-height: 1;
  transition: background .18s, color .18s, border-color .18s;
}
.cbtn-solid { background: var(--red); color: #fff; }
.cbtn-solid:hover { background: var(--ink); color: #fff; }
.cbtn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.cbtn-line:hover { background: var(--ink); color: #fff; }
.cbtn .num { letter-spacing: .05em; }

.chero-badges {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-small); color: var(--text-light);
}
.chero-badges li { display: flex; align-items: center; gap: 8px; }
.chero-badges i { color: var(--red); font-size: .95em; }

/* خط آسمان — کف هیرو، تمام عرض، بدون اثر روی چیدمان بالای خودش */
.chero-city {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  inline-size: 100%; block-size: clamp(120px, 15vw, 210px);
  display: block; object-fit: cover; object-position: bottom center;
  pointer-events: none; user-select: none;
  z-index: -1;
}
.chero::after {   /* خط زمین */
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: 3px; background: var(--ink);
}

@media (max-width: 900px) {
  .chero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    text-align: center;
    padding-block-end: clamp(120px, 26vw, 190px);
  }
  .chero-mark { order: -1; max-inline-size: 360px; }
  .chero-lead { margin-inline: auto; }
  .chero-actions, .chero-badges { justify-content: center; }
  .chero-eyebrow { justify-content: center; }
}
@media (max-width: 560px) {
  .cbtn { inline-size: 100%; justify-content: center; }
}

/* --- ورودِ صحنه ------------------------------------------------------
   فقط CSS، بدون جاوااسکریپت.

   نسخه اول با یک کلاس js-anim کار می کرد که جاوااسکریپت اضافه می کرد؛
   یعنی تا اجرای آن فایل، تیتر و متن با opacity:0 نامرئی بودند. اگر
   اسکریپت دیر می رسید یا اصلاً اجرا نمی شد، کاربر یک هیروِ خالی
   می دید. با animation-fill-mode: both دیگر چنین پنجره ای وجود ندارد:
   مرورگر خودش حالت اولیه را در طول تاخیر نگه می دارد و حالت پایانی را
   بعد از آن، و اگر انیمیشن اصلاً پشتیبانی نشود همه چیز از اول در جای
   نهایی خودش است.

   کل بلوک داخل prefers-reduced-motion: no-preference است، پس کاربری که
   کاهش حرکت را روشن کرده هیچ حرکتی نمی بیند. */
@media (prefers-reduced-motion: no-preference) {
  .chero [data-in] {
    animation: chero-in .7s cubic-bezier(.22,.7,.3,1) both;
    animation-delay: var(--d, 0s);
  }
  .chero .chero-mark  { animation: chero-mark-in .9s cubic-bezier(.22,.7,.3,1) both; }
  .chero .chero-hex path { animation: chero-draw 1.8s ease .15s both; }
  .chero .chero-city  { animation: chero-rise 1.1s cubic-bezier(.22,.7,.3,1) .25s both; }
}

@keyframes chero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes chero-mark-in {
  from { opacity: 0; transform: scale(.9) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes chero-draw { to { stroke-dashoffset: 0; } }
@keyframes chero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* --- ۱۰٫۴ ریتم بخش ها و عنوان ها ------------------------------------ */
.hs-section { padding-block: clamp(52px, 7vw, 92px); }
.hs-section.hs-tint-ice,
.hs-section.hs-tint-cyan,
.hs-section.hs-tint-mist,
.hs-section.hs-tint-sand { background: var(--gray-100); }
.hs-section.hs-tint-white { background: #fff; }
/* جداکننده های موجی و زاویه دار حذف — سایت را «قالب آماده» نشان می دادند */
.hs-section.sep-wave::after, .hs-section.sep-angle::after,
.hs-section.sep-fade::after, .hs-section.sep-rule::after { display: none; }
.hs-section.sep-wave, .hs-section.sep-angle { padding-block-end: clamp(52px, 7vw, 92px); }

.hs-title, .section-title {
  position: relative;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.15rem);
  font-weight: 900; color: var(--ink);
  padding-block-end: 14px; margin-block-end: clamp(22px, 3vw, 38px);
  border: none;
}
.hs-title::after, .section-title::after {
  content: ''; position: absolute;
  inset-block-end: 0; inset-inline-start: 0;
  inline-size: 54px; block-size: 3px; background: var(--red);
}
.hs-title::before, .section-title::before { content: none; }

/* --- ۱۰٫۵ کارت ها --------------------------------------------------- */
.child-card, .news-item, .hs-card {
  background: #fff;
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  transition: border-color .2s;
}
.child-card::after, .news-item::after {
  content: ''; position: absolute;
  inset-inline: 0; inset-block-end: 0; block-size: 3px;
  background: var(--red);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .25s ease;
}
.child-card-img, .news-item-img { transition: transform .5s ease; }
@media (hover: hover) {
  .child-card:hover, .news-item:hover { transform: none; box-shadow: none; border-color: var(--gray-300); }
  .child-card:hover::after, .news-item:hover::after { transform: scaleX(1); }
  .child-card:hover .child-card-img, .news-item:hover .news-item-img { transform: scale(1.05); }
}
.child-card-title, .news-item-title { color: var(--ink); font-weight: 700; }
.child-card-tag {
  background: var(--gray-100); color: var(--text-light);
  border-radius: 2px; border: none;
}
.child-card-tag i { color: var(--red); }

/* --- ۱۰٫۶ گالری ----------------------------------------------------- */
.gallery-item { border-radius: 2px; background: var(--gray-100); box-shadow: none;
                border: 1px solid var(--ink-line); }
.section-gallery-grouped .gallery-caption { color: var(--ink); }
.gallery-count { background: rgba(17,19,24,.72); border-radius: 2px; }

/* --- ۱۰٫۷ نوار لوگوی مشتریان --------------------------------------- */
.hs-logos { background: #fff; border-block: 1px solid var(--ink-line); }
.logo-cell { border-radius: 2px; border-color: var(--ink-line); }

/* --- ۱۰٫۸ پرسش و پاسخ ----------------------------------------------- */
.faq2-item { border-radius: 2px; border-color: var(--ink-line); }
.faq2-q { background: #fff; color: var(--ink); font-size: var(--fs-ui); }
.faq2-q:hover { background: var(--gray-100); }
.faq2-item.open .faq2-q { background: var(--ink); color: #fff; }
.faq2-item.open .faq2-icon::before,
.faq2-item.open .faq2-icon::after { background: #fff; }
.faq2-icon::before, .faq2-icon::after { background: var(--red); }
.faq2-a-inner { border-block-start-color: var(--ink-line); color: var(--text-light); }

/* --- ۱۰٫۹ مسیر راهنما و ساید بار ------------------------------------ */
.breadcrumb { background: transparent; border-block-end: 1px solid var(--ink-line);
              border-radius: 0; }
.aside-card { border-radius: 2px; border: 1px solid var(--ink-line); box-shadow: none; }
.aside-contact { background: var(--ink); color: #fff; border-color: var(--ink); }
.aside-contact h2 { color: #fff; }
.aside-contact .ac-note { color: #B9BCC3; }
.aside-contact .ac-phone { color: #fff; }

/* --- ۱۰٫۱۰ جعبه فراخوان --------------------------------------------- */
.hcta-box, .price-box, .inline-service {
  border-radius: 2px; border: 1px solid var(--ink-line); box-shadow: none;
}
.hs-cta .hcta-box { background: var(--ink); color: #fff; border-color: var(--ink); }
.hs-cta .hcta-title { color: #fff; }
.hs-cta .hcta-sub { color: #C9CBD1; }

/* --- ۱۰٫۱۱ نوار چسبان موبایل --------------------------------------- */
.ti-mobilebar { border-block-start: none; background: var(--ink); }
.ti-mobilebar .ti-mb-item { color: #E7E8EB; }
.ti-mobilebar .ti-mb-cta { background: var(--red); color: #fff; }

/* =====================================================================
   ۱۱) ریل مقالات
   ---------------------------------------------------------------------
   عمداً نه Swiper است و نه همان کروسل کارتیِ بقیه سایت ها. سه چیز
   متفاوتش می کند:
     • کارت ها یکی در میان پایین می افتند (پله ای)، پس ردیف صاف نیست
     • شماره درشتِ توخالی نیمی بیرون از کارت می نشیند
     • نوار پیشرفت باریکِ زیر ریل با خودِ اسکرول پر می شود

   حرکت با scroll-snap بومی مرورگر است: روی موبایل با انگشت کار می کند،
   بدون جاوااسکریپت هم اسکرول می شود، و هیچ کتابخانه ای بار نمی شود.
   ===================================================================== */
.crail-sec { background: #fff; padding-block: clamp(52px, 7vw, 92px); overflow: hidden; }
.crail-sec.is-alt { background: var(--gray-100); }

.crail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-block-end: clamp(26px, 3.4vw, 44px);
}
.crail-head .hs-title { margin-block-end: 0; }
.crail-tools { display: flex; align-items: center; gap: 14px; }
.crail-count {
  font-size: var(--fs-small); font-weight: 700; color: var(--text-light);
  letter-spacing: .06em; min-inline-size: 62px; text-align: center;
}
.crail-count b { color: var(--ink); }
.crail-btn {
  inline-size: 46px; block-size: 46px;
  display: grid; place-items: center;
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 2px;
  cursor: pointer; transition: background .18s, color .18s, opacity .18s;
}
.crail-btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.crail-btn:disabled { opacity: .25; cursor: default; }
/* پیکان با border کشیده می شود، نه با ‹ و ›: آن دو نویسه Bidi_Mirrored
   اند و داخل متن راست به چل برعکس می شوند. */
.crail-btn i {
  inline-size: 11px; block-size: 11px;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  display: block;
}
/* «قبلی» رو به راست و «بعدی» رو به چپ — جهت خواندن فارسی. */
.crail-btn[data-dir="prev"] i { transform: rotate(45deg);  margin-inline-end: 4px; }
.crail-btn[data-dir="next"] i {
  border-block-start: none; border-inline-end: none;
  border-top: 2px solid currentColor; border-left: 2px solid currentColor;
  transform: rotate(-45deg); margin-inline-start: 4px;
}

.crail-viewport { margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); }
.crail {
  display: flex; gap: clamp(16px, 2vw, 28px);
  margin: 0; padding: 0 0 clamp(30px, 4vw, 48px); list-style: none;
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.crail::-webkit-scrollbar { display: none; }

.crail-item {
  flex: 0 0 clamp(240px, 78vw, 320px);
  scroll-snap-align: start;
  position: relative;
  /* جا برای شماره. کمتر از این، عدد از بالای بخش بیرون می زند و
     چون ‎.crail-sec‎ برای پنهان کردن ریل ‎overflow:hidden‎ دارد، بریده
     می شود. */
  padding-block-start: clamp(34px, 4vw, 46px);
}
/* پله ای: کارت های زوج پایین تر می نشینند */
.crail-item:nth-child(even) { transform: translateY(30px); }

/* شماره: تو پرِ خاکستری روشن، نه توخالی.
   ‏-webkit-text-stroke روی رقم فارسی نازک و شکسته رندر می شود و در
   اندازه های بزرگ شبیه گلیف خراب به نظر می رسد. */
.crail-num {
  position: absolute; inset-block-start: 0; inset-inline-start: 12px;
  font-size: clamp(34px, 4.4vw, 52px); font-weight: 900; line-height: 1;
  color: var(--gray-200);
  letter-spacing: .02em;
  pointer-events: none; z-index: 2;
  transition: color .25s;
}
.crail-card {
  display: flex; flex-direction: column; block-size: 100%;
  background: #fff; border: 1px solid var(--ink-line); border-radius: 2px;
  overflow: hidden; position: relative;
}
.crail-figure { position: relative; overflow: hidden; background: var(--gray-100); }
.crail-figure img {
  inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.22,.7,.3,1);
}
.crail-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex;
              flex-direction: column; gap: 10px; flex: 1; }
.crail-date { font-size: var(--fs-tiny); color: var(--text-muted); }
.crail-title {
  font-size: var(--fs-h4); font-weight: 700; line-height: 1.7; color: var(--ink);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.crail-ex {
  font-size: var(--fs-small); color: var(--text-light); margin: 0; line-height: 1.9;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.crail-more {
  margin-block-start: auto; padding-block-start: 6px;
  font-size: var(--fs-small); font-weight: 700; color: var(--red-text);
  display: inline-flex; align-items: center; gap: 7px;
}
/* پیکان «ادامه مطلب» رو به چپ. با border فیزیکی کشیده می شود، نه با
   ‏‹ و ›: آن دو نویسه Bidi_Mirrored اند و در متن راست به چپ برعکس
   می شوند. */
.crail-more::after {
  content: ''; inline-size: 8px; block-size: 8px;
  border-top: 2px solid currentColor; border-left: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s;
}
.crail-card::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .28s;
}
@media (hover: hover) {
  .crail-item:hover .crail-figure img { transform: scale(1.06); }
  .crail-item:hover .crail-card::after { transform: scaleX(1); }
  .crail-item:hover .crail-num { color: var(--red); }
  .crail-item:hover .crail-more::after { transform: rotate(-45deg) translate(2px, -2px); }
}

.crail-track {
  block-size: 2px; background: var(--ink-line); position: relative;
  margin-block-start: 8px;
}
.crail-bar {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 20%; background: var(--red);
  transition: inline-size .12s linear, transform .12s linear;
}
.crail-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-block-start: var(--sp-4);
}
.crail-all {
  font-weight: 700; font-size: var(--fs-small); color: var(--ink);
  border-block-end: 2px solid var(--red); padding-block-end: 3px;
}
.crail-all:hover { color: var(--red-text); }

@media (max-width: 700px) {
  /* روی موبایل پله ای بودن فقط فضا می خورد */
  .crail-item:nth-child(even) { transform: none; }
  .crail-tools .crail-btn { display: none; }
}

/* =====================================================================
   ۱۲) فوتر
   ---------------------------------------------------------------------
   ساختار: یک پرده مرکبِ بلند با نقش نقطه ای و جمله برند در وسط، بعد
   پنج ستون لینک، و آخر یک نوار پایانی. فوتر قبلی سه بلوک اطلاعاتی
   کنار هم بود — همان چیدمانی که در بقیه سایت های این مجموعه هست.
   ===================================================================== */
.cf {
  position: relative;
  background: var(--ink);
  color: #C9CBD1;
  overflow: hidden;
  isolation: isolate;
}
/* نقش نقطه ای — با گرادیان ساخته می شود، پس هیچ فایلی بار نمی شود */
.cf::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.055) 30%, transparent 31%);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
}
/* قوس سفید بالای فوتر — مرز نرم بین بخش سفید و پرده مرکب */
.cf-arc {
  display: block; inline-size: 100%; block-size: clamp(34px, 5vw, 74px);
  color: #fff;
}
.cf-arc + .cf-top { padding-block-start: clamp(18px, 3vw, 40px); }

.cf-top {
  text-align: center;
  padding-block: clamp(34px, 6vw, 78px) clamp(44px, 7vw, 92px);
}
.cf-mark {
  inline-size: clamp(64px, 9vw, 92px); block-size: auto;
  margin-inline: auto; margin-block-end: var(--sp-4);
  display: block;
}
.cf-claim {
  font-size: clamp(1.5rem, .9rem + 2.7vw, 3rem);
  font-weight: 900; line-height: 1.45; color: #fff; margin: 0;
}
.cf-claim span { display: block; }
.cf-claim .cf-red { color: var(--red); }
.cf-sub {
  margin: var(--sp-3) auto 0; max-inline-size: 60ch;
  color: #9EA1A9; font-size: var(--fs-ui); line-height: 1.95;
}
.cf-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-block-start: var(--sp-5);
  min-block-size: 52px; padding: 0 30px;
  background: var(--red); color: #fff; border-radius: 2px;
  font-weight: 700; font-size: var(--fs-btn);
  transition: background .18s, color .18s;
}
.cf-cta:hover { background: #fff; color: var(--ink); }

.cf-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
  padding-block-end: clamp(34px, 5vw, 62px);
}
.cf-col h2 {
  font-size: var(--fs-ui); font-weight: 800; color: #fff;
  margin: 0 0 var(--sp-3);
}
.cf-col ul { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: 11px; }
.cf-col a, .cf-col span { font-size: var(--fs-small); color: #9EA1A9; line-height: 1.7; }
.cf-col a { position: relative; }
.cf-col a:hover { color: #fff; }
.cf-col a[href^="tel:"] { letter-spacing: .04em; font-weight: 600; color: #fff; }
.cf-addr { font-size: var(--fs-small); color: #9EA1A9; line-height: 2; margin: 0; }

.cf-social { display: flex; gap: 10px; margin-block-start: var(--sp-3); }
.cf-social a {
  inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: 2px; color: #C9CBD1;
  transition: background .18s, color .18s, border-color .18s;
}
.cf-social a:hover { background: var(--red); color: #fff; border-color: var(--red); }

.cf-bottom {
  border-block-start: 1px solid rgba(255,255,255,.1);
  padding-block: var(--sp-4);
}
.cf-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-tiny); color: #83868E;
}
.cf-bottom a { color: #C9CBD1; }
.cf-bottom a:hover { color: #fff; }
.cf-seal img { display: block; }

@media (max-width: 980px) {
  .cf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .cf-claim { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
}

/* نوار چسبان موبایل روی فوتر می نشیند؛ بدون این فاصله، آخرین ردیف
   لینک ها زیرش گم می شود. */
@media (max-width: 860px) {
  .cf-bottom { padding-block-end: calc(var(--sp-4) + 62px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   ۱۳) اصلاحات بعد از دیدن خروجی
   ===================================================================== */

/* عنوان بخش ها در لایه پایه وسط چین بود؛ خط قرمزِ زیر آن اما از ابتدای
   سطر شروع می شود، پس عنوان هم باید از ابتدا شروع شود وگرنه خط و متن
   به هم نمی خورند. */
.hs-title, .section-title, .crail-head .hs-title { text-align: start; }
.hs-section .hs-title-row { text-align: start; }

/* ستون متن باید از ستون لوگو پهن تر باشد: با نسبت قبلی، تیتر روی
   دسکتاپ چهار خط می شد. */
.chero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); }
.chero-h1 { font-size: clamp(1.75rem, 1.05rem + 2.5vw, 2.9rem); text-wrap: balance; }

/* هدر: نه آیتم منو کنار لوگو در ۱۲۸۰ پیکسل جا نمی شد؛ ردیف می شکست و
   لوگو از لبه صفحه بیرون می زد. سه کار با هم مشکل را می بندد:
   منو به هفت آیتم رسید (در دیتابیس)، آیتم ها نمی شکنند، و ستون منو
   اجازه کوچک شدن دارد. بدون min-inline-size:0 یک آیتم فلکس هرگز از
   محتوایش کوچک تر نمی شود و به جای جمع شدن، بیرون می زند. */
.hdr-nav  { min-inline-size: 0; }
.nav-list { flex-wrap: nowrap; }
.ni-link  { white-space: nowrap; }
.site-logo { flex: 0 0 auto; }
.site-logo .brand-logo { max-inline-size: 230px; }

@media (max-width: 1300px) {
  .hdr-inner { gap: 14px; min-block-size: 74px; }
  .ni-link { padding-inline: 8px; font-size: var(--fs-small); }
  .ni-link::after { inset-inline: 8px; }
  .site-logo .brand-logo { block-size: 46px; height: 46px; max-inline-size: 180px; }
}
@media (max-width: 1080px) {
  .ni-link { padding-inline: 6px; font-size: var(--fs-tiny); }
  .ni-link::after { inset-inline: 6px; }
  .site-logo .brand-logo { block-size: 40px; height: 40px; max-inline-size: 150px; }
}

/* ردیف کارت فرزندان: چهار ستون روی دسکتاپ، دو ستون روی تبلت.
   لایه پایه سه ستونه بود و کارت ها بی دلیل پهن می شدند. */
.children-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                 gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 1000px) { .children-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .children-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px)  { .children-grid { grid-template-columns: 1fr; } }

/* کارت: عنوان و برچسب کمی جمع تر */
.child-card-body { padding: 14px 16px 16px; }
.child-card-title { font-size: var(--fs-ui); line-height: 1.75; margin: 0 0 8px; }
.child-card-tag { font-size: var(--fs-tiny); padding: 4px 9px; }

/* =====================================================================
   ۱۴) واکنش گرایی هیرو — عمداً آخرین بلوک فایل
   ---------------------------------------------------------------------
   بلوک ۱۳ عرض ستون های ‎.chero-grid‎ را برای دسکتاپ دوباره تعریف کرد و
   چون بعد از ‎@media (max-width: 900px)‎ آمده بود، با همان وزن آن را
   بی اثر کرد: هیرو روی موبایل هم دو ستونه می ماند و تیتر در ستونی
   ۳۲۰ پیکسلی هفت خط می شد.

   قاعده تک ستونی باید بعد از هر قاعده دسکتاپیِ همان انتخابگر بیاید.
   اگر روزی چیزی به ‎.chero-grid‎ اضافه شد، بالای همین بلوک بنویسید،
   نه پایینش.
   ===================================================================== */
@media (max-width: 900px) {
  .chero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    text-align: center;
    padding-block-end: clamp(120px, 26vw, 190px);
  }
  .chero-mark { order: -1; max-inline-size: min(340px, 76vw); }
  .chero-logo { max-block-size: 130px; }
  .chero-lead { margin-inline: auto; }
  .chero-actions, .chero-badges { justify-content: center; }
  .chero-eyebrow { justify-content: center; }
  .chero-hex { inline-size: min(360px, 80vw); inset-block-start: 2%; }
}

@media (max-width: 560px) {
  .chero { padding-block-start: 26px; }
  .chero-h1 { font-size: clamp(1.5rem, 1.1rem + 2.4vw, 1.95rem); }
  .chero-lead { font-size: var(--fs-body); }
  .cbtn { inline-size: 100%; justify-content: center; text-align: center; }
  /* «گرید A غرفه سازی · از سال ۱۳۹۳» در یک خط جا نمی شود؛ خط تزئینی
     کنارش فقط عرض را بیشتر می کند. */
  .chero-eyebrow { flex-wrap: wrap; }
  .chero-eyebrow::before { display: none; }
  .chero-badges { flex-direction: column; align-items: center; gap: 8px; }
}