/* ==========================================================================
   مطالعهٔ موردی کینوفیت  —  /case-studies/kinofit/
   شورت‌کد: [hug_case_study_kinofit]
   همهٔ قاعده‌ها زیر .hug-scope.hug-case-study-kinofit اسکوپ شده‌اند؛ با استایل آسترا تداخل ندارند.
   font-family عمداً تعریف نشده تا فونت از سفارشی‌سازی آسترا ارث برسد.
   ========================================================================== */

/* ┌───────────────────────────────────────────────────────────────────┐
   │ تصاویر — بعد از آپلود در وردپرس، فقط همین آدرس‌ها را عوض کنید.    │
   │ مثال: url("https://hugco.ir/wp-content/uploads/2026/09/x.webp")   │
   └───────────────────────────────────────────────────────────────────┘ */
.hug-scope.hug-case-study-kinofit{
  --img-puff-cheese: url("images/puff-cheese.webp");
  --img-puff-chilli: url("images/puff-chilli.webp");
  --img-puff-bbq: url("images/puff-bbq.webp");
  --img-puff-mushroom: url("images/puff-mushroom.webp");
  --img-puff-veg: url("images/puff-veg.webp");
  --img-puff-spirulina: url("images/puff-spirulina.webp");
  --img-cookie-choco: url("images/cookie-choco.webp");
  --img-cookie-peanut: url("images/cookie-peanut.webp");
  --img-cookie-vanilla: url("images/cookie-vanilla.webp");
  --img-filled-pistachio: url("images/filled-pistachio.webp");
  --img-crouton-garlic: url("images/crouton-garlic.webp");
  --img-crouton-italian: url("images/crouton-italian.webp");
  --img-crouton-parmesan: url("images/crouton-parmesan.webp");
  --img-grain: url("images/grain.webp");
  --img-cs-hero-img: url("images/cs-hero-img.webp");
  --img-bm: url("images/bm.webp");
}

/* ── تنظیمات محلی ───────────────────────────────────────────────────── */
.hug-scope.hug-case-study-kinofit{
  /* آفست اسکرول برای هدر چسبانِ وردپرس — با ارتفاع هدر خودتان تنظیم کنید */
  --hug-anchor-offset: 110px;
  /* علامتِ جهت: جابه‌جایی‌های افقی در چپ‌چین آینه می‌شوند */
  --hug-dx: 1;
}
.hug-scope.hug-case-study-kinofit.hug-ltr{ --hug-dx: -1; }
.hug-scope.hug-case-study-kinofit [id]{scroll-margin-top:var(--hug-anchor-offset)}

/* اگر برگه را «تمام‌عرض / Stretched» نکردید و نوارهای رنگی بریده می‌شوند،
   کامنت سه خط زیر را بردارید. (اول تنظیم آسترا را امتحان کنید؛ بهتر است.)
.hug-scope.hug-case-study-kinofit{
  margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw;
} */

.hug-scope.hug-case-study-kinofit{--accent:#F59E1B; --accent-hi:#FFB84D; --accent-soft:#FEF6E9; --accent-ink:#B45309;
  --ink:#2E3D5C; --ink-soft:#41527A; --ink-deep:#22304A; --ink-2:#3A4A6B; --ink-3:#243150;
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#EEF1F5; --line:#E2E6EC; --line-2:#D6DCE5;
  --text:#22304A; --muted:#6B7280; --muted-2:#5F6672;
  --on-dark:#F3F6FA; --on-dark-2:#C2C9D2; --on-dark-3:#A8B1BC;
  --success-bg:#EAF6EC; --success-ink:#15803D;
  --warning-bg:#FDF3E6; --warning-ink:#92400E;
  --danger-bg:#FDECEC; --danger-ink:#991B1B;
  --r-card:12px; --r-btn:8px; --r-pill:999px;
  --focus:0 0 0 3px rgba(245,158,11,.45);
  --dur-fast:160ms; --dur-base:220ms; --dur-mod:360ms;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --maxw:1280px; --pad-x:80px; --measure:64ch;}
@media (max-width:768px){
.hug-scope.hug-case-study-kinofit{--pad-x:20px;}
}
.hug-scope.hug-case-study-kinofit, .hug-scope.hug-case-study-kinofit *{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
.hug-scope.hug-case-study-kinofit{background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased}
.hug-scope.hug-case-study-kinofit .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x)}
.hug-scope.hug-case-study-kinofit section{padding-block:70px}
@media (max-width:768px){
.hug-scope.hug-case-study-kinofit section{padding-block:48px}
}
.hug-scope.hug-case-study-kinofit h1, .hug-scope.hug-case-study-kinofit h2, .hug-scope.hug-case-study-kinofit h3{line-height:1.15; color:var(--ink); font-weight:700}
.hug-scope.hug-case-study-kinofit h2{font-size:clamp(23px,2.8vw,30px); font-weight:600}
.hug-scope.hug-case-study-kinofit h3{font-size:18px; font-weight:600}
.hug-scope.hug-case-study-kinofit .overline{color:var(--accent-ink); font-size:13px; font-weight:600; letter-spacing:.06em; margin-bottom:11px}
.hug-scope.hug-case-study-kinofit a{color:inherit; text-decoration:none}
.hug-scope.hug-case-study-kinofit .prose{max-width:var(--measure); color:var(--ink-soft); font-size:16px}
.hug-scope.hug-case-study-kinofit .prose a{color:var(--accent-ink); border-bottom:1px solid rgba(180,83,9,.32)}
.hug-scope.hug-case-study-kinofit .prose b{color:var(--ink); font-weight:600}
.hug-scope.hug-case-study-kinofit .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding-inline:22px; border-radius:var(--r-btn);
  font-weight:500; font-size:15px; border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast)}
.hug-scope.hug-case-study-kinofit .btn:focus-visible{outline:none; box-shadow:var(--focus)}
.hug-scope.hug-case-study-kinofit .btn-accent{background:var(--accent); color:var(--ink-deep); font-weight:600}
.hug-scope.hug-case-study-kinofit .btn-accent:hover{transform:translateY(-1px); background:var(--accent-hi)}
.hug-scope.hug-case-study-kinofit .rv{opacity:0; transform:translateY(12px); transition:opacity var(--dur-mod) var(--ease-out), transform var(--dur-mod) var(--ease-out)}
.hug-scope.hug-case-study-kinofit .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
.hug-scope.hug-case-study-kinofit .rv{opacity:1; transform:none; transition:none}
html{scroll-behavior:auto}
}
.hug-scope.hug-case-study-kinofit :where(a,button,input,select,[tabindex]):focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-btn)}
.hug-scope.hug-case-study-kinofit[id], .hug-scope.hug-case-study-kinofit [id]{scroll-margin-top:96px}
.hug-scope.hug-case-study-kinofit .crumb{font-size:13px; color:var(--muted-2); padding-top:18px}
.hug-scope.hug-case-study-kinofit .crumb span{margin-inline:6px; color:var(--line-2)}
.hug-scope.hug-case-study-kinofit .bnote{font-size:13px; color:var(--accent-ink); background:var(--accent-soft); border:1px solid #F3DFBE;
  border-radius:var(--r-btn); padding:13px 17px; line-height:1.85; margin-top:26px}
.hug-scope.hug-case-study-kinofit .cs-top{background:var(--surface); border-bottom:1px solid var(--line); padding-bottom:36px}
.hug-scope.hug-case-study-kinofit .cs-h{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:44px; align-items:center; margin-top:18px}
@media (max-width:900px){
.hug-scope.hug-case-study-kinofit .cs-h{grid-template-columns:minmax(0,1fr); gap:26px}
}
.hug-scope.hug-case-study-kinofit .cs-kicker{display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--accent-ink);
  background:var(--accent-soft); border:1px solid #F3DFBE; border-radius:var(--r-pill); padding:5px 14px; margin-bottom:16px}
.hug-scope.hug-case-study-kinofit .cs-top h1{font-size:clamp(26px,3.4vw,40px); line-height:1.2; margin-bottom:14px}
.hug-scope.hug-case-study-kinofit .cs-top .lede{color:var(--ink-soft); font-size:17px; line-height:1.9; max-width:52ch}
.hug-scope.hug-case-study-kinofit .cs-hero-img{border-radius:var(--r-card); background:var(--surface-2); border:1px solid var(--line);
  aspect-ratio:1/1; background-size:76%; background-repeat:no-repeat; background-position:center}
.hug-scope.hug-case-study-kinofit .stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:32px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden}
@media (max-width:640px){
.hug-scope.hug-case-study-kinofit .stats{grid-template-columns:minmax(0,1fr)}
}
.hug-scope.hug-case-study-kinofit .stat{padding:22px 26px; border-inline-start:1px solid var(--line)}
.hug-scope.hug-case-study-kinofit .stat:first-child{border-inline-start:0}
@media (max-width:640px){
.hug-scope.hug-case-study-kinofit .stat{border-inline-start:0; border-top:1px solid var(--line)}
.hug-scope.hug-case-study-kinofit .stat:first-child{border-top:0}
}
.hug-scope.hug-case-study-kinofit .stat s{text-decoration:none; display:block; font-size:12.5px; color:var(--muted-2); margin-bottom:7px}
.hug-scope.hug-case-study-kinofit .stat b{display:block; font-size:30px; font-weight:700; color:var(--ink); line-height:1.1}
.hug-scope.hug-case-study-kinofit .stat b em{font-style:normal; font-size:.5em; font-weight:500; color:var(--muted-2); margin-inline-start:6px}
.hug-scope.hug-case-study-kinofit .stat i{font-style:normal; display:block; font-size:12.5px; color:var(--ink-soft); margin-top:8px; line-height:1.7}
.hug-scope.hug-case-study-kinofit .stat i u{text-decoration:none; color:var(--accent-ink); font-weight:600}
.hug-scope.hug-case-study-kinofit .board{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:26px 28px; margin-top:26px}
@media (max-width:560px){
.hug-scope.hug-case-study-kinofit .board{padding:20px 15px}
}
.hug-scope.hug-case-study-kinofit .bswitch{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.hug-scope.hug-case-study-kinofit .bswitch button{font:inherit; font-size:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 18px; cursor:pointer; color:var(--ink-soft); transition:background .16s,color .16s,border-color .16s}
.hug-scope.hug-case-study-kinofit .bswitch button:hover{border-color:var(--line-2)}
.hug-scope.hug-case-study-kinofit .bswitch button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff; font-weight:500}
.hug-scope.hug-case-study-kinofit .bq{font-size:13.5px; color:var(--muted-2); margin:14px 0 22px; line-height:1.8}
.hug-scope.hug-case-study-kinofit .grp + .grp{margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
.hug-scope.hug-case-study-kinofit .grp .gh{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:14px}
.hug-scope.hug-case-study-kinofit .grp .gh b{font-size:15.5px; color:var(--ink); font-weight:600}
.hug-scope.hug-case-study-kinofit .grp .gh u{text-decoration:none; font-size:11.5px; font-weight:600; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:var(--r-pill); padding:3px 11px; white-space:nowrap}
.hug-scope.hug-case-study-kinofit .grp .gh span{font-size:13px; color:var(--muted-2); line-height:1.7}
.hug-scope.hug-case-study-kinofit .pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px}
.hug-scope.hug-case-study-kinofit .pcard{border:1px solid var(--line); border-radius:var(--r-btn); padding:10px 8px 11px; text-align:center;
  background:var(--surface); transition:border-color .16s, transform .16s var(--ease-out)}
.hug-scope.hug-case-study-kinofit .pcard:hover{border-color:var(--line-2); transform:translateY(-2px)}
.hug-scope.hug-case-study-kinofit .pimg{display:block; height:78px; background-size:contain; background-repeat:no-repeat; background-position:center; margin-bottom:8px}
.hug-scope.hug-case-study-kinofit .pcard span{display:block; font-size:12px; color:var(--ink); line-height:1.5; font-weight:500}
.hug-scope.hug-case-study-kinofit .pcard i{font-style:normal; display:block; font-size:10.5px; color:var(--muted-2); margin-top:3px}
.hug-scope.hug-case-study-kinofit .pmore{border:1px dashed var(--line-2); border-radius:var(--r-btn); padding:14px 12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; background:var(--surface-2)}
.hug-scope.hug-case-study-kinofit .pmore b{font-size:16px; color:var(--ink); font-weight:700; line-height:1.2}
.hug-scope.hug-case-study-kinofit .pmore span{font-size:11px; color:var(--muted-2); margin-top:5px; line-height:1.6}
.hug-scope.hug-case-study-kinofit .bnoteline{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft); line-height:1.9}
.hug-scope.hug-case-study-kinofit .bnoteline b{color:var(--ink); font-weight:600}
.hug-scope.hug-case-study-kinofit .talk{display:grid; gap:18px; margin-top:8px}
.hug-scope.hug-case-study-kinofit .tturn{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:0;
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--surface)}
@media (max-width:820px){
.hug-scope.hug-case-study-kinofit .tturn{grid-template-columns:minmax(0,1fr)}
}
.hug-scope.hug-case-study-kinofit .tturn .said{background:var(--surface-2); padding:24px 26px}
.hug-scope.hug-case-study-kinofit .tturn .did{padding:24px 26px}
.hug-scope.hug-case-study-kinofit .tturn .who{font-size:11.5px; font-weight:600; color:var(--muted-2); letter-spacing:.04em; margin-bottom:9px}
.hug-scope.hug-case-study-kinofit .tturn .did .who{color:var(--accent-ink)}
.hug-scope.hug-case-study-kinofit .tturn .said p{font-size:17px; color:var(--ink); line-height:1.85; font-weight:500}
.hug-scope.hug-case-study-kinofit .tturn .did p{font-size:14.5px; color:var(--ink-soft); line-height:1.9}
.hug-scope.hug-case-study-kinofit .tturn .did p + p{margin-top:10px}
.hug-scope.hug-case-study-kinofit .tturn .did b{color:var(--ink); font-weight:600}
.hug-scope.hug-case-study-kinofit .res{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:8px}
@media (max-width:860px){
.hug-scope.hug-case-study-kinofit .res{grid-template-columns:minmax(0,1fr)}
}
.hug-scope.hug-case-study-kinofit .rcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:26px 28px}
.hug-scope.hug-case-study-kinofit .rcard.no{background:var(--surface-2)}
.hug-scope.hug-case-study-kinofit .rcard h3{font-size:18px; margin-bottom:14px}
.hug-scope.hug-case-study-kinofit .rcard dl{display:grid; gap:0}
.hug-scope.hug-case-study-kinofit .rcard dl > div{display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line)}
.hug-scope.hug-case-study-kinofit .rcard dl > div:last-child{border-bottom:0}
.hug-scope.hug-case-study-kinofit .rcard dt{font-size:14px; color:var(--ink-soft); line-height:1.6}
.hug-scope.hug-case-study-kinofit .rcard dd{font-size:15px; color:var(--ink); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.hug-scope.hug-case-study-kinofit .rcard dd s{text-decoration:none; font-weight:500; color:var(--muted-2); font-size:13px}
.hug-scope.hug-case-study-kinofit .rcard ul{list-style:none; display:grid; gap:13px}
.hug-scope.hug-case-study-kinofit .rcard.no li{position:relative; padding-inline-start:22px; font-size:14.5px; color:var(--ink-soft); line-height:1.85}
.hug-scope.hug-case-study-kinofit .rcard.no li::before{content:"×"; position:absolute; inset-inline-start:0; top:-1px; color:var(--danger-ink); font-weight:700; font-size:15px}
.hug-scope.hug-case-study-kinofit .rcard.no li b{color:var(--ink); font-weight:600}
.hug-scope.hug-case-study-kinofit .lessons{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:10px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden}
@media (max-width:900px){
.hug-scope.hug-case-study-kinofit .lessons{grid-template-columns:minmax(0,1fr)}
}
.hug-scope.hug-case-study-kinofit .lesson{padding:26px 28px; border-inline-start:1px solid var(--line)}
.hug-scope.hug-case-study-kinofit .lesson:first-child{border-inline-start:0}
@media (max-width:900px){
.hug-scope.hug-case-study-kinofit .lesson{border-inline-start:0; border-top:1px solid var(--line)}
.hug-scope.hug-case-study-kinofit .lesson:first-child{border-top:0}
}
.hug-scope.hug-case-study-kinofit .lesson em{font-style:normal; font-size:12px; font-weight:700; color:var(--accent-ink); display:block; margin-bottom:9px}
.hug-scope.hug-case-study-kinofit .lesson b{display:block; font-size:16.5px; color:var(--ink); font-weight:600; line-height:1.5; margin-bottom:9px}
.hug-scope.hug-case-study-kinofit .lesson p{font-size:14px; color:var(--ink-soft); line-height:1.85}
.hug-scope.hug-case-study-kinofit .brandbox{display:grid; grid-template-columns:auto minmax(0,1fr); gap:26px; align-items:start; margin-top:26px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-card); padding:26px 28px}
@media (max-width:700px){
.hug-scope.hug-case-study-kinofit .brandbox{grid-template-columns:minmax(0,1fr); gap:16px}
}
.hug-scope.hug-case-study-kinofit .brandbox .bm{width:104px; height:104px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line);
  background-size:74%; background-repeat:no-repeat; background-position:center}
.hug-scope.hug-case-study-kinofit .brandbox h3{font-size:17px; margin-bottom:9px}
.hug-scope.hug-case-study-kinofit .brandbox p{font-size:14.5px; color:var(--ink-soft); line-height:1.9; max-width:70ch}
.hug-scope.hug-case-study-kinofit .brandbox p + p{margin-top:10px}
.hug-scope.hug-case-study-kinofit .brandbox .vals{display:flex; gap:7px; flex-wrap:wrap; margin-top:14px}
.hug-scope.hug-case-study-kinofit .brandbox .vals span{font-size:12.5px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:4px 13px}
.hug-scope.hug-case-study-kinofit .endband{background:var(--ink); color:var(--on-dark); padding-block:66px}
.hug-scope.hug-case-study-kinofit .endband h2{color:#fff}
.hug-scope.hug-case-study-kinofit .endband p{color:var(--on-dark-2); font-size:16px; line-height:1.9; max-width:58ch; margin-top:12px}
.hug-scope.hug-case-study-kinofit .endband .row{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.hug-scope.hug-case-study-kinofit .btn-onDark{background:transparent; border-color:rgba(255,255,255,.3); color:#fff}
.hug-scope.hug-case-study-kinofit .btn-onDark:hover{background:rgba(255,255,255,.09)}
.hug-scope.hug-case-study-kinofit .bnote{font-size:13px; color:var(--accent-ink); background:var(--accent-soft); border:1px solid #F3DFBE;
  border-radius:var(--r-btn); padding:13px 17px; line-height:1.85; margin-top:26px}
.hug-scope.hug-case-study-kinofit .board.js .bview{display:none}
.hug-scope.hug-case-study-kinofit .board.js .bview.on{display:block}
.hug-scope.hug-case-study-kinofit .bview + .bview{margin-top:28px; padding-top:26px; border-top:2px solid var(--line)}
.hug-scope.hug-case-study-kinofit .p-puff-cheese{background-image:var(--img-puff-cheese)}
.hug-scope.hug-case-study-kinofit .p-puff-chilli{background-image:var(--img-puff-chilli)}
.hug-scope.hug-case-study-kinofit .p-puff-bbq{background-image:var(--img-puff-bbq)}
.hug-scope.hug-case-study-kinofit .p-puff-mushroom{background-image:var(--img-puff-mushroom)}
.hug-scope.hug-case-study-kinofit .p-puff-veg{background-image:var(--img-puff-veg)}
.hug-scope.hug-case-study-kinofit .p-puff-spirulina{background-image:var(--img-puff-spirulina)}
.hug-scope.hug-case-study-kinofit .p-cookie-choco{background-image:var(--img-cookie-choco)}
.hug-scope.hug-case-study-kinofit .p-cookie-peanut{background-image:var(--img-cookie-peanut)}
.hug-scope.hug-case-study-kinofit .p-cookie-vanilla{background-image:var(--img-cookie-vanilla)}
.hug-scope.hug-case-study-kinofit .p-filled-pistachio{background-image:var(--img-filled-pistachio)}
.hug-scope.hug-case-study-kinofit .p-crouton-garlic{background-image:var(--img-crouton-garlic)}
.hug-scope.hug-case-study-kinofit .p-crouton-italian{background-image:var(--img-crouton-italian)}
.hug-scope.hug-case-study-kinofit .p-crouton-parmesan{background-image:var(--img-crouton-parmesan)}
.hug-scope.hug-case-study-kinofit .p-grain{background-image:var(--img-grain)}