/* گردرگ — warm ink on warm paper.

   The page's job is credibility, so hierarchy is carried by rules, margins and
   restraint rather than by size or motion. One accent (firouzeh) appears only
   on rules, links and focus states; it is never a fill for large areas.

   RTL-native: every spacing/alignment rule below uses logical properties, so
   nothing needs a mirrored override for the site's actual reading direction.

   Mobile-first: every rule above the "progressive enhancement" banner targets a
   phone. The three min-width blocks below it are additive — they layer on a
   wider layout, they never undo one. Nothing in the base rules assumes a
   viewport wider than a phone. */

/* Self-hosted: this mirror has no CDN to reach, and Google Fonts is one.
   Sahel (SIL OFL, see static/fonts/SAHEL-LICENSE.txt) covers Persian well
   at both weights used on this page. */
@font-face{
  font-family:"Sahel";
  src:url("../fonts/Sahel.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Sahel";
  src:url("../fonts/Sahel-Bold.woff2") format("woff2");
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#1a1613;        /* warm near-black, never pure #000 */
  --paper:#faf8f5;      /* warm off-white, never pure #fff */
  --paper-dim:#f2ede6;
  --line:#e0d8cd;
  --line-strong:#cabfb0;
  --accent:#0f6f76;     /* firouzeh — rules, links, focus only */
  --accent-ink:#faf8f5;
  --muted:#6f665c;

  --font-fa:"Sahel","Vazirmatn","Segoe UI","Geeza Pro",Tahoma,sans-serif;

  --gutter:1.25rem;
  --measure:1240px;
  --radius:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --tap:44px; /* minimum comfortable touch target */

  /* One stepped merlon, tiled horizontally — the Arg-e Bam crenellation that
     gives the page its only ornament. Used as a mask so it inherits theme
     colour instead of baking one in, and costs no extra request. */
  --crenel-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 12V6h8V0h8v6h8v6z'/%3E%3C/svg%3E");
}

@media (min-width:640px){ :root{ --gutter:2rem; } }
@media (min-width:1200px){ :root{ --gutter:clamp(2rem,4vw,3.5rem); } }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f0ebe4;
    --paper:#141211;
    --paper-dim:#1d1a17;
    --line:#332e29;
    --line-strong:#4a433b;
    --accent:#4fb3ba;
    --accent-ink:#141211;
    --muted:#a49a8e;
  }
}

/* ----------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-fa);
  font-size:1rem;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:700;line-height:1.3;margin:0}
p{margin:0}
ul,ol{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.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;
}

.skip{
  position:absolute;inset-inline-start:-999px;top:0;
  background:var(--accent);color:var(--accent-ink);
  padding:.75em 1.25em;border-radius:0 0 8px 8px;z-index:200;
}
.skip:focus{inset-inline-start:1rem}

/* Shared section shell. Every section is capped at --measure and centred; the
   gutter is the single source of horizontal rhythm across the whole page. */
.hero,.facts,.services,.proof,.story,.tech,.faq,
.foot__cta,.foot__links,.foot__note{
  max-width:var(--measure);
  margin-inline:auto;
}
.services,.proof,.story,.tech,.faq{padding:3rem var(--gutter)}

.sec__head{margin-block-end:2rem;max-width:58ch}
.sec__head h2{font-size:clamp(1.45rem,5.5vw,2.15rem);letter-spacing:-.01em}
.sec__head p{color:var(--muted);margin-block-start:.85rem}

/* ---------------------------------------------------------- crenellation */
.crenel{
  border:0;margin:0;
  block-size:10px;
  background:var(--line-strong);
  -webkit-mask:var(--crenel-mask) repeat-x center/24px 10px;
  mask:var(--crenel-mask) repeat-x center/24px 10px;
  opacity:.85;
}

/* ------------------------------------------------------------------ nav */
/* Base (phone): brand + a hamburger button. Tapping it drops a full-width
   link panel below the header. The panel is always in the DOM — never
   display:none — so it stays reachable by keyboard/AT even before JS
   attaches the toggle; JS only adds the open/close animation on top. */
.nav{
  position:sticky;top:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:.75rem var(--gutter);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-block-end:1px solid var(--line);
}
.nav__brand{font-weight:700;font-size:1.15rem;text-decoration:none;letter-spacing:.02em}

.nav__toggle{
  order:2;
  display:flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);
  padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink);
  cursor:pointer;
}
.nav__toggle:hover{background:var(--paper-dim)}
.nav__toggle-bars{display:flex;flex-direction:column;gap:5px;width:20px}
.nav__toggle-bars i{
  display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav__links{
  order:3;
  flex-basis:100%;
  display:flex;flex-direction:column;
  max-height:0;overflow:hidden;
  transition:max-height .35s var(--ease);
}
.nav__links.is-open{max-height:24rem}
.nav__links a{
  text-decoration:none;padding-block:.85rem;
  border-block-start:1px solid var(--line);
  min-height:var(--tap);display:flex;align-items:center;
}

/* --------------------------------------------------------------- button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:var(--tap);
  padding:.7em 1.4em;border-radius:var(--radius);
  border:1px solid var(--line-strong);
  font-family:inherit;font-weight:700;font-size:.95rem;
  text-decoration:none;
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{border-color:var(--ink)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--bare{
  border-color:transparent;padding-inline:.35em;min-height:auto;
  text-decoration:underline;text-underline-offset:5px;
  text-decoration-color:var(--line-strong);
}
.btn--bare:hover{color:var(--accent);border-color:transparent;text-decoration-color:var(--accent)}

/* ----------------------------------------------------------------- hero */
/* Base: one column — eyebrow, title, lead, actions, then the illustration
   below. The two-column side-by-side layout is a min-width addition. */
.hero{padding:2.5rem var(--gutter) 2rem}
.eyebrow{
  font-size:.8rem;font-weight:700;letter-spacing:.08em;
  color:var(--accent);margin-block-end:1rem;
}
.hero__title{
  font-size:clamp(1.75rem,7vw,3.1rem);
  line-height:1.25;letter-spacing:-.02em;
  margin-block-end:1.1rem;
  text-wrap:balance;
}
.hero__lead{font-size:1.05rem;color:var(--muted);max-width:44ch;margin-block-end:1.75rem}
.hero__actions{display:flex;flex-direction:column;align-items:stretch;gap:.75rem}
.hero__meta{margin-block-start:1.25rem;font-size:.9rem}
.hero__meta a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
/* ---------------------------------------------------------------- facts */
/* Base: two columns — four across a phone reads cramped; two per row keeps
   each figure and its label comfortably legible. */
.facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem;
  padding:2rem var(--gutter) 2.5rem;
}
.fact{
  display:flex;flex-direction:column;gap:.15rem;
  padding-inline-start:.9rem;
  border-inline-start:2px solid var(--accent);
}
.fact b{
  font-size:clamp(1.5rem,6vw,2.3rem);font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.fact span{color:var(--muted);font-size:.85rem;line-height:1.5}
/* The fourth cell states a promise, not a quantity — so it is sized as text. */
.fact--claim b{font-size:clamp(1.1rem,4.5vw,1.5rem)}

/* ------------------------------------------------------------- services */
.services__grid{display:grid;gap:1.5rem}
.svc{
  padding-block-start:1.25rem;
  border-block-start:2px solid var(--ink);
}
.svc h3{font-size:1.1rem;margin-block-end:.5rem}
.svc p{color:var(--muted);font-size:.97rem}

.pledge{
  margin-block-start:2.5rem;
  padding:1.5rem;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.pledge__title{font-size:1.05rem;margin-block-end:1rem}
.pledge__list{
  list-style:none;padding:0;
  display:grid;gap:.75rem;
  counter-reset:pledge;
}
.pledge__list li{
  counter-increment:pledge;
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;
  align-items:baseline;
  font-size:.97rem;
}
.pledge__list li::before{
  content:counter(pledge,persian);
  font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.pledge__more{
  margin-block-start:1.25rem;padding-block-start:1rem;
  border-block-start:1px solid var(--line);
  font-size:.9rem;color:var(--muted);
}
.pledge__more a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}

/* ---------------------------------------------------- wall of proof ---- */
/* Base: a single column of letters. Everything is visible by scrolling the
   page itself — there is no horizontal rail to discover and no card the
   visitor can miss. Extra columns are a min-width addition. */
.proof__grid{
  list-style:none;padding:0;
  display:grid;gap:1.25rem;
}
.letter figure{
  margin:0;height:100%;
  display:flex;flex-direction:column;gap:1rem;
  padding:1.25rem;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.letter blockquote{
  margin:0;font-size:1rem;line-height:1.75;
  padding-inline-start:.9rem;
  border-inline-start:2px solid var(--accent);
}
.letter figcaption{display:flex;flex-direction:column;font-size:.88rem}
.letter figcaption b{font-weight:700}
.letter figcaption span{color:var(--muted)}
.letter__scan{
  margin-block-start:auto;
  inline-size:100%;
  height:240px;
  object-fit:cover;
  /* Anchor to the top of the scan so the letterhead and seal stay visible in
     the crop — that masthead is what makes the card read as a real document. */
  object-position:top center;
  border:1px solid var(--line-strong);border-radius:6px;
  background:var(--paper);
  cursor:zoom-in;
  /* The long scroll on hover, a short ride back on leave: each duration lives
     on the rule it animates *to*, so entering slides down ~3s and exiting
     rides back up in half a second. */
  transition:border-color .25s,object-position .5s var(--ease);
}
@media (min-width:640px){ .letter__scan{height:280px} }
.letter__scan:hover,.letter__scan:focus-visible{
  border-color:var(--accent);
  object-position:bottom center;
  transition:border-color .25s,object-position 3s var(--ease);
}
/* Landscape scans (e.g. the UNV letter) crop side-to-side in the frame, so
   they pan horizontally instead of vertically. */
.letter__scan--pan{object-position:center left}
.letter__scan--pan:hover,.letter__scan--pan:focus-visible{
  object-position:center right;
  transition:border-color .25s,object-position 3s var(--ease);
}
.letter--en blockquote{border-inline-start:0;border-inline-end:2px solid var(--accent);padding-inline:0 .9rem}

/* ---------------------------------------------------------------- story */
.story__text{display:flex;flex-direction:column;gap:1.25rem;max-width:62ch}
.story__text h2{font-size:clamp(1.45rem,5.5vw,2.15rem)}
.story__text p{color:var(--muted)}
.story__text b{color:var(--ink);font-weight:700}
.story__etym{
  display:flex;flex-direction:column;gap:.4rem;
  padding-inline-start:1rem;
  border-inline-start:2px solid var(--line-strong);
  font-size:.97rem;
}
.story__vision{
  padding:1rem 1.1rem;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.story__art{margin:2rem 0 0}
.story__art img{
  inline-size:100%;
  border:1px solid var(--line);border-radius:var(--radius);
}
.story__art figcaption{
  margin-block-start:.6rem;
  font-size:.82rem;color:var(--muted);
}

/* ----------------------------------------------------------------- tech */
.tech__list{
  list-style:none;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.tech__list li{
  padding:.35em .85em;
  border:1px solid var(--line-strong);border-radius:999px;
  font-size:.85rem;line-height:1.6;
  color:var(--muted);
  /* Latin tool names inside an RTL list: isolate each so punctuation and
     mixed-script names don't reorder against their neighbours. */
  unicode-bidi:isolate;
}
.tech__blog{
  margin-block-start:2rem;padding-block-start:1.5rem;
  border-block-start:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;
}
.tech__blog p{color:var(--muted);max-width:52ch}

/* ------------------------------------------------------------------ faq */
.faq{max-width:820px}
.faq h2{font-size:clamp(1.45rem,5.5vw,2.15rem);margin-block-end:1.5rem}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.15rem;font-weight:700;font-size:1rem;
  min-height:var(--tap);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-weight:400;font-size:1.4rem;color:var(--accent);
  flex:0 0 auto;transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
/* grid-template-rows 0fr -> 1fr animates an unknown content height without
   measuring it in JS. .faq__body must keep overflow:hidden for it to work. */
.faq__wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq details[open] .faq__wrap{grid-template-rows:1fr}
.faq__body{overflow:hidden}
.faq__body p{color:var(--muted);padding-block-end:1.25rem}
.faq__body p + p{margin-block-start:.9rem}

/* --------------------------------------------------------------- footer */
.foot{
  background:var(--ink);color:var(--paper);
  padding:3rem var(--gutter) 2rem;
}
.foot__cta{
  padding-block-end:2rem;
  border-block-end:1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
}
.foot__cta h2{font-size:clamp(1.5rem,6vw,2.4rem)}
.foot__cta p{color:color-mix(in srgb, var(--paper) 70%, transparent);max-width:46ch}
.foot__actions{display:flex;flex-direction:column;align-self:stretch;gap:.75rem;margin-block-start:.5rem}
.foot .btn{border-color:color-mix(in srgb, var(--paper) 35%, transparent)}
.foot .btn--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.foot .btn--solid:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.foot .btn:not(.btn--solid):hover{background:color-mix(in srgb, var(--paper) 12%, transparent);border-color:var(--paper)}
.foot__links{
  padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;font-size:.9rem;
}
.foot__links a{text-decoration:none;opacity:.75;min-height:var(--tap);display:flex;align-items:center}
.foot__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.foot__note{color:color-mix(in srgb, var(--paper) 50%, transparent);font-size:.82rem}

/* ------------------------------------------------------------- lightbox */
.lightbox{
  border:0;padding:0;background:transparent;
  max-width:min(94vw,900px);max-height:88vh;
}
.lightbox::backdrop{background:rgb(10 8 7 / .88)}
.lightbox img{max-height:88vh;object-fit:contain;border-radius:6px}
.lightbox__close{
  position:absolute;top:-2.75rem;inset-inline-end:0;
  width:var(--tap);height:var(--tap);
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;
}

/* -------------------------------------------------------------- reveals */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* =========================================================================
   Progressive enhancement from here down — phone-first, tablet/desktop add.
   ========================================================================= */

/* --------------------------------------------------------- sm (>=640px) */
@media (min-width:640px){
  .hero__actions{flex-direction:row;align-items:center;flex-wrap:wrap}
  .foot__actions{flex-direction:row;align-self:auto}
  .facts{grid-template-columns:repeat(4,1fr)}
  .services__grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}
  .proof__grid{grid-template-columns:repeat(2,1fr)}
  .pledge__list{grid-template-columns:repeat(2,1fr);gap:.85rem 1.5rem}
  .pledge{padding:1.75rem}
}

/* --------------------------------------------------------- md (>=860px) */
@media (min-width:860px){
  .nav{flex-wrap:nowrap;padding:1rem var(--gutter)}
  .nav__toggle{display:none}
  .nav__links{
    order:0;flex-basis:auto;flex-direction:row;gap:clamp(1rem,3vw,2rem);
    max-height:none;overflow:visible;font-size:.95rem;
  }
  .nav__links a{
    border-block-start:0;padding-block:.2em;min-height:auto;
    position:relative;
  }
  .nav__links a::after{
    content:"";position:absolute;inset-inline:0;block-size:1.5px;bottom:-.3em;
    background:var(--accent);
    transform:scaleX(0);transform-origin:right;
    transition:transform .35s var(--ease);
  }
  html:not([dir="rtl"]) .nav__links a::after{transform-origin:left}
  .nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}

  .hero{
    display:grid;grid-template-columns:1fr;
    padding:clamp(3.5rem,8vw,6rem) var(--gutter) clamp(2rem,5vw,3.5rem);
  }
  .services,.proof,.story,.tech,.faq{padding-block:clamp(3.5rem,7vw,5.5rem)}
  .services__grid{grid-template-columns:repeat(3,1fr)}

  .story{
    display:grid;grid-template-columns:1.15fr .85fr;
    gap:clamp(2rem,5vw,4rem);align-items:start;
  }
  .story__art{margin-block-start:0;position:sticky;top:6rem}

  .tech__blog{flex-direction:row;align-items:center;justify-content:space-between}
}

/* -------------------------------------------------------- lg (>=1024px) */
@media (min-width:1024px){
  .proof__grid{grid-template-columns:repeat(3,1fr)}
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .letter__scan,.letter__scan--pan{object-position:top center !important}
}