@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --ink:#10151f;
  --ink-2:#161d2b;
  --paper:#f5f4f1;
  --paper-2:#ebe9e4;
  --line-on-ink:rgba(245,244,241,.14);
  --line-on-paper:rgba(16,21,31,.12);
  --text-on-ink:#f5f4f1;
  --text-on-ink-dim:rgba(245,244,241,.68);
  --text-on-paper:#10151f;
  --text-on-paper-dim:rgba(16,21,31,.64);
  --pine:#1e6f5c;
  --pine-bright:#2b9179;
  --brass:#b08947;
  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(16,21,31,.06), 0 8px 24px -12px rgba(16,21,31,.12);
  --shadow-md:0 12px 40px -16px rgba(16,21,31,.28);
  --shadow-ink:0 20px 60px -20px rgba(0,0,0,.55);
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
  --font-fa:'Vazirmatn', Tahoma, sans-serif;
  --font-en:'Space Grotesk', Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}
body{
  margin:0;
  font-family:var(--font-fa);
  background:var(--paper);
  color:var(--text-on-paper);
  direction:rtl;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.en{font-family:var(--font-en); direction:ltr; unicode-bidi:isolate;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.01em;}
p{margin:0;}
.container{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);}
.section{padding-block:clamp(64px,9vw,120px);}
.on-ink{background:var(--ink); color:var(--text-on-ink);}
.on-ink-2{background:var(--ink-2); color:var(--text-on-ink);}
.on-paper{background:var(--paper);}
.on-paper-2{background:var(--paper-2);}
.dim{color:var(--text-on-paper-dim);}
.on-ink .dim{color:var(--text-on-ink-dim);}
.eyebrow{
  font-family:var(--font-en);
  font-size:13px;
  color:var(--pine-bright);
  margin-bottom:14px;
  display:block;
}
.on-paper .eyebrow, .on-paper-2 .eyebrow{color:var(--pine);}

/* focus */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--pine-bright); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---- Nav ---- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(16,21,31,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-on-ink);
}
.nav .container{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{color:var(--text-on-ink); font-weight:700; font-size:17px; display:flex; align-items:center; gap:10px;}
.brand-mark{width:9px; height:9px; border-radius:50%; background:var(--pine-bright); flex:none;}
.nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0;}
.nav-links a{color:var(--text-on-ink-dim); font-size:15px; transition:color .15s;}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--text-on-ink);}
.nav-cta{
  border:1px solid var(--line-on-ink); color:var(--text-on-ink)!important;
  padding:9px 20px; border-radius:var(--radius-sm); font-size:14px;
  transition:background .15s,border-color .15s;
}
.nav-cta:hover{background:var(--pine); border-color:var(--pine);}
.nav-toggle{display:none; background:none; border:0; color:var(--text-on-ink); font-size:26px; cursor:pointer; line-height:1;}
@media (max-width:860px){
  .nav-links{
    position:fixed; inset:76px 0 0 0; background:var(--ink);
    flex-direction:column; padding:32px var(--pad); gap:22px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  }
  .nav-links.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-links a{font-size:19px;}
  .nav-cta{display:inline-block; width:fit-content;}
  .nav-toggle{display:block;}
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius-sm); font-size:15px; font-weight:500;
  border:1px solid transparent; cursor:pointer; transition:transform .15s, background .15s, border-color .15s;
}
.btn-primary{background:var(--pine); color:#fff; box-shadow:0 8px 24px -10px rgba(30,111,92,.55);}
.btn-primary:hover{background:var(--pine-bright); transform:translateY(-1px);}
.btn-ghost-ink{border-color:var(--line-on-ink); color:var(--text-on-ink);}
.btn-ghost-ink:hover{border-color:var(--text-on-ink-dim); transform:translateY(-1px);}
.btn-ghost-paper{border-color:var(--line-on-paper); color:var(--text-on-paper);}
.btn-ghost-paper:hover{border-color:var(--pine); color:var(--pine); transform:translateY(-1px);}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}

/* ---- Hero ---- */
.hero{
  position:relative; overflow:hidden; padding-block:clamp(70px,13vw,150px);
  background:
    radial-gradient(60% 55% at 82% 15%, rgba(43,145,121,.16), transparent 60%),
    radial-gradient(40% 40% at 8% 90%, rgba(176,137,71,.10), transparent 60%),
    var(--ink);
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; position:relative; z-index:2;}
.hero h1{font-size:clamp(34px,4.6vw,58px); line-height:1.22;}
.hero .role{font-family:var(--font-en); font-size:clamp(15px,1.6vw,19px); color:var(--pine-bright); margin-top:18px; letter-spacing:.01em;}
.hero p.lede{margin-top:22px; max-width:52ch; font-size:17px; color:var(--text-on-ink-dim);}
.hero .btn-row{margin-top:34px;}
.hero-visual{position:relative; min-height:380px; display:flex; align-items:center; justify-content:center;}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%;}
.hero-photo-frame{
  position:relative; z-index:2; width:min(320px,70%); aspect-ratio:4/5;
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-ink);
  border:1px solid var(--line-on-ink);
}
.hero-photo-frame img{width:100%; height:100%; object-fit:cover;}
.hero-photo-frame::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(43,145,121,.25);
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{min-height:300px; order:-1;}
  .hero-photo-frame{width:min(240px,68%);}
}

/* ---- Pillars ---- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-on-paper); border:1px solid var(--line-on-paper); margin-top:56px;}
.pillar{background:var(--paper); padding:34px 26px;}
.pillar .num{font-family:var(--font-en); font-size:13px; color:var(--pine); margin-bottom:16px; display:block;}
.pillar h3{font-size:19px; margin-bottom:10px;}
.pillar p{font-size:14.5px; color:var(--text-on-paper-dim);}
@media (max-width:860px){.pillars{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.pillars{grid-template-columns:1fr;}}

/* ---- Process ---- */
.process-list{margin-top:52px; border-top:1px solid var(--line-on-ink);}
.process-item{
  display:grid; grid-template-columns:64px 200px 1fr; gap:24px; align-items:baseline;
  padding-block:22px; border-bottom:1px solid var(--line-on-ink);
}
.process-item .step{font-family:var(--font-en); color:var(--text-on-ink-dim); font-size:14px;}
.process-item h4{font-size:19px;}
.process-item p{color:var(--text-on-ink-dim); font-size:14.5px; max-width:60ch;}
@media (max-width:700px){
  .process-item{grid-template-columns:1fr; gap:6px;}
}

/* ---- Cards / grids ---- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr;}}
.card{
  background:var(--paper); border:1px solid var(--line-on-paper); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow-sm); transition:border-color .18s, transform .18s, box-shadow .18s;
}
.card:hover{border-color:var(--pine); transform:translateY(-3px); box-shadow:var(--shadow-md);}
.on-ink .card{background:var(--ink-2); border-color:var(--line-on-ink); box-shadow:var(--shadow-ink);}
.on-ink .card:hover{border-color:var(--pine-bright);}
.card h3{font-size:19px; margin-bottom:12px;}
.card p{font-size:14.5px; color:var(--text-on-paper-dim);}
.on-ink .card p{color:var(--text-on-ink-dim);}
.card a.more{display:inline-block; margin-top:16px; font-size:14px; color:var(--pine); font-weight:500;}
.on-ink .card a.more{color:var(--pine-bright);}

/* ---- Stats ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-on-ink); border:1px solid var(--line-on-ink); margin-top:10px;}
.stat{background:var(--ink); padding:34px 24px; text-align:center;}
.stat .n{font-family:var(--font-en); font-size:clamp(30px,4vw,44px); color:var(--pine-bright); font-weight:700;}
.stat .l{margin-top:8px; font-size:14px; color:var(--text-on-ink-dim);}
@media (max-width:700px){.stats{grid-template-columns:1fr;}}

/* ---- Section header ---- */
.section-head{max-width:640px; margin-bottom:16px;}
.section-head h2{font-size:clamp(26px,3.2vw,38px); margin-top:10px;}
.section-head p{margin-top:16px; font-size:16px;}

/* ---- CTA band ---- */
.cta-band{text-align:center;}
.cta-band h2{font-size:clamp(26px,3.6vw,42px); max-width:16ch; margin:0 auto;}
.cta-band p{margin-top:18px; max-width:48ch; margin-inline:auto;}
.cta-band .btn-row{justify-content:center; margin-top:30px;}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--line-on-ink); padding-block:44px;}
.footer .container{display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;}
.footer .links{display:flex; gap:22px; flex-wrap:wrap; font-size:14px;}
.footer .links a{color:var(--text-on-ink-dim); transition:color .15s;}
.footer .links a:hover{color:var(--text-on-ink);}
.footer small{color:var(--text-on-ink-dim); font-size:13px;}

/* ---- Page hero (interior pages) ---- */
.page-hero{
  padding-block:clamp(56px,8vw,96px);
  background:radial-gradient(55% 70% at 85% 0%, rgba(43,145,121,.14), transparent 60%), var(--ink);
}
.page-hero .eyebrow{margin-bottom:16px;}
.page-hero h1{font-size:clamp(30px,4vw,48px); max-width:18ch;}
.page-hero p{margin-top:18px; max-width:60ch; font-size:16.5px; color:var(--text-on-ink-dim);}

/* ---- Prose ---- */
.prose{max-width:70ch;}
.prose h2{font-size:24px; margin-top:44px; margin-bottom:14px;}
.prose h2:first-child{margin-top:0;}
.prose p{margin-bottom:16px; font-size:16px;}
.prose ul{padding-inline-start:22px; margin:0 0 16px;}
.prose li{margin-bottom:8px; font-size:16px;}

/* ---- About split ---- */
.about-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start;}
.about-split img{border-radius:var(--radius); width:100%; object-fit:cover; aspect-ratio:4/5;}
.values-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px;}
.values-list div{border-top:1px solid var(--line-on-paper); padding-top:14px; font-size:15px;}
@media (max-width:860px){.about-split{grid-template-columns:1fr;} .about-split img{max-width:260px;}}

/* ---- Contact ---- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.contact-info dt{font-family:var(--font-en); font-size:13px; color:var(--text-on-ink-dim); margin-top:26px;}
.contact-info dt:first-child{margin-top:0;}
.contact-info dd{margin:8px 0 0; font-size:17px;}
.contact-info dd a{transition:color .15s;}
.contact-info dd a:hover{color:var(--pine-bright);}
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:14px; margin-bottom:8px; color:var(--text-on-ink-dim);}
.form-field input,.form-field select,.form-field textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--line-on-ink); color:var(--text-on-ink);
  border-radius:var(--radius-sm); padding:12px 14px; font-family:var(--font-fa); font-size:15px;
}
.form-field textarea{resize:vertical; min-height:110px;}
.form-note{margin-top:14px; font-size:13.5px; color:var(--text-on-ink-dim);}
#form-success{display:none; margin-top:16px; padding:14px 16px; border:1px solid var(--pine-bright); border-radius:var(--radius-sm); font-size:14.5px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

/* ---- Case studies / articles list ---- */
.list-item{display:grid; grid-template-columns:140px 1fr; gap:24px; padding-block:28px; border-top:1px solid var(--line-on-paper);}
.list-item:last-child{border-bottom:1px solid var(--line-on-paper);}
.list-item .tag{font-family:var(--font-en); font-size:13px; color:var(--pine);}
.list-item h3{font-size:19px; margin-bottom:8px;}
.list-item p{font-size:14.5px; color:var(--text-on-paper-dim);}
@media (max-width:600px){.list-item{grid-template-columns:1fr; gap:8px;}}

.empty-state{border:1px dashed var(--line-on-paper); border-radius:var(--radius); padding:40px; text-align:center; color:var(--text-on-paper-dim);}
.on-ink .empty-state{border-color:var(--line-on-ink); color:var(--text-on-ink-dim);}

.breadcrumb{font-size:13.5px; color:var(--text-on-ink-dim); margin-bottom:18px;}
.breadcrumb a:hover{color:var(--text-on-ink);}