/* ============================================================
   FARAVAND — THEME v2 «رگه» (VEIN)
   Dark, cinematic, material-led.

   Thesis: the company's real product is saturated and dramatic —
   black marble with white veining, burgundy, honey onyx, verde,
   terracotta travertine. A navy-and-gold corporate skin HIDES that.
   So: near-black ground, brass only as a hairline/accent metal,
   and all real colour comes from the stone itself.
   ============================================================ */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+00AE;
  font-weight: 100 900; font-display: swap;
}

:root {
  /* ---- ground: warm near-black, never blue-black ---- */
  --void:   #08080A;
  --basalt: #101116;
  --slate:  #171922;
  --raise:  #1E212B;
  --edge:   rgba(201,164,76,0.16);   /* brass hairline */
  --edge-2: rgba(255,255,255,0.07);

  /* ---- type ---- */
  --chalk:  #EDEAE3;
  --mist:   #9A9AA4;
  --dim:    #6C6C77;

  /* ---- brass: a metal, used as a gradient, not a flat gold ---- */
  --brass:      #C9A44C;
  --brass-lo:   #7C5F26;
  --brass-hi:   #F2DCA2;
  --brass-grad: linear-gradient(100deg, var(--brass-lo) 0%, var(--brass) 34%,
                                var(--brass-hi) 56%, var(--brass) 76%, var(--brass-lo) 100%);

  /* ---- material accents, sampled from the real photographs ---- */
  --onyx:  #D9A24B;
  --terra: #B4552C;
  --verd:  #5E7268;

  --font: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --num:  ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --shell: 1360px;
  --pad: clamp(1.1rem, 4vw, 3.5rem);
}

/* grain — the single cheapest thing that makes a flat dark page
   look expensive: it kills gradient banding and adds surface. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--void); color: var(--chalk);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3 { margin: 0; color: #fff; font-weight: 800; line-height: 1.28; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

/* 🔴 Persian must never be letter-spaced — tracking severs the joins.
   Only .lat (Latin) carries tracking. */
.lat {
  direction: ltr; unicode-bidi: isolate;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--dim);
}
.term {
  direction: ltr; unicode-bidi: isolate;
  font-size: .88em; color: var(--mist); white-space: nowrap;
}
.num {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
}
.brass {
  background: var(--brass-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  background: linear-gradient(to bottom, rgba(8,8,10,.92), rgba(8,8,10,0));
  backdrop-filter: blur(6px);
}
.nav__in { display: flex; align-items: center; gap: 2rem; padding-block: 1.15rem; }
.nav__brand { display: flex; align-items: center; gap: .6rem; }
.nav__mark {
  width: 30px; height: 30px; border-radius: 5px; display: grid; place-items: center;
  background: var(--brass-grad); color: #1A1206; font-weight: 900; font-size: .95rem;
}
.nav__name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; }
.nav__links { display: flex; gap: 1.7rem; margin-inline-start: auto; font-size: .95rem; }
.nav__links a { color: var(--mist); padding-block: .3rem; border-bottom: 1px solid transparent; }
.nav__links a:hover, .nav__links a[aria-current] { color: #fff; border-bottom-color: var(--brass); }
.nav__cta {
  background: var(--brass-grad); color: #1A1206; font-weight: 700;
  padding: .62rem 1.25rem; border-radius: 3px; font-size: .93rem;
}

/* ============================================================
   HERO — a row of standing slabs, as in a stone yard.
   Narrow vertical strips also keep low-resolution source photos
   sharp: they are never scaled up across a wide area.
   ============================================================ */
.hero { position: relative; min-height: 94vh; display: flex; align-items: flex-end;
        overflow: hidden; background: var(--void); }

/* ONE material, not nine. A single dark marble with white veining reads as
   drama; nine saturated stones read as a quilt and destroy legibility.
   The colour stones get their own section further down, where they pop
   against the dark instead of fighting the headline. */
.hero__slabs { position: absolute; inset: 0; }
.hero__slab {
  position: absolute; inset: 0;
  background-size: cover; background-position: 30% 40%;
  /* The treatment is what turns a photo into a ground. Brightness alone just
     muddies it — the veining only survives if contrast comes up with it. */
  filter: brightness(.62) contrast(1.42) saturate(.5);
  transform: scale(1.12);
}

/* scrims: legibility is never left to chance. RTL ⇒ text sits on the RIGHT,
   so the heavy side of the horizontal scrim must be the right (inline-start). */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,  rgba(8,8,10,.96) 0%, rgba(8,8,10,.72) 30%, rgba(8,8,10,.30) 68%, rgba(8,8,10,.72) 100%),
    linear-gradient(to left, rgba(8,8,10,.92) 0%, rgba(8,8,10,.62) 42%, rgba(8,8,10,.12) 100%);
}
/* warm light shaft — as if light entering a quarry cut */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(65% 50% at 22% 6%, rgba(217,162,75,.16), transparent 64%),
    radial-gradient(45% 45% at 88% 90%, rgba(180,85,44,.10), transparent 72%);
}

/* the multi-stone idea survives as a restrained signature: a thin index of
   the actual materials, sitting on the hero's bottom edge. */
.slabstrip { display: flex; height: 5px; width: 100%; }
.slabstrip i { flex: 1; background-size: cover; background-position: center; }
/* Grain must be its OWN element: .hero already uses ::before and ::after for
   the scrims, and a second `.grain::before` rule would just overwrite one of
   them (same pseudo-element, not an additional layer). */
.grain-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: var(--grain); opacity: .22; mix-blend-mode: overlay;
}

.hero__body { position: relative; z-index: 3; width: 100%; padding-block: 8rem 0; }
.hero__eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.hero__eyebrow::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(to left, var(--brass), transparent); }
.hero h1 {
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
  line-height: 1.22; font-weight: 900; letter-spacing: -.015em;
  max-width: 19ch; text-wrap: balance;
}
.hero__lead { margin-top: 1.5rem; max-width: 54ch; color: #CFCCC4; font-size: 1.1rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

.btn { display: inline-flex; align-items: center; gap: .6rem; font: inherit;
       font-weight: 700; font-size: 1rem; padding: .85rem 1.7rem; border-radius: 3px;
       border: 1px solid transparent; cursor: pointer; transition: .18s; }
.btn--brass { background: var(--brass-grad); color: #1A1206; }
.btn--brass:hover { filter: brightness(1.09); }
.btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.btn--ghost:hover { border-color: var(--brass); background: rgba(201,164,76,.08); }

/* hero foot: the numbers strip */
.hero__stats {
  margin-top: 3.4rem; border-top: 1px solid var(--edge);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hero__stat { padding: 1.5rem 1.2rem 2.2rem; }
.hero__stat + .hero__stat { border-inline-start: 1px solid var(--edge-2); }
/* The bar no longer carries figures — it names the service lines. So the
   display face is Persian prose, not a mono numeral: no monospace, no
   tabular figures, and above all no `direction: ltr`, which would fling a
   Persian phrase to the far edge of its own cell. */
.hero__stat b { display: block; font-size: 1.06rem; font-weight: 700;
                line-height: 1.45; color: #fff; }
.hero__stat span { display: block; margin-top: .35rem; font-size: .78rem;
                   color: var(--mist); }

/* ============================================================
   SECTION FURNITURE
   ============================================================ */
.sect { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.sect--edge { border-top: 1px solid var(--edge-2); }
.sect__head { margin-bottom: 3.2rem; }
.sect__head .lat { display: block; margin-bottom: .9rem; }
.sect__head h2 { font-size: clamp(1.6rem, 3.4vw, 2.7rem); max-width: 22ch; text-wrap: balance; }
.sect__head p { margin-top: 1.1rem; color: var(--mist); max-width: 60ch; }

/* ---- process: big numerals on hairlines ---- */
.steps { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { padding: 2rem 1.6rem; border-top: 1px solid var(--edge); position: relative; }
.step:hover { background: linear-gradient(to bottom, rgba(201,164,76,.05), transparent); }
.step__n { font-family: var(--num); font-size: 2.6rem; font-weight: 700; line-height: 1;
           color: transparent; -webkit-text-stroke: 1px rgba(201,164,76,.5);
           direction: ltr; unicode-bidi: isolate; }
.step h3 { margin-top: 1.1rem; font-size: 1.15rem; }
.step .term { display: block; margin-top: .3rem; }
.step p { margin-top: .8rem; font-size: .94rem; color: var(--mist); }

/* ---- material index: the colour of the page comes from here ---- */
.mats { display: grid; gap: 1.1rem;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.mat { position: relative; border: 1px solid var(--edge-2); border-radius: 4px;
       overflow: hidden; background: var(--slate); isolation: isolate; }
.mat__img { aspect-ratio: 4/5; width: 100%; object-fit: cover;
            transition: transform .5s ease; }
.mat:hover .mat__img { transform: scale(1.045); }
.mat__scrim { position: absolute; inset-block-start: 0; inset-inline: 0; height: 62%;
              background: linear-gradient(to bottom, rgba(8,8,10,.72), transparent);
              pointer-events: none; }
.mat__cap { position: absolute; inset-block-start: 0; inset-inline: 0; padding: 1.1rem 1.2rem; }
.mat__cap h3 { font-size: 1.15rem; }
.mat__cap .term { color: #C8C5BD; }
.mat__specs { padding: 1rem 1.2rem 1.2rem; display: grid;
              grid-template-columns: auto 1fr; gap: .35rem .8rem; font-size: .85rem; }
.mat__specs dt { color: var(--dim); }
.mat__specs dd { margin: 0; text-align: end; color: #DAD7CF; }
/* the honesty rule, carried over from v1 — kept because it is the
   one thing the legal copy actually demands of the design */
.pending { color: var(--dim); font-style: italic; }
.pending::before { content: "— "; }

/* ============================================================
   COPY SLOTS — text that must come from the client, not from me.
   Deliberately loud: an unfilled slot must be impossible to ship
   by accident. Remove this rule once every slot is filled.
   ============================================================ */
.slot {
  outline: 1px dashed #E0574B; outline-offset: 3px;
  background: rgba(224,87,75,.10); color: #FF9C92 !important;
  font-style: normal; font-weight: 500;
}
.band-light .slot { color: #B3392E !important; background: rgba(224,87,75,.09); }

/* ============================================================
   PHOTO BAND — one cinematic beat between two dense sections.
   ============================================================ */
.photoband { position: relative; display: flex; align-items: flex-end;
             min-height: clamp(340px, 44vw, 560px); overflow: hidden; }
/* The warm quarry light IS the asset — darkening it to "make text readable"
   throws away the only thing the photo was chosen for. Keep the image bright
   and buy legibility from a scrim placed only where the text actually sits. */
.photoband__img { position: absolute; inset: 0; width: 100%; height: 100%;
                  /* frame the CUT BENCHES at the top of the frame, not the
                     rubble field at the bottom — the benches are the product,
                     the rubble is waste and reads as mess. */
                  object-fit: cover; object-position: 50% 42%;
                  filter: brightness(.88) contrast(1.04) saturate(.95); }
.photoband::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top,  rgba(8,8,10,.92) 0%, rgba(8,8,10,.55) 26%, transparent 58%),
    linear-gradient(to left, rgba(8,8,10,.72) 0%, rgba(8,8,10,.10) 48%, transparent 72%);
}
.photoband__body { position: relative; z-index: 2; width: 100%; padding-block: 3rem 3.2rem; }
.photoband h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); max-width: 24ch; text-wrap: balance; }
.photoband p { margin-top: .9rem; color: #CFCCC4; max-width: 52ch; font-size: 1rem; }
/* credit sits on the side AWAY from the copy (RTL ⇒ the left) */
.photoband__credit { position: absolute; z-index: 2; inset-block-end: .5rem;
                     inset-inline-end: var(--pad); font-size: .68rem; color: rgba(255,255,255,.34); }

/* ============================================================
   LIGHT BAND — a milk/grey section to break the dark run.
   Everything inside must re-declare its colours: the base theme is
   dark, so inherited chalk-on-void text would vanish here.
   ============================================================ */
.band-light { background: #F1EEE7; color: #46413A; }
.band-light h2, .band-light h3, .band-light b { color: #17150F; }
.band-light .lat { color: #8C8778; }
.band-light .sect__head p { color: #5C574C; }
.band-light .term { color: #7A7466; }

/* the map + data pairing */
.netgrid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .netgrid { grid-template-columns: 1.9fr 1fr; } }
.netgrid > * { min-width: 0; }

.map { margin: 0; position: relative; }
.map__svg { width: 100%; height: auto; display: block; overflow: visible; }
.map__land { fill: #CAC0A9; }
.map__ring { fill: none; stroke: #9C7A2B; stroke-opacity: .38; stroke-width: 1.5; }
.map__ring--dash { stroke-dasharray: 5 7; stroke-opacity: .5; }
.map__glow { fill: #A8842F; fill-opacity: .085; }
.map__arc { fill: none; stroke: #8F6A22; stroke-width: 2.1; stroke-opacity: .9;
            stroke-linecap: round; }
.map__pin { fill: #9C4522; }
.map__pin--origin { fill: #17150F; }
.map__pulse { fill: none; stroke: #9C4522; stroke-opacity: .45; stroke-width: 1.4; }

/* data column */
.netdata { border-top: 1px solid #D8D2C5; }
.netrow { display: flex; justify-content: space-between; gap: 1rem;
          padding: .85rem 0; border-bottom: 1px solid #D8D2C5; font-size: .95rem; }
.netrow dt { color: #7A7466; margin: 0; }
.netrow dd { margin: 0; color: #17150F; font-weight: 600; text-align: end; }
.netrow dd.pending { color: #8C8778; font-weight: 400; }
.netnote { margin-top: 1.4rem; font-size: .88rem; color: #7A7466; }

/* ---- roles ---- */
.roles { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.role { border: 1px solid var(--edge-2); border-radius: 4px; padding: 1.7rem 1.5rem;
        background: linear-gradient(160deg, var(--slate), var(--basalt));
        display: flex; flex-direction: column; gap: .9rem; }
.role:hover { border-color: var(--edge); }
.role h3 { font-size: 1.2rem; }
.role p { font-size: .95rem; color: var(--mist); flex: 1; }
.role a { color: var(--brass); font-weight: 700; font-size: .95rem; }

/* ---- closing ---- */
.close { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .close { grid-template-columns: 1.5fr 1fr; } }
.note { border-inline-start: 2px solid var(--brass); padding: 1.1rem 1.3rem;
        background: rgba(201,164,76,.05); border-radius: 2px; }
.note b { display: block; margin-bottom: .5rem; color: #fff; }
.note p { font-size: .93rem; color: var(--mist); }

.foot { border-top: 1px solid var(--edge-2); padding-block: 2.5rem 3.5rem;
        color: var(--dim); font-size: .9rem; }

/* ---- min-width:0 so grid children can shrink; without it the page
        widens on a phone and clips every heading (measured, v1). ---- */
.mats > *, .roles > *, .steps > *, .close > * { min-width: 0; }

/* ============================================================
   MOTION — restrained. Stone is heavy.
   ============================================================ */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .mat__img { transition: none; }
}

/* ---- mobile menu: a real one. Hiding the nav with display:none and
        shipping no replacement leaves a phone user with no way to navigate. ---- */
.menu { margin-inline-start: auto; display: none; }
.menu__btn { background: none; border: 1px solid rgba(255,255,255,.25); color: #fff;
             font: inherit; font-size: .9rem; padding: .5rem .9rem; border-radius: 3px;
             cursor: pointer; }
.menu__panel { position: absolute; inset-inline: var(--pad); inset-block-start: 100%;
               background: var(--basalt); border: 1px solid var(--edge);
               border-radius: 4px; padding: .6rem; display: none; }
.menu[open] .menu__panel { display: block; }
.menu__panel a { display: block; padding: .75rem .8rem; color: var(--chalk);
                 border-radius: 3px; }
.menu__panel a:hover { background: rgba(201,164,76,.10); color: #fff; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .menu { display: block; }
  .nav__cta { display: none; }
  .nav__in { position: relative; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__stat:nth-child(3) { border-inline-start: 0; }
  .hero__stat { border-top: 1px solid var(--edge-2); }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* ============================================================
   STUB PAGES
   ============================================================ */
.stub__flag { margin-top: 1.2rem; color: var(--brass); border-inline-start: 2px solid var(--brass);
              padding: .6rem 1rem; background: rgba(201,164,76,.06); max-width: 60ch; }
.stub__kids { margin-top: 2rem; padding-inline-start: 1.1rem; line-height: 2.1; }
.stub__kids a { color: var(--mist); border-bottom: 1px solid transparent; }
.stub__kids a:hover { color: #fff; border-bottom-color: var(--brass); }

/* ============================================================
   FORM — every control owes the user a reaction.
   ============================================================ */
.formgrid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .formgrid { grid-template-columns: 1.55fr 1fr; } }
.formgrid > * { min-width: 0; }

.f { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.35rem; }
.f > label { font-size: .93rem; font-weight: 600; color: var(--chalk); }
.f input, .f select, .f textarea {
  font: inherit; font-size: 1rem; padding: .72rem .85rem; width: 100%;
  color: #fff; background: var(--slate);
  border: 1px solid var(--edge-2); border-radius: 3px;
}
.f input::placeholder, .f textarea::placeholder { color: var(--dim); }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass);
}
.f__help { font-size: .82rem; color: var(--dim); }
/* per-field reaction */
.f[data-state="ok"] input, .f[data-state="ok"] select { border-color: rgba(122,168,141,.55); }
.f[data-state="bad"] input, .f[data-state="bad"] select { border-color: #E0574B; }
.f__err { font-size: .82rem; color: #FF9C92; display: none; }
.f[data-state="bad"] .f__err { display: block; }

/* completeness meter */
.meter { border: 1px solid var(--edge); border-radius: 4px; background: var(--basalt);
         padding: 1.3rem; position: sticky; top: 92px; }
.meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.meter__score { font-family: var(--num); font-size: 1.5rem; font-weight: 700; color: #fff;
                direction: ltr; unicode-bidi: isolate; }
.meter__bar { height: 6px; background: var(--slate); border-radius: 99px;
              overflow: hidden; margin-top: .8rem; }
.meter__fill { height: 100%; width: 0; background: var(--brass);
               transition: width .25s ease, background .25s ease; }
.meter[data-level="ready"] .meter__fill { background: #7AA88D; }
.meter__hint { font-size: .88rem; color: var(--mist); margin-top: .8rem; }
.meter__list { list-style: none; margin: 1.1rem 0 0; padding: 0;
               display: flex; flex-direction: column; gap: 7px; font-size: .88rem; }
.meter__list li { display: flex; gap: .6rem; align-items: center; color: var(--dim); }
.meter__list li[data-done="1"] { color: var(--chalk); }
.meter__tick { width: 15px; height: 15px; border: 1px solid var(--edge-2); border-radius: 2px;
               flex: none; display: grid; place-items: center; font-size: 10px; color: transparent; }
.meter__list li[data-done="1"] .meter__tick { background: #7AA88D; border-color: #7AA88D; color: #0B140F; }

/* the reaction AFTER submit */
.reaction { display: none; border: 1px solid var(--edge); border-radius: 4px;
            padding: 1.5rem; margin-top: 1.4rem; }
.reaction[data-show="ok"]  { display: block; border-color: rgba(122,168,141,.5);
                             background: rgba(122,168,141,.08); }
.reaction[data-show="bad"] { display: block; border-color: rgba(224,87,75,.55);
                             background: rgba(224,87,75,.08); }
.reaction h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.reaction p  { font-size: .95rem; color: var(--chalk); }
.reaction dl { margin: 1rem 0 0; display: grid; grid-template-columns: auto 1fr;
               gap: .35rem .9rem; font-size: .9rem; }
.reaction dt { color: var(--mist); }
.reaction dd { margin: 0; color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================================================
   CONTENT PAGES
   ============================================================ */
.pagehead { padding-block: 9rem 2.5rem; border-bottom: 1px solid var(--edge-2);
            background: linear-gradient(180deg, var(--basalt), var(--void)); }
.pagehead h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); margin-top: .9rem;
               max-width: 24ch; text-wrap: balance; }
.pagehead .lat { display: block; margin-top: 1.1rem; }

.crumbs { font-size: .85rem; color: var(--dim); display: flex; flex-wrap: wrap; gap: .45rem; }
.crumbs a { color: var(--mist); }
.crumbs a:hover { color: var(--brass); }
.crumbs span { color: var(--dim); }

/* long-form reading column */
.prose { max-width: 78ch; }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.95rem); margin-top: 3rem; }
.prose h3 { font-size: 1.16rem; margin-top: 2.1rem; color: var(--chalk); }
.prose p  { margin-top: 1rem; color: var(--chalk); }
.prose .term { display: inline; }
.dlist { margin-top: 1rem; padding-inline-start: 1.3rem; line-height: 2.05; color: var(--chalk); }
.dlist li { margin-bottom: .25rem; }
.pull { margin: 2rem 0 0; padding: 1.1rem 1.3rem; border-inline-start: 2px solid var(--brass);
        background: rgba(201,164,76,.06); color: var(--chalk); font-size: 1.05rem; }
.ctarow { margin-top: 1.8rem; }

.dtable { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: 1.4rem;
          min-width: 34rem; }
.dtable th, .dtable td { padding: .7rem .85rem; text-align: start; vertical-align: top;
                         border-bottom: 1px solid var(--edge-2); }
.dtable thead th { color: var(--brass); font-size: .8rem; font-weight: 700;
                   border-bottom-color: var(--edge); }
.dtable tbody tr:nth-child(even) { background: rgba(255,255,255,.022); }
.tablewrap { overflow-x: auto; min-width: 0; }

.childgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem;
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.childgrid > * { min-width: 0; }
.childgrid a { display: block; padding: 1.05rem 1.2rem; border: 1px solid var(--edge-2);
               border-radius: 4px; background: var(--slate); color: var(--chalk); }
.childgrid a:hover { border-color: var(--brass); color: #fff; }

.close-cta { text-align: start; }
.close-cta h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); }
.close-cta p { margin-top: .8rem; color: var(--mist); }
.close-cta .btn { margin-top: 1.5rem; }

/* ============================================================
   PAGE PATTERNS — content deserves components, not one long column
   ============================================================ */
/* numbered process rail (فرایند همکاری) */
.prose--rail { max-width: none; }
.rail { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        margin-top: 2rem; }
.rail > * { min-width: 0; }
.rail__item { border-top: 1px solid var(--edge); padding: 1.8rem 1.4rem 2rem; position: relative; }
.rail__item:hover { background: linear-gradient(to bottom, rgba(201,164,76,.05), transparent); }
.rail__n { font-family: var(--num); font-size: 2.5rem; font-weight: 700; line-height: 1;
           color: transparent; -webkit-text-stroke: 1px rgba(201,164,76,.55);
           direction: ltr; unicode-bidi: isolate; }
.rail__item h3 { margin-top: 1rem; font-size: 1.1rem; }
.rail__item .term { display: block; margin-top: .25rem; }
.rail__item p { margin-top: .8rem; font-size: .94rem; color: var(--mist); }

/* category cards (رصد بازار / دسته‌های سنگ) */
.cardgrid { display: grid; gap: 1rem; margin-top: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); }
.cardgrid > * { min-width: 0; }
.ccard { border: 1px solid var(--edge-2); border-radius: 4px; overflow: hidden;
         background: var(--slate); display: flex; flex-direction: column; }
.ccard:hover { border-color: var(--brass); }
.ccard__img { aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.ccard__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.ccard h3 { font-size: 1.08rem; }
.ccard p { font-size: .93rem; color: var(--mist); }
.ccard__go { margin-top: auto; color: var(--brass); font-weight: 700; font-size: .92rem; }