/* ==========================================================================
   HITCO Holding — design system
   Hand-authored, no build step. Tokens first, components after.
   Direction-agnostic: uses CSS logical properties throughout so the same
   rules serve fa (RTL) and en (LTR) without a direction:rtl override.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: "IRANSans";
  src: url("../fonts/IRANSansWeb(FaNum)_Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSans";
  src: url("../fonts/IRANSansWeb(FaNum).woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSans";
  src: url("../fonts/IRANSansWeb(FaNum)_Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IRANSans";
  src: url("../fonts/IRANSansWeb(FaNum)_Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  /* brand — recovered from the logo: blue globe + green leaf */
  --c-primary: #0f7fb8;
  --c-primary-deep: #0b5f8c;
  --c-primary-soft: #e7f1f7;
  --c-green: #349b47;
  --c-green-soft: #e6f2e8;

  /* ink & neutrals — cool-biased so they sit with the blue, not against it */
  --c-ink: #0e1f27;
  --c-body: #33505c;
  --c-muted: #6b8592;
  --c-line: #d9e3e8;
  --c-line-strong: #c3d3da;
  --c-wash: #eef3f5;
  --c-paper: #f6f8f9;
  --c-surface: #ffffff;

  /* ⚠️ THE DARK SECTION BAND — hero, the CTA band, the topbar, the footer.
     Same value as --c-ink and deliberately a SEPARATE token: --c-ink was doing
     two unrelated jobs, so «رنگ عنوان‌ها» in the panel silently repainted every
     dark band on the site including the footer, and the band could not be
     changed without wrecking every heading. Components that merely happen to be
     dark (the skip link, a timeline dot, the assistant pill, .btn--onbrand) stay
     on --c-ink: they are not section backgrounds and must not follow one. */
  --c-band: #16295c;
  --c-band-deep: #0f1c40;
  --c-band-deep: color-mix(in srgb, var(--c-band), #000 28%);
  --c-on-dark-accent: #6fd28a;
  --c-on-dark-accent: color-mix(in srgb, var(--c-green), #fff 32%);

  /* semantic — deliberately separate from the accent */
  --c-ok: #2e8b57;
  --c-warn: #9a5b00;
  --c-crit: #a8382a;

  /* type */
  --f-fa: "IRANSans", "Segoe UI", Tahoma, sans-serif;
  --f-en: "Lato", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-body: var(--f-en);

  /* type scale — 1.25 ratio, seven steps, capped */
  --t-xs: 0.75rem;
  --t-sm: 0.8rem;
  --t-base: 1rem;
  --t-md: 1rem;
  --t-lg: 1.375rem;
  --t-xl: 1.5rem;
  --t-2xl: 2.25rem;
  --t-3xl: 3rem;
  --t-4xl: 3.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.7;

  /* space — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* section rhythm */
  --sec-y: 60px;
  --sec-y-lg: 128px;

  --radius: 4px;
  --radius-card: 6px;

  /* two elevation levels only — borders do most of the separating */
  --shadow-1: 0 1px 2px rgba(14, 31, 39, 0.05),
    0 2px 8px -4px rgba(14, 31, 39, 0.1);
  --shadow-2: 0 8px 32px -12px rgba(14, 31, 39, 0.22),
    0 2px 8px -4px rgba(14, 31, 39, 0.1);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-3: 320ms;

  --container: 1400px;
  /* The FULL-BLEED gutter, for the elements that are deliberately not in
     `.container`: the chrome (topbar + header row) and the poster hero's deck.
     It exists as a token because three files need the identical value and a
     copied clamp drifts the first time one of them is tuned — the same failure
     that put `--sb-lift` out of step once already. Floor is the container's own
     24px so the chrome never sits tighter than the page; cap keeps an ultrawide
     screen from flinging the brand mark into the far corner. */
  --gutter: clamp(24px, 4vw, 96px);
  --header-h: 76px;
  --topbar-h: 38px;
}

/* Persian needs looser leading — equal leading is what makes most
   bilingual sites look wrong in Persian. */
:root:lang(fa),
[dir="rtl"] {
  --f-body: var(--f-fa);
  --lh-body: 1.9;
  --lh-snug: 1.55;
  --lh-tight: 1.3;
}

@media (max-width: 900px) {
  :root {
    --sec-y: 56px;
    --sec-y-lg: 72px;
    --header-h: 64px;
    --topbar-h: 34px;
  }
}

/* Matches `.container`'s own small-screen gutter, so the chrome and the page
   still share one edge where there is no room for them to differ. */
@media (max-width: 600px) {
  :root {
    --gutter: 18px;
  }
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-body);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--c-ink);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
p {
  margin: 0;
}
/* Body copy sets JUSTIFIED site-wide — the user's call, 2026-08-16.
   ⚠️ Two things about this rule are deliberate and easy to undo by accident:

   1. It lists `p`, `blockquote`, `dd` and NOT `body`, `li` or the headings. On
      `body` it would inherit into every heading and UI label as well, and a
      wrapped heading justified against `text-wrap: balance` stretches its first
      line edge-to-edge. `li` is the site's nav/menu element, not a prose one.
   2. `:where()` keeps it at ZERO specificity so any page rule outranks it — but
      specificity does NOT save the blocks that centre their text by handing
      `text-align: center` down to their children, because a direct declaration
      on the child beats an inherited value at any specificity. Each of those
      containers therefore carries a `:where(p, blockquote, dd) { text-align:
      inherit }` companion in its own page CSS. **Add a centred container that
      holds a paragraph and you must add that companion too**, or the paragraph
      silently sets justified-from-the-start instead of centred.

   Single-line text is unaffected either way: the last line of a justified block
   is never stretched, and a one-line block is all last line. */
:where(p, blockquote, dd) {
  text-align: justify;
  text-justify: inter-word;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
a:hover {
  color: var(--c-primary-deep);
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--c-primary);
  color: #fff;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-ink);
  color: #fff;
  padding: var(--s-3) var(--s-5);
}
.skip-link:focus {
  inset-inline-start: 0;
}

/* Latin runs (URLs, codes, brand names) inside Persian text */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
.num {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 600px) {
  .container {
    padding-inline: 18px;
  }
}

.section {
  padding-block: var(--sec-y);
}
.section--lg {
  padding-block: var(--sec-y-lg);
}
.section--wash {
  background: var(--c-wash);
}
.section--surface {
  background: var(--c-surface);
}
.section--ink {
  background: var(--c-band);
  color: rgba(255, 255, 255, 0.78);
}
.section--ink h1,
.section--ink h2,
.section--ink h3 {
  color: #fff;
}

.stack {
  display: flex;
  flex-direction: column;
}
.stack-2 {
  gap: var(--s-2);
}
.stack-3 {
  gap: var(--s-3);
}
.stack-4 {
  gap: var(--s-4);
}
.stack-6 {
  gap: var(--s-6);
}
.stack-8 {
  gap: var(--s-8);
}
.stack-12 {
  gap: var(--s-12);
}

.grid {
  display: grid;
  gap: var(--s-6);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  background: var(--c-green);
  flex: none;
}
[dir="rtl"] .eyebrow {
  letter-spacing: 0;
}

.h-display {
  font-size: clamp(2.1rem, 5.2vw, var(--t-3xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}
.h1 {
  font-size: clamp(1.9rem, 4.2vw, var(--t-3xl));
  letter-spacing: -0.01em;
}
.h2 {
  font-size: clamp(1.55rem, 3.2vw, var(--t-2xl));
  letter-spacing: -0.008em;
}
.h3 {
  font-size: var(--t-lg);
}
.h4 {
  font-size: var(--t-md);
}
[dir="rtl"] .h-display,
[dir="rtl"] .h1,
[dir="rtl"] .h2 {
  letter-spacing: 0;
}

.lede {
  font-size: var(--t-md);
  color: var(--c-body);
  max-width: 62ch;
  line-height: var(--lh-body);
}
.muted {
  color: var(--c-muted);
}
.small {
  font-size: var(--t-sm);
}
.measure {
  max-width: 68ch;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 13px 26px;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--c-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--c-primary-deep);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}
.btn--ghost:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-soft);
}
.btn--onink {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--onink:hover {
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
}
/* Solid white on a BRAND-COLOURED ground (the careers panel). `--primary` on
   blue is the invisible case `--onink` does not cover, and a ghost outline is
   too quiet for the only call to action in its section. */
.btn--onbrand {
  background: #fff;
  color: var(--c-primary-deep);
  border-color: #fff;
}
.btn--onbrand:hover {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}
.btn--sm {
  padding: 9px 18px;
  font-size: var(--t-xs);
}

/* arrow that flips with direction */
.btn .arw,
.link-arw .arw {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  transition: transform var(--dur-1) var(--ease);
}
[dir="rtl"] .btn .arw,
[dir="rtl"] .link-arw .arw {
  transform: scaleX(-1);
}
.btn:hover .arw {
  transform: translateX(3px);
}
[dir="rtl"] .btn:hover .arw {
  transform: scaleX(-1) translateX(3px);
}

.link-arw {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-primary);
}
.link-arw:hover .arw {
  transform: translateX(3px);
}
[dir="rtl"] .link-arw:hover .arw {
  transform: scaleX(-1) translateX(3px);
}

/* ==========================================================================
   SECTION HEADER
   ========================================================================== */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8);
  margin-block-end: var(--s-12);
  flex-wrap: wrap;
}
.sec-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 64ch;
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
}
.card__media {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--c-wash);
  overflow: hidden;
}
.card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}
.card:hover .card__media img {
  transform: scale(1.04);
}
.card__body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-muted);
  flex-wrap: wrap;
}
.card__title {
  font-size: var(--t-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--c-ink);
}
/* The title's `--c-ink` was never actually reaching the screen: the headline is
   an <a class="card__link">, which takes the global link blue, so every card
   title on the site rendered brand blue and the card had no ink anywhere. This
   makes the element honour the colour its own rule already declares. */
.card__title .card__link {
  color: inherit;
}
.card:hover .card__title .card__link {
  color: var(--c-primary-deep);
}
.card__excerpt {
  font-size: var(--t-sm);
  color: var(--c-body);
  line-height: var(--lh-body);
}
.card__foot {
  margin-block-start: auto;
  padding-block-start: var(--s-3);
}

/* stretched link — whole card clickable, single accessible target */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card {
  position: relative;
}

/* badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
  border: 1px solid rgba(15, 127, 184, 0.22);
}
.badge--green {
  background: var(--c-green-soft);
  color: #1f6b2c;
  border-color: rgba(52, 155, 71, 0.22);
}
.badge--plain {
  background: var(--c-wash);
  color: var(--c-muted);
  border-color: var(--c-line);
}

/* ==========================================================================
   STAT
   ========================================================================== */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.stat__value {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stat__suffix {
  font-size: 0.5em;
  color: var(--c-primary);
  font-weight: 700;
}
.stat__label {
  font-size: var(--t-sm);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}
.section--ink .stat__value {
  color: #fff;
}
.section--ink .stat__label {
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   MOTION — reveal on scroll
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}