/* ==========================================================================
   /about — «هیتکو در یک نگاه», the overview page

   Everything is scoped under `.abt`, per the house rule that page CSS never
   leaks globally. Logical properties throughout — one set of rules serves fa
   (RTL) and en.

   The page is a sequence of sections on one quiet ground, each opened by the
   same heading-plus-rule, so the eye learns the rhythm once. The chairman's
   message is the single dark panel and the only thing that breaks it.
   ========================================================================== */

.abt {
  background: var(--c-surface);
}

/* ======================================= UN Global Compact / CSR ========
   A contemporary reading of the legacy blue box: the same client copy and
   original white UN lockup, but with a clear identity column, comfortable
   reading measure and a concrete 2011 membership marker. */
.abt-compact {
  padding-block: var(--s-4) var(--s-12);
}
.abt-compact__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  min-block-size: 430px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--c-band-deep) 0%, var(--c-band) 62%, var(--c-primary-deep) 100%);
  color: #fff;
  box-shadow: 0 32px 70px -38px rgba(13, 24, 54, 0.75);
}
.abt-compact__panel::before,
.abt-compact__panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}
.abt-compact__panel::before {
  inline-size: 430px;
  block-size: 430px;
  inset-block-start: -230px;
  inset-inline-start: -145px;
}
.abt-compact__panel::after {
  inline-size: 280px;
  block-size: 280px;
  inset-block-end: -190px;
  inset-inline-end: -70px;
}
.abt-compact__identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s-8);
  padding: clamp(32px, 4vw, 56px);
  background: rgba(255, 255, 255, 0.045);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
}
.abt-compact__logo {
  inline-size: min(100%, 300px);
  max-block-size: 300px;
  block-size: auto;
  object-fit: contain;
}
.abt-compact__year {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: var(--s-4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--t-sm);
  white-space: nowrap;
}
.abt-compact__body {
  padding: clamp(32px, 4.5vw, 64px);
}
.abt-compact__eyebrow {
  margin: 0 0 var(--s-2);
  color: var(--c-on-dark-accent);
  font-size: var(--t-sm);
  font-weight: 700;
}
.abt-compact__title {
  /* max-inline-size: 24ch; */
  margin: 0 0 var(--s-5);
  color: #fff;
  font-size: clamp(1.45rem, 2.2vw, 2.15rem);
  line-height: var(--lh-tight);
}
.abt-compact__text {
  /* max-inline-size: 78ch; */
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--t-sm);
  line-height: 2;
  text-align: justify;
  text-justify: inter-word;
}
.abt-compact__commitment {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--s-4);
  margin-block: var(--s-6);
  padding: var(--s-5);
  border: 1px solid rgba(111, 210, 138, 0.24);
  border-radius: 14px;
  background: rgba(52, 155, 71, 0.09);
}
.abt-compact__mark {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  background: rgba(111, 210, 138, 0.14);
  color: var(--c-on-dark-accent);
}
.abt-compact__mark svg {
  inline-size: 21px;
  block-size: 21px;
}
.abt-compact__commitment p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--t-sm);
  line-height: 1.9;
  text-align: start;
}
.abt-compact__commitment .abt-compact__since {
  margin-block-start: var(--s-2);
  color: #fff;
  font-weight: 700;
}
@media (max-width: 760px) {
  .abt-compact__panel {
    grid-template-columns: 1fr;
    min-block-size: 0;
    border-radius: 18px;
  }
  .abt-compact__identity {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--s-6);
    border-inline-end: 0;
    border-block-end: 1px solid rgba(255, 255, 255, 0.12);
  }
  .abt-compact__body {
    padding: var(--s-6);
  }
  .abt-compact__logo {
    inline-size: min(58vw, 230px);
    max-block-size: 230px;
  }
  .abt-compact__text {
    text-align: start;
  }
}

@media (max-width: 430px) {
  .abt-compact__identity {
    align-items: center;
    flex-direction: column;
    gap: var(--s-5);
  }
  .abt-compact__commitment {
    grid-template-columns: 1fr;
  }
}

/* ---- the section opener, used by every band below the pillars ----------- */

.abt-h2 {
  margin: 0 0 var(--s-6);
  font-size: var(--t-lg);
  color: var(--c-ink);
}
.abt-h2__rule {
  display: block;
  inline-size: 42px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-primary);
  margin-block-start: var(--s-3);
}

/* ============================================================== masthead */

.abt-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--s-12) var(--s-16);
  background: linear-gradient(
    205deg,
    #e8edf6 0%,
    #f4f7fb 45%,
    var(--c-surface) 100%
  );
}

/* HITCO's own head office, faded into the wash at the outer corner — the
   reference opens on architecture. ⚠️ It is `::before` on the band and not an
   <img>: it carries no information (the alt text would be empty either way),
   it must never be the LCP element, and the double mask below is what keeps it
   from competing with the title. */
.abt-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(54%, 720px);
  background: url("../../uploads/poster/companyBuilding.webp") no-repeat center /
    cover;
  opacity: 0.16;
  pointer-events: none;

  /* ⚠️ The fade runs from the OUTER edge inwards — solid where the photo meets
     the edge of the viewport, gone before it reaches the text. Get the
     direction backwards and the photo ends in a hard vertical cut down the
     middle of the band, which is exactly what the first attempt did.
     `inset-inline-end` puts it on the LEFT in fa, so fa fades to the right.
     The second gradient softens the bottom edge, where the band meets the
     chairman's panel; `intersect` is what makes the two apply together. */
  -webkit-mask-image: linear-gradient(to right, #000 8%, transparent 86%),
    linear-gradient(to top, transparent 2%, #000 42%);
  mask-image: linear-gradient(to right, #000 8%, transparent 86%),
    linear-gradient(to top, transparent 2%, #000 42%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* In LTR the photo sits on the other side, so the horizontal fade flips. */
[dir="ltr"] .abt-head::before {
  -webkit-mask-image: linear-gradient(to left, #000 8%, transparent 86%),
    linear-gradient(to top, transparent 2%, #000 42%);
  mask-image: linear-gradient(to left, #000 8%, transparent 86%),
    linear-gradient(to top, transparent 2%, #000 42%);
}

.abt-head__crumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-block-end: var(--s-6);
}
.abt-head__crumb a {
  color: var(--c-muted);
}
.abt-head__crumb a:hover {
  color: var(--c-primary);
}
/* `chevron` is drawn pointing down; a quarter turn aims it along the text. */
.abt-head__sep {
  inline-size: 14px;
  block-size: 14px;
  color: var(--c-line-strong);
  transform: rotate(90deg);
}
[dir="rtl"] .abt-head__sep {
  transform: rotate(-90deg);
}

.abt-head__eyebrow {
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--c-primary);
  margin: 0 0 var(--s-2);
}
.abt-head__title {
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  color: var(--c-primary);
  margin: 0 0 var(--s-5);
}
.abt-head__lede {
  max-inline-size: 85ch;
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--c-body);
  margin: 0;
}

/* ==================================================== chairman's message ==
   The one passage on the site written in the first person. It gets the dark
   panel the legacy design gave it, so it does not read as one more block of
   body copy. */

.abt-chair {
  padding-block: var(--s-10) var(--s-12);
}

.abt-chair__panel {
  position: relative;
  overflow: hidden;
  /* Tighter at the block-end than at the block-start: the signature row already
     carries its own visual weight, and equal padding left a dead band under it. */
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px)
    clamp(26px, 3.2vw, 42px);
  border-radius: 22px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c-band), #fff 7%) 0%, var(--c-band) 45%, var(--c-band-deep) 100%);
  color: #fff;
  box-shadow: 0 30px 60px -30px rgba(13, 24, 54, 0.65);
}

/* The pull-quote mark. ⚠️ A DRAWN icon, not a “ character — the text glyph is
   rendered by whichever font is loaded, so it came out as a different shape in
   fa (IRANSans) than in en (Lato) and matched the reference in neither. Being
   an SVG it also sizes in px, so `overflow: hidden` can no longer clip it the
   way a font's own leading did. `fill` + `stroke:none` because `icon()` emits
   a stroked outline by default and this glyph is solid.
   ⚠️ The sizes below are the SVG BOX, not the glyph. The mark only occupies
   ~70% of the 24-grid across and ~54% down, so a 104px box drew a mark barely
   56px tall — which is why it read as too small against the reference. */
.abt-chair__quotemark {
  position: absolute;
  inset-block-start: clamp(26px, 3.2vw, 48px);
  inset-inline-end: clamp(20px, 2.4vw, 40px);
  inline-size: clamp(112px, 13vw, 180px);
  block-size: clamp(112px, 13vw, 180px);
  fill: rgba(255, 255, 255, 0.1);
  stroke: none;
  pointer-events: none;
}

.abt-chair__body {
  position: relative; /* above the quote mark */
}

.abt-chair__title {
  margin: 0;
  font-size: var(--t-lg);
  color: #fff;
}
/* ⚠️ A literal blue, not `var(--c-primary)` — `.abt` scopes that token to navy
   (line 18), which is the panel's own background and would vanish on it. */
.abt-chair__rule {
  display: block;
  inline-size: 56px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-primary);
  margin-block: var(--s-3) var(--s-6);
}

/* ⚠️ No `max-inline-size`. A ch cap stopped the passage well short of the panel
   edge, and since the signature is pushed to the opposite edge the leftover
   column read as a hole in the middle of the panel. The passage now runs the
   full width and is held clear of the mark by padding on that side alone. */
.abt-chair__quote {
  margin: 0;
  padding-inline-end: clamp(56px, 10vw, 195px);
}
.abt-chair__quote p {
  margin: 0;
  font-size: var(--t-md);
  line-height: 2;
  color: rgba(255, 255, 255, 0.88);
  /* Both edges flush, as in the reference. `text-align-last` is left at its
     initial `auto`, so the closing line still sets ragged rather than being
     stretched across the measure. */
  text-align: justify;
  text-justify: inter-word;
}

/* ⚠️ The signature sits at the INLINE-END, away from the text it signs, which
   is where the reference puts it and where a signature belongs — under the
   letter, not beside its first line. */
/* `row-reverse`, so the portrait lands on the OUTER side of the pair and the
   name reads back toward the passage it signs — the order the reference uses.
   Being logical it mirrors on its own: outer is the left in fa, the right in en. */
.abt-chair__sign {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--s-4);
  margin-block-start: var(--s-8);
  margin-inline-start: auto; /* the far edge, as in the reference */
  inline-size: fit-content;
}
/* A real photograph on a real background: no `mix-blend-mode` plate like the
   board page's cut-outs get. The ring is what lifts it off the dark panel. */
.abt-chair__face {
  inline-size: 76px;
  block-size: 76px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%; /* an office shot; the subject sits high */
  flex: none;
  border: 3px solid rgba(255, 255, 255, 0.22);
}
.abt-chair__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}
.abt-chair__name {
  font-size: var(--t-md);
  font-weight: 700;
  color: #fff;
}
.abt-chair__role {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* ================================= mission · vision · philosophy ========== */

.abt-pillars {
  padding-block: 0 var(--s-12);
}
.abt-pillars__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.abt-pillar {
  display: flex;
  flex-direction: column;
  padding: var(--s-8) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-1, 0.15s), box-shadow var(--dur-1, 0.15s),
    transform var(--dur-1, 0.15s);
}
.abt-pillar:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* Icon and title on one line, as in the reference — the icon reads as part of
   the heading rather than as a badge sitting above it. */
.abt-pillar__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.abt-pillar__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.abt-pillar__icon svg {
  inline-size: 24px;
  block-size: 24px;
}
.abt-pillar__title {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-ink);
}
.abt-pillar__rule {
  display: block;
  inline-size: 34px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-primary);
  margin-block: var(--s-5) var(--s-4);
}
.abt-pillar__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-body);
}

/* ================================================== HITCO in numbers ====== */

.abt-num {
  padding-block: 0 var(--s-12);
}
/* ⚠️ Separate cards with a gap, NOT a hairline-joined table. The five figures
   are unrelated to each other — a shared grid implied a total. */
.abt-num__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
}
.abt-num__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.abt-num__icon {
  color: var(--c-primary);
}
.abt-num__icon svg {
  inline-size: 26px;
  block-size: 26px;
  stroke-width: 1.5;
}
.abt-num__value {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1;
}
.abt-num__label {
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ========================================================= the sectors ==== */

.abt-sectors {
  padding-block: 0 var(--s-12);
}
.abt-sectors__text {
  margin: calc(var(--s-6) * -1) 0 var(--s-6); /* tucks under the .abt-h2 gap */
  max-inline-size: 68ch;
  font-size: var(--t-sm);
  color: var(--c-muted);
  line-height: var(--lh-body);
}
.abt-sectors__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.abt-sector__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 11px var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-1, 0.15s), color var(--dur-1, 0.15s),
    transform var(--dur-1, 0.15s);
}
.abt-sector__link:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  transform: translateY(-2px);
  text-decoration: none;
}
.abt-sector__icon {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  color: var(--c-primary);
}

/* ================================================ the subsidiary wall ===== */

.abt-subs {
  padding-block: 0 var(--s-12);
}
.abt-subs__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-end: var(--s-6);
}
.abt-subs__head .abt-h2 {
  margin-block-end: 0;
  margin-inline-end: auto;
}
.abt-subs__n {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-muted);
  padding: 2px var(--s-3);
  border-radius: 20px;
  background: var(--c-wash);
  margin-inline-start: var(--s-3);
}

.abt-subs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-4);
}
.abt-sub__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  block-size: 100%;
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-1, 0.15s), box-shadow var(--dur-1, 0.15s),
    transform var(--dur-1, 0.15s);
}
.abt-sub__link:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
}

/* The plate keeps every logo on the same baseline whatever its own aspect. */
.abt-sub__plate {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 56px;
}
/* ⚠️ Two things learned on the companies page and repeated here:
   1. The stored logos are ~300×300 WITH built-in padding, so both axes need a
      size — capping the height alone renders the mark tiny inside its own
      whitespace.
   2. **No `mix-blend-mode: multiply`.** These sit on a white card and several
      are light artwork on transparency; multiply erased those completely.
      `/companies` does not blend them either. */
.abt-sub__logo {
  inline-size: 130px;
  block-size: 56px;
  object-fit: contain;
}
/* ⚠️ Printed for EVERY company, not only as a fallback — three of the fifteen
   stored logos are a small mark on a 1000px+ transparent canvas and shrink to
   a speck, which left those tiles looking empty. See the note in about.php. */
.abt-sub__name {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--c-body);
  text-align: center;
  line-height: var(--lh-snug);
}

/* ========================================================= keep reading === */

.abt-more {
  padding-block: 0 var(--sec-y);
}
.abt-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-5);
}
.abt-more__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--s-4);
  row-gap: 2px;
  align-items: center;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  color: inherit;
  transition: border-color var(--dur-1, 0.15s), box-shadow var(--dur-1, 0.15s),
    transform var(--dur-1, 0.15s);
}
.abt-more__card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
}
.abt-more__icon {
  grid-row: 1 / span 2;
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.abt-more__icon svg {
  inline-size: 21px;
  block-size: 21px;
}
.abt-more__name {
  font-weight: 700;
  color: var(--c-ink);
  align-self: end;
}
.abt-more__text {
  font-size: var(--t-sm);
  color: var(--c-muted);
  align-self: start;
  line-height: var(--lh-snug);
}
/* The arrow lands at the card's inline-END — the far side from the icon —
   because it points out of the card, not into it. */
.abt-more__go {
  grid-row: 1 / span 2;
  color: var(--c-line-strong);
  transition: color var(--dur-1, 0.15s);
}
.abt-more__card:hover .abt-more__go {
  color: var(--c-primary);
}
.abt-more__go .arw {
  inline-size: 20px;
  block-size: 20px;
}

/* ============================================================ responsive */

@media (max-width: 900px) {
  .abt-pillars__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .abt-head__title {
    font-size: var(--t-xl);
  }
  .abt-head__lede {
    font-size: var(--t-sm);
  }
  /* The photo is decoration and at this width it sits directly behind the
     title rather than beside it. */
  .abt-head::before {
    display: none;
  }
  /* The mark is decoration and at this width it sits behind the first line of
     a paragraph the reader is actually trying to read. */
  .abt-chair__quotemark {
    display: none;
  }
  /* The padding existed only to hold the passage clear of that mark. */
  .abt-chair__quote {
    padding-inline-end: 0;
  }
  .abt-chair__sign {
    margin-inline-start: 0;
  }
  .abt-subs__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .abt-sub__logo {
    inline-size: 100px;
    block-size: 46px;
  }
  .abt-sub__plate {
    block-size: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abt-pillar,
  .abt-sector__link,
  .abt-sub__link,
  .abt-more__card {
    transition: none;
  }
  .abt-pillar:hover,
  .abt-sector__link:hover,
  .abt-sub__link:hover,
  .abt-more__card:hover {
    transform: none;
  }
}

/* ---- justified body copy · centred blocks keep their centring ------------
   The `:where(p, blockquote, dd)` rule in hitco.css declares alignment ON the
   paragraph, and a direct declaration outranks the `text-align: center` these
   containers pass DOWN to it by inheritance. Re-inheriting restores them.
   Add a centred container that holds a paragraph and it belongs in this list. */
.abt-num__cell :where(p, blockquote, dd) {
  text-align: inherit;
}