/* pages/contact.css — بخشی از سیستم سبک سایت عمومی پلاس */
.waygrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.way{display:flex;flex-direction:column;gap:9px;padding:clamp(20px,2.4vw,26px);
  border-radius:var(--card-radius);border:1px solid var(--line);background:var(--surface);
  transition:border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)}
.way:hover{border-color:color-mix(in oklab,var(--teal-600) 42%,var(--line));
  transform:translateY(-3px);box-shadow:0 16px 34px -26px rgba(11,18,38,.4)}
.way-i{inline-size:44px;block-size:44px;border-radius:14px;display:grid;place-items:center;
  color:var(--teal-600);background:color-mix(in oklab,var(--teal-600) 10%,transparent);
  margin-block-end:4px}
.way-i svg{inline-size:22px;block-size:22px}
.way h3{font-family:var(--font-display);font-size:15px;font-weight:900;color:var(--fg)}
.way-v{font-family:var(--font-display);font-size:clamp(16px,1.8vw,18.5px);font-weight:800;
  color:var(--fg);letter-spacing:.2px;overflow-wrap:anywhere}
/* ایمیل همیشه یک‌تکه در یک خط؛ اندازه‌ی حروف با پهنای کارت کوچک می‌شود */
.way-v.mail{font-size:clamp(13px,1.15vw,15px);letter-spacing:0;overflow-wrap:normal;white-space:nowrap}
.way-s{font-size:12px;line-height:2;color:var(--fg-muted);flex:1}
/* ردیف دکمه‌ها همیشه ته کارت؛ چه کارت توضیح داشته باشد چه نه، هر چهار کارت هم‌سطح می‌مانند */
.way-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-start:auto;padding-block-start:4px}
.way-a .btn{padding:9px 15px;font-size:12.5px}
@media (max-width:1080px){
.waygrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
.waygrid{grid-template-columns:1fr}
}
.locate{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(22px,3vw,44px);align-items:start;margin-block-start:clamp(34px,4.4vw,60px)}
.loc-copy h2{margin-block-start:8px;font-family:var(--font-display);
  font-size:clamp(21px,2.6vw,29px);font-weight:900;color:var(--fg)}
.addr{margin-block-start:16px;font-style:normal;font-size:15px;line-height:2.35;color:var(--fg);
  padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--paper-200)}
.addr-l{list-style:none;display:flex;flex-wrap:wrap;gap:12px 30px;margin-block-start:18px}
.addr-l li{display:flex;flex-direction:column;gap:4px}
.addr-l span{font-size:11px;color:var(--fg-muted)}
.addr-l b{font-family:var(--font-display);font-size:14.5px;font-weight:800;color:var(--fg)}
.addr-a{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:20px}
.reach{margin-block-start:24px;padding-block-start:20px;border-block-start:1px solid var(--line)}
.reach-h{font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--fg)}
.reach ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-block-start:12px}
.reach li{display:flex;gap:10px;font-size:12.5px;line-height:2;color:var(--fg-muted)}
.reach li b{flex:none;inline-size:52px;font-family:var(--font-display);font-weight:800;color:var(--fg)}
.mapcard{position:relative;margin:0;border-radius:var(--card-radius);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-200)}
.map-img{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,#12203f 0%,var(--navy-900) 70%)}
/* عکس واقعی نقشه کامل و روشن؛ از وسط بریده می‌شود چون دفتر وسط عکس است */
.map-photo{background:#EEF0F3}
.map-photo>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  object-position:50% 50%;display:block}
/* بوم پلان شبکه‌ای فقط وقتی هنوز عکس نقشه بارگذاری نشده */
.map-img #netMap{position:absolute;inset:0;inline-size:100%;block-size:100%;display:block;z-index:2}
.map-img .pin{z-index:3}
/* سنجاق دفتر روی عکس نقشه — قطره‌ی سرمه‌ای با لبه‌ی طلایی و نشان سایت در
   دایره‌ی سفید. خود .map-pin نقطه‌ای بی‌اندازه درست وسط عکس است و نوک قطره
   دقیقا روی آن می‌نشیند: مربع ۴۵ درجه چرخیده، گوشه‌ی تیزش رو به پایین. */
.map-pin{--pin:52px;position:absolute;left:50%;top:50%;z-index:3;inline-size:0;block-size:0}
.map-pin::after{content:"";position:absolute;inline-size:26px;block-size:9px;left:-13px;top:-4.5px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(11,18,38,.42),rgba(11,18,38,0))}
.map-pin::before{content:"";position:absolute;inline-size:12px;block-size:12px;left:-6px;top:-6px;
  border-radius:50%;border:2px solid var(--gold-400);opacity:0;
  animation:pinwave 2.8s var(--ease-soft) infinite}
.map-pin-body{position:absolute;inline-size:var(--pin);block-size:var(--pin);
  left:calc(var(--pin) / -2);top:calc(var(--pin) * -1.2071);z-index:1;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--navy-900);
  /* سایه در قاب چرخیده نوشته شده تا روی صفحه درست رو به پایین بیفتد */
  box-shadow:inset 0 0 0 1.5px var(--gold-400),-9px 9px 18px -8px rgba(11,18,38,.55)}
.map-pin-face{position:absolute;inset:6px;border-radius:50%;background:#fff;
  display:grid;place-items:center;transform:rotate(45deg)}
.map-pin-face picture{display:grid;place-items:center;inline-size:100%;block-size:100%}
.map-pin-face img{inline-size:70%;block-size:70%;object-fit:contain}
.map-credit{position:absolute;inset-block-end:6px;inset-inline-end:8px;z-index:3;padding:1px 6px;
  border-radius:4px;background:rgba(255,255,255,.8);color:#33415c;font-size:10px;line-height:1.6}
.map-go{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:12px}
.mgo{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  font-family:var(--font-display);font-size:12.5px;font-weight:800;text-decoration:none;
  color:var(--fg);background:var(--surface);border:1px solid var(--line-strong);
  transition:color var(--dur-fast),border-color var(--dur-fast),background-color var(--dur-fast)}
.mgo svg{inline-size:15px;block-size:15px;color:var(--teal-600)}
.mgo:hover{color:var(--teal-600);border-color:var(--teal-600);
  background:color-mix(in oklab,var(--teal-600) 7%,var(--surface))}
.mapcard figcaption{display:flex;flex-direction:column;gap:4px;padding:14px 18px;
  border-block-start:1px solid var(--line);background:var(--surface)}
.mapcard figcaption b{font-family:var(--font-display);font-size:13.5px;font-weight:800;color:var(--fg)}
.mapcard figcaption span{font-size:11.5px;color:var(--fg-muted)}
.pin{position:absolute;inset-block-start:41%;inset-inline-start:47%;
  inline-size:0;block-size:0;pointer-events:none}
.pin i{position:absolute;inset-block-start:-7px;inset-inline-start:-7px;
  inline-size:14px;block-size:14px;border-radius:50%;background:var(--teal-600);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--teal-600) 26%,transparent),
             0 6px 16px -6px rgba(11,18,38,.7)}
.pin em{position:absolute;inset-block-start:-7px;inset-inline-start:-7px;
  inline-size:14px;block-size:14px;border-radius:50%;
  border:2px solid var(--teal-600);opacity:0;animation:pinwave 2.6s var(--ease-soft) infinite}
@media (max-width:920px){
.locate{grid-template-columns:1fr}
}
.bf-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(22px,3vw,52px);align-items:center}
.bf-lead{margin-block-start:14px;font-size:14px;line-height:2.25;color:#B9C7DC;max-inline-size:46ch}
.bf-cards{display:flex;flex-direction:column;gap:12px}
.bf{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:18px;
  text-decoration:none;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);
  transition:border-color var(--dur-fast),background-color var(--dur-fast),transform var(--dur-fast)}
.bf:hover{border-color:var(--accent);background:rgba(255,255,255,.06);transform:translateX(-4px)}
.bf b{font-family:var(--font-display);font-size:15px;font-weight:900;color:#fff}
.bf span{font-size:12.5px;line-height:2;color:#A9BAD2}
@media (max-width:920px){
.bf-grid{grid-template-columns:1fr}
}
.cform-wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(22px,3vw,50px);align-items:start}
.cf-copy h2{margin-block-start:8px;font-family:var(--font-display);
  font-size:clamp(21px,2.7vw,30px);font-weight:900;color:var(--fg)}
.cf-copy > p{margin-block-start:12px;font-size:13.5px;line-height:2.2;color:var(--fg-muted)}
.cf-l{list-style:none;display:flex;flex-direction:column;gap:9px;margin-block-start:20px}
.cf-l li{position:relative;padding-inline-start:26px;font-size:12.5px;line-height:1.9;color:var(--fg-muted)}
.cf-l li::before{content:"";position:absolute;inset-block-start:6px;inset-inline-start:2px;
  inline-size:13px;block-size:8px;border:2px solid var(--teal-600);
  border-block-start:0;border-inline-end:0;transform:rotate(-45deg)}
.cf-topics{border:0;padding:0;margin:0}
.cf-topics legend{font-size:11.5px;color:var(--fg-muted);margin-block-end:10px}
.topics{display:flex;flex-wrap:wrap;gap:8px}
.topic{font-family:var(--font-body);font-size:12.5px;color:var(--fg-muted);cursor:pointer;
  padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  transition:color var(--dur-fast),border-color var(--dur-fast),background-color var(--dur-fast)}
.topic:hover{color:var(--teal-600);border-color:color-mix(in oklab,var(--teal-600) 45%,var(--line))}
.topic.on{font-family:var(--font-display);font-weight:800;color:#fff;
  background:var(--teal-600);border-color:var(--teal-600)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.err{font-size:11.5px;line-height:1.9;color:var(--gold-600);font-style:normal}
.consent{display:flex;align-items:flex-start;gap:10px;margin-block-start:2px;cursor:pointer}
.consent input{inline-size:17px;block-size:17px;margin-block-start:3px;flex:none;accent-color:var(--teal-600)}
.consent span{font-size:12px;line-height:2;color:var(--fg-muted)}
.consent a{color:var(--teal-600);text-decoration:underline;text-underline-offset:3px}
.cf-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-block-start:4px}
@media (max-width:980px){
.cform-wrap{grid-template-columns:1fr}
}
@media (max-width:620px){
.cf-row{grid-template-columns:1fr}
}
.lg-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(22px,3vw,52px);align-items:start}
.lg-l{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 28px;margin-block-start:24px;max-inline-size:520px}
.lg-l li{display:flex;flex-direction:column;gap:5px;padding-block-end:12px;
  border-block-end:1px solid var(--line-strong)}
.lg-l span{font-size:11px;color:#7E93B0}
.lg-l b{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff}
.lg-social{display:flex;flex-wrap:wrap;gap:9px;margin-block-start:24px}
.lg-social a{font-size:12.5px;color:#B9C7DC;text-decoration:none;padding:9px 16px;
  border-radius:999px;border:1px solid var(--line-strong);
  transition:color var(--dur-fast),border-color var(--dur-fast),background-color var(--dur-fast)}
.lg-social a:hover{color:#fff;border-color:var(--accent);background:rgba(255,255,255,.05)}
/* بلوک نماد اعتماد این صفحه؛ با نوار اعتماد پایین هیروی صفحه های خانه
   هم نام بود و قاعده هایش به آن نشت می کرد، برای همین نام جدا گرفت. */
.trustmark{display:flex;flex-direction:column;gap:12px}
.trustbox{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:clamp(22px,2.6vw,30px);border-radius:20px;text-decoration:none;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.04);
  transition:border-color var(--dur-fast),transform var(--dur-fast)}
.trustbox:hover{border-color:var(--accent);transform:translateY(-3px)}
/* خودِ نشان اینماد. تصویرش از سرور اینماد می آید و اندازه اش دست ما
   نیست، پس فقط مهار می شود؛ هیچ فیلتر و تغییر رنگی روی آن نمی نشیند
   چون دستکاری ظاهر نشان مجاز نیست. */
.tb-seal{display:block;line-height:0}
.tb-seal img{max-inline-size:100%;block-size:auto}
.tb-mark{inline-size:56px;block-size:56px;border-radius:18px;display:grid;place-items:center;
  color:var(--accent);background:rgba(103,232,249,.10)}
.tb-mark svg{inline-size:28px;block-size:28px}
.trustbox b{font-family:var(--font-display);font-size:14.5px;font-weight:900;color:#fff}
.tb-s{font-size:11.5px;line-height:1.9;color:#A9BAD2}
.trust-n{font-size:11px;line-height:2;color:#7E93B0;text-align:center}
@media (max-width:920px){
.lg-grid{grid-template-columns:1fr}
.lg-l{grid-template-columns:1fr;max-inline-size:none}
}
@media (prefers-reduced-motion: reduce){
.pin em,.map-pin::before{animation:none}
}
@media (max-width:620px){
.map-pin{--pin:42px}
}