@font-face{
  font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn'; src:url('../fonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight:900; font-display:swap;
}
@font-face{
  font-family:'Oswald'; src:url('../fonts/Oswald-Bold.ttf');
  font-weight:400 700; font-display:swap;
}

:root{
  --black:      #070808;
  --panel:      #0F1110;
  --line:       #202422;
  --steel:      #8A938C;
  --red:        #C4202B;   /* brand red, refined to match harimimen.com's real accent */
  --red-dim:    #670D12;   /* exact deep maroon used across the live site's icons */
  --green:      #0E5B1F;   /* brand green (from the site's #085115, slightly lifted for contrast) */
  --green-deep: #085115;   /* exact green used on harimimen.com */
  --paper:      #F1EFE9;
  --paper-ink:  #0C0C0B;
  --paper-line: #DEDAD0;

  --f-display:'Vazirmatn', Tahoma, sans-serif;
  --f-tag:'Oswald','Vazirmatn',Tahoma,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}
body{
  margin:0;
  text-align:right;
  font-family:var(--f-display);
  background:var(--paper);
  color:var(--paper-ink);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 20px;}

.tag{
  font-family:var(--f-display); letter-spacing:.02em;
  font-size:11px; font-weight:700;
}
.tag-en{
  font-family:var(--f-tag); text-transform:uppercase; letter-spacing:.14em;
  font-size:10.5px; font-weight:600;
}

/* thin precision seam - signature device instead of chunky clip cuts */
.seam{height:1px; background:var(--line);}
.seam.on-paper{background:var(--paper-line);}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,81,21,.82);
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:72px; max-width:1320px;
}
.site-header.has-back .header-inner{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
}
.site-header.has-back .brand{justify-self:center;}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:13.5px; color:#fff;}
.brand .mark{height:26px; width:auto; flex:none; display:flex; align-items:center;}
.brand .mark img{height:100%; width:auto; object-fit:contain;}
.brand span{line-height:1.3;}
.brand-text{display:flex; flex-direction:column; line-height:1.42;}
.brand-text b{font-weight:800; white-space:nowrap;}
.brand-text b:first-child{font-size:.82em; font-weight:600; opacity:.82;}
.call-btn{
  font-family:var(--f-tag); text-transform:uppercase; letter-spacing:.1em;
  position:relative;
  display:flex; align-items:center; gap:7px;
  color:#fff;
  padding:9px 4px; font-size:11.5px; font-weight:700;
  border-bottom:1px solid var(--red);
}
.call-btn::before{content:'●'; color:var(--red); font-size:8px;}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--black); color:#fff; overflow:hidden;}
.hero-photo{
  position:relative; aspect-ratio:1/1; overflow:hidden; background:#111;
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:contrast(1.05);
}
.hero-photo .duo{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,8,8,.10) 0%, rgba(7,8,8,.0) 45%, rgba(7,8,8,.92) 100%);
  mix-blend-mode:multiply;
}
.hero-photo .duo2{
  position:absolute; inset:0;
  background:linear-gradient(0deg, var(--black) 0%, rgba(7,8,8,0) 55%);
}
/* subtle scan sweep */
.hero-photo .scan{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.08) 48%, transparent 56%);
  background-size:220% 220%;
  animation:scan 7s linear infinite;
}
@keyframes scan{
  0%{background-position:120% 0%;}
  100%{background-position:-40% 0%;}
}
/* faint technical grid */
.hero-photo .grid{
  position:absolute; inset:0; pointer-events:none; opacity:.18;
  background-image:
    linear-gradient(0deg, transparent 24%, rgba(255,255,255,.5) 25%, rgba(255,255,255,.5) 25.5%, transparent 26%),
    linear-gradient(90deg, transparent 24%, rgba(255,255,255,.5) 25%, rgba(255,255,255,.5) 25.5%, transparent 26%);
  background-size:25% 25%;
}
.hero-tag{
  position:absolute; top:16px; right:20px; z-index:3; color:var(--red);
}
.hero-tag::before{content:'/// '; color:var(--steel);}
.hero-corner{
  position:absolute; bottom:16px; right:20px; z-index:3; text-align:right;
  font-family:var(--f-display); font-size:11px; color:#B9C2BC;
}
.hero-corner b{color:#fff; display:block; font-size:14px; font-weight:700; font-family:var(--f-display);}

.hero-copy{position:relative; padding:34px 20px 32px; z-index:2; text-align:right;}
.ghost-num{
  position:absolute; top:-8px; right:14px; z-index:0;
  font-family:var(--f-tag); font-weight:700; font-size:120px; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.09);
  user-select:none; pointer-events:none;
}
.hero-copy h1{
  position:relative; z-index:1;
  font-size:clamp(26px,7vw,32px); line-height:1.28; font-weight:900; margin:0 0 14px; letter-spacing:-.01em;
}
.hero-copy h1 em{font-style:normal; color:var(--red);}
.hero-copy p{position:relative; z-index:1; font-size:13.5px; color:#B7BDB9; line-height:1.9; margin:0 0 24px; max-width:48ch;}

.hero-actions{position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 22px; font-weight:700; font-size:13px;
  font-family:var(--f-display);
}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:active{background:var(--red-dim);}
.btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28);}

/* ---------- stats ---------- */
.stats-strip{background:var(--green-deep); border-top:1px solid rgba(255,255,255,.12);}
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr);}
@media(min-width:640px) and (max-width:1023px){ .stats-grid{grid-template-columns:repeat(4,1fr);} }
.stat{
  padding:20px 14px; text-align:center;
  border-top:1px solid rgba(255,255,255,.12); border-left:1px solid rgba(255,255,255,.12);
}
.stat:nth-child(1),.stat:nth-child(2){border-top:none;}
@media(min-width:640px) and (max-width:1023px){ .stat{border-top:none;} }
.stat:last-child{border-left:none;}
.stat b{display:block; font-family:var(--f-tag); font-size:26px; color:#fff; font-weight:700; letter-spacing:.02em;}
.stat span{font-size:11.5px; color:#A8C4AE; font-weight:500;}

/* ---------- services ---------- */
.services{padding:50px 0 14px; background:var(--paper);}
.services-cards{padding:10px 0 14px; background:var(--paper);}
.services-cards .card-grid{margin-top:0;}
.section-head{margin-bottom:30px; position:relative; text-align:right;}
.section-head .tag{color:var(--red-dim);}
.section-head h2{
  font-size:clamp(22px,6vw,27px); font-weight:900; margin:10px 0 8px; color:var(--paper-ink); letter-spacing:-.01em;
}
.section-head p{font-size:13px; color:#68675f; margin:0; max-width:48ch;}

.service-nav{
  display:grid; grid-template-columns:1fr; gap:0;
  margin-top:22px; border:1px solid var(--paper-line); background:#fff;
}
@media(min-width:640px) and (max-width:1023px){ .service-nav{grid-template-columns:1fr 1fr;} }
.service-nav-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--paper-line);
  font-size:13.5px; font-weight:700; color:var(--paper-ink);
  transition:background .15s ease, color .15s ease;
}
@media(min-width:640px) and (max-width:1023px){
  .service-nav-item:nth-child(odd){border-left:1px solid var(--paper-line);}
}
.service-nav-item:last-child{border-bottom:none;}
@media(min-width:640px) and (max-width:1023px){
  .service-nav-item:nth-last-child(2):nth-child(odd){border-bottom:none;}
}
.service-nav-item .ic{display:flex; width:20px; height:20px; color:var(--red-dim); flex:none;}
.service-nav-item .ic svg{width:100%; height:100%;}
.service-nav-item .lbl{flex:1; min-width:0;}
.service-nav-item .go{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--red); color:#fff; font-weight:700; font-size:13px;
  transition:background .15s ease, transform .15s ease;
}
.service-nav-item:hover{background:var(--green-deep); color:#fff;}
.service-nav-item:hover .ic{color:#fff;}
.service-nav-item:hover .go{background:#fff; color:var(--green-deep); transform:translateX(-4px);}

.card-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); margin-top:26px;}
@media(min-width:680px) and (max-width:1023px){ .card-grid{grid-template-columns:1fr 1fr;} }

.service-card{
  position:relative; background:var(--paper);
  display:flex; flex-direction:column;
  transition:background .2s ease, box-shadow .2s ease;
  scroll-margin-top:76px;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.service-card:hover{background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.08);}
.service-card .idx{
  font-family:var(--f-tag); font-weight:700; font-size:11px; letter-spacing:.1em;
  color:var(--steel); padding:16px 18px 0;
}
.service-card .media{
  height:190px; position:relative; overflow:hidden; margin-top:10px;
  background:#111;
}
.service-card .media img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.03);
  transition:transform .35s ease;
}
.service-card:hover .media img{transform:scale(1.04);}
.service-card .media .duo{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,8,8,0) 60%, rgba(7,8,8,.45) 100%);
  mix-blend-mode:multiply;
}
.service-card .icon-only{display:flex; align-items:center; justify-content:center; height:100%; background:var(--black);}
.service-card .icon-only svg{width:44px; height:44px; color:rgba(196,32,43,.85);}

.service-card .body{padding:18px 18px 24px; flex:1; display:flex; flex-direction:column; text-align:right; align-items:flex-start;}
.card-icon{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; background:var(--black); margin-bottom:12px; flex:none;
}
.card-icon svg{width:19px; height:19px; color:var(--red);}
.service-card h3{font-size:17px; font-weight:800; margin:0 0 6px; color:var(--paper-ink);}
.service-card .sub{
  display:inline-block;
  font-family:var(--f-display); font-size:11px; font-weight:700;
  color:var(--green-deep); background:rgba(8,81,21,.08);
  border-right:3px solid var(--green-deep);
  padding:5px 10px; margin:0 0 12px;
}
.service-card p{font-size:12.5px; color:#5c5b54; line-height:1.85; margin:0 0 14px;}

.card-link{display:flex; flex-direction:column; flex:1;}
.card-actions{
  display:flex; gap:10px;
  padding:14px 16px 18px;
  border-top:1px solid var(--paper-line);
}
.card-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 10px; font-size:12.5px; font-weight:700;
}
.card-btn-more{
  color:var(--paper-ink);
  border:1px solid var(--paper-line); background:#fff;
}
.card-btn-more .ar{color:var(--red-dim); transition:transform .2s ease;}
.card-btn-more:hover .ar{transform:translateX(-4px);}
.card-btn-call{
  color:#fff; background:var(--green-deep);
}
.card-btn-call:hover{background:#0A6A1E;}

/* ---------- service page ---------- */
.service-hero{background:var(--green-deep); color:#fff; padding:26px 0 28px;}
.crumb{display:inline-block; font-size:12.5px; color:var(--steel); margin-bottom:18px;}
.crumb:hover{color:#fff;}
.service-hero-head{display:flex; align-items:center; gap:14px;}
.card-icon.big{width:52px; height:52px; margin:0; flex:none;}
.card-icon.big svg{width:26px; height:26px;}
.service-hero-head h1{font-size:clamp(21px,6vw,27px); font-weight:900; margin:0 0 4px; line-height:1.4;}
.service-hero-head .sub{margin:0; font-size:12.5px; color:#A8C4AE; font-weight:600;}

.service-gallery{padding:26px 0 0; background:var(--paper);}
.gallery-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.gallery-item{margin:0; overflow:hidden; background:#111; border:1px solid var(--paper-line);}
.gallery-item.main{grid-column:1 / -1;}
.gallery-item img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; display:block;}
.gallery-item.main img{aspect-ratio:16/8;}

.service-content{padding:28px 0 46px; background:var(--paper);}
.service-content .lead{font-size:15px; font-weight:600; line-height:2; color:var(--paper-ink); margin:0 0 16px;}
.service-content p{font-size:13.5px; line-height:2.1; color:#4a4942; margin:0 0 14px;}
.service-sub-head{font-size:17px; font-weight:800; margin:26px 0 14px; color:var(--paper-ink);}
.service-details-list{
  list-style:none; margin:0 0 26px; padding:0;
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--paper-line); background:#fff;
}
.service-details-list li{
  position:relative; padding:12px 38px 12px 16px;
  font-size:13px; color:#3d3c36; line-height:1.9;
  border-bottom:1px solid var(--paper-line);
}
.service-details-list li:last-child{border-bottom:none;}
.service-details-list li::before{
  content:''; position:absolute; right:16px; top:20px;
  width:7px; height:7px; background:var(--red-dim);
}
.service-cta{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--green-deep); color:#fff; padding:20px 18px; margin-top:10px;
}
.service-cta-text b{display:block; font-size:14.5px; margin-bottom:4px;}
.service-cta-text span{font-size:12px; color:#BFD9C5;}

/* ---------- footer ---------- */
.site-footer{background:var(--green-deep); color:#CFE0D3; padding:38px 0 20px;}
.footer-grid{display:flex; flex-direction:column; gap:16px; font-size:13px;}
.footer-grid .brand{color:#fff;}
.footer-line{display:flex; align-items:center; gap:8px; line-height:1.9;}
.footer-icon{display:inline-flex; width:16px; height:16px; flex:none; color:var(--red);}
.footer-icon svg{width:100%; height:100%;}
.footer-bottom{
  margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.15);
  font-size:11px; color:#9DBCA4; text-align:center;
}

.sr-only{position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* ---------- app-like back button & header layout ---------- */
.header-start{display:flex; align-items:center; gap:10px; min-width:0;}
.back-btn{
  display:flex; align-items:center; justify-content:center;
  padding:8px 14px; flex:none;
  border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:12.5px; font-weight:700; font-family:var(--f-display);
  white-space:nowrap;
}
.back-btn:active{background:rgba(255,255,255,.12);}
.site-header.has-back .call-btn{justify-self:end;}
.site-header.has-back .back-btn{justify-self:start;}

/* footer links */
.footer-line a{color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.35);}
.footer-line a:hover{text-decoration-color:#fff;}

/* gallery captions - overlaid on the lower part of the image */
.gallery-item{position:relative;}
.gallery-grid figure{margin:0;}
.gallery-grid figcaption{
  position:absolute; right:0; left:0; bottom:0;
  padding:22px 12px 10px;
  color:#fff; font-size:12px; font-weight:500; line-height:1.7; text-align:right;
  background:linear-gradient(0deg, rgba(7,8,8,.82) 0%, rgba(7,8,8,.45) 60%, rgba(7,8,8,0) 100%);
}

/* ---------- license strip (homepage) ---------- */
.license-strip{
  background:linear-gradient(180deg,#fff 0%, var(--paper) 100%);
  border-bottom:1px solid var(--paper-line);
  padding:32px 0 36px;
}
.license-inner{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center;
}
.license-inner .tag{color:var(--red-dim); margin-bottom:2px;}
.license-inner h2{
  font-size:19px; font-weight:900; margin:0; color:var(--paper-ink);
}
.license-frame{
  position:relative; cursor:zoom-in;
  width:100%; max-width:280px;
  border:1px solid var(--paper-line); background:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.10);
}
.license-frame img{width:100%; height:auto; display:block;}
.license-frame::after{
  content:'🔍 بزرگ‌نمایی';
  position:absolute; bottom:0; right:0; left:0;
  background:linear-gradient(0deg, rgba(7,8,8,.78), rgba(7,8,8,0));
  color:#fff; font-size:11px; font-weight:700; padding:20px 10px 8px; text-align:center;
}
.license-text p{margin:0; font-size:13px; color:#4a4942; line-height:1.9; max-width:40ch;}

/* ---------- client logos: seamless CSS marquee (no stop/start) ---------- */
.clients-strip{padding:44px 0 56px; background:var(--paper); overflow:hidden;}
.clients-strip .section-head{margin-bottom:26px;}
.logo-marquee{
  overflow:hidden; direction:ltr;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee-track{
  display:flex; align-items:center; width:max-content;
  animation:logo-marquee-scroll 26s linear infinite;
}
.logo-marquee:hover .logo-marquee-track{animation-play-state:paused;}
@keyframes logo-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-25%);}
}
.client-logo-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  height:100px; width:110px; flex:none; padding:0 10px;
}
.client-logo-item img{
  max-height:56px; max-width:100%; width:auto; object-fit:contain;
}
.client-logo-item span{font-size:12px; font-weight:800; color:var(--paper-ink); white-space:nowrap;}

/* ---------- per-service license badge (service page) ---------- */
.service-license{
  background:#fff; border:1px solid var(--paper-line); padding:16px;
  margin:0 0 26px;
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.service-license .license-frame{max-width:220px;}
.service-license b{display:block; font-size:13.5px; color:var(--paper-ink); margin-bottom:3px;}
.service-license span{font-size:12px; color:#6b6a62;}

/* ---------- lightbox ---------- */
.gallery-item{cursor:zoom-in;}
.lightbox-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(4,5,4,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.lightbox-overlay.is-open{opacity:1; pointer-events:auto;}
.lightbox-overlay img{
  max-width:92vw; max-height:84vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5);
  transition:opacity .2s ease;
}
.lightbox-spinner{
  display:none;
  position:absolute; z-index:3;
  width:44px; height:44px;
  border:3px solid rgba(255,255,255,.2); border-top-color:#fff;
  border-radius:50%;
  animation:lightbox-spin .8s linear infinite;
}
.lightbox-overlay.is-loading .lightbox-spinner{display:block;}
@keyframes lightbox-spin{to{transform:rotate(360deg);}}
.lightbox-caption{
  position:absolute; bottom:26px; right:0; left:0; text-align:center;
  color:#fff; font-size:13px; padding:0 20px;
}
.lightbox-close{
  position:absolute; top:18px; left:18px; z-index:2;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:var(--black); color:#fff; font-size:19px; border:1px solid rgba(255,255,255,.4);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  cursor:pointer;
}
.lightbox-close:hover{background:var(--red);}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%) rotate(0deg); z-index:2;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:var(--black); color:#fff; font-size:20px; border:1px solid rgba(255,255,255,.4);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  cursor:pointer;
}
.lightbox-nav:hover{background:var(--red);}
.lightbox-nav svg{width:20px; height:20px;}
.lightbox-prev{right:18px;}
.lightbox-next{left:18px;}
.lightbox-next svg{transform:rotate(180deg);}

/* =========================================================
   APP FRAME (1024px+): the whole site renders at mobile width,
   centered, like a real web-app viewed on a phone — not a
   stretched "desktop layout". Everything above this point stays
   mobile-first by default; this block only adds the frame itself.
   ========================================================= */
@media(min-width:1024px){
  html{background:#1B1E1C;}
  body{
    max-width:480px; margin:0 auto;
    min-height:100vh;
    box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 40px 100px rgba(0,0,0,.55);
    position:relative;
  }
  .site-header{position:sticky;}
}

/* ---------- footer social icons ---------- */
.footer-social{display:flex; gap:10px; margin-top:6px; flex-wrap:wrap;}
.social-icon{
  display:flex; align-items:center; gap:8px;
  padding:7px 14px 7px 7px; border-radius:999px;
  background:rgba(255,255,255,.08);
  transition:background .15s ease, transform .15s ease;
}
.social-icon img{
  width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.social-icon span{font-size:12px; font-weight:600; color:#fff;}
.social-icon:hover{background:rgba(255,255,255,.16); transform:translateY(-2px);}