/* ============================================================
   KEYSUN Typography Design System v1
   Scope: typography, text alignment, readable measure and rhythm.
   Visual identity, color, layout structure and animation are unchanged.
   ============================================================ */

/* ============================================================
   KEYSUN local webfont declarations
   Configured for direct file placement in /assets/fonts/.
   No installer or external font request is required.
   ============================================================ */

@font-face {
  font-family: "Estedad";
  src: url("../fonts/Estedad-Persian.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Latin-Numerals.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2039-203A, U+20AC, U+20B9, U+20BD, U+2190-2194, U+2197, U+2212, U+FE0E-FE0F;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular-Arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Medium-Arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold-Arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Bold-Arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F;
}

:root {
  /* Font families */
  --type-fa: "Estedad", "Inter", sans-serif;
  --type-en: "Inter", sans-serif;
  --type-ar: "IBM Plex Sans Arabic", "Inter", sans-serif;
  --type-body: var(--type-en);
  --type-latin: var(--type-en);

  /* Responsive type scale */
  --type-body-size: clamp(1rem, 0.98rem + 0.10vw, 1.0625rem);
  --type-small-size: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem);
  --type-caption-size: clamp(0.75rem, 0.73rem + 0.06vw, 0.8125rem);
  --type-button-size: clamp(0.9375rem, 0.91rem + 0.08vw, 1rem);
  --type-h1-size: clamp(3rem, 4vw, 4.75rem);
  --type-h2-size: clamp(2.15rem, 4vw, 3.55rem);
  --type-section-statement-size: clamp(1.95rem, 3.55vw, 3.15rem);
  --type-h3-size: clamp(1.25rem, 1.25rem + 0.35vw, 1.5rem);
  --type-h4-size: clamp(1.0625rem, 1rem + 0.18vw, 1.1875rem);

  /* Line heights */
  --type-body-leading: 1.68;
  --type-heading-leading: 1.12;
  --type-h1-leading: 1.06;
  --type-card-leading: 1.55;

  /* Readable measures */
  --measure-copy: 66ch;
  --measure-lead: 58ch;
  --measure-heading: 24ch;
  --measure-card: 44ch;

  /* Vertical rhythm */
  --rhythm-1: 0.5rem;
  --rhythm-2: 0.75rem;
  --rhythm-3: 1rem;
  --rhythm-4: 1.5rem;
  --rhythm-5: 2rem;
  --rhythm-6: 3rem;
  --rhythm-section: clamp(6.5rem, 10vw, 10rem);

  /* Tracking */
  --tracking-body: 0;
  --tracking-heading: -0.025em;
  --tracking-label: 0.08em;
}

html[lang="fa"] {
  --type-body: var(--type-fa);
  --type-body-size: clamp(1.0625rem, 1.02rem + 0.14vw, 1.125rem);
  --type-h1-size: clamp(2.75rem, 4vw, 4.6rem);
  --type-h2-size: clamp(2rem, 3.75vw, 3.35rem);
  --type-section-statement-size: clamp(1.85rem, 3.35vw, 3.05rem);
  --type-body-leading: 1.88;
  --type-heading-leading: 1.3;
  --type-h1-leading: 1.22;
  --type-card-leading: 1.72;
  --measure-copy: 54ch;
  --measure-lead: 50ch;
  --measure-heading: 22ch;
  --tracking-heading: 0;
  --tracking-label: 0;
}

html[lang="ar"] {
  --type-body: var(--type-ar);
  --type-body-size: clamp(1.03rem, 1rem + 0.12vw, 1.1rem);
  --type-h1-size: clamp(2.75rem, 4vw, 4.6rem);
  --type-h2-size: clamp(2rem, 3.75vw, 3.35rem);
  --type-section-statement-size: clamp(1.85rem, 3.35vw, 3.05rem);
  --type-body-leading: 1.82;
  --type-heading-leading: 1.28;
  --type-h1-leading: 1.2;
  --type-card-leading: 1.68;
  --measure-copy: 56ch;
  --measure-lead: 52ch;
  --measure-heading: 23ch;
  --tracking-heading: 0;
  --tracking-label: 0;
}

html[lang="en"] {
  --type-body: var(--type-en);
}


/* Override legacy language stacks with the approved families only. */
html[lang="fa"] body,
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3,
html[lang="fa"] h4, html[lang="fa"] h5, html[lang="fa"] h6 {
  font-family: var(--type-fa);
}

html[lang="en"] body,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6 {
  font-family: var(--type-en);
}

html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 {
  font-family: var(--type-ar);
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--type-body);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-leading);
  letter-spacing: var(--tracking-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

html[lang="fa"] body,
html[lang="ar"] body {
  text-align: right;
  word-spacing: 0.015em;
}

html[lang="en"] body {
  text-align: left;
}

/* Language-aware runs */
[lang="fa"] { font-family: var(--type-fa); }
[lang="en"] { font-family: var(--type-en); }
[lang="ar"] { font-family: var(--type-ar); }
.ltr,
code,
kbd,
samp,
var,
.product-card .specs,
.stat-num,
.product-gallery-status {
  font-family: var(--type-latin);
  font-variant-numeric: tabular-nums lining-nums;
}

.product-gallery-nav span,
.product-gallery .pg-arrow {
  font-family: var(--type-en);
}

/* Editorial defaults */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, blockquote, figcaption,
button, input, textarea, select {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 0;
  font-weight: 700;
  line-height: var(--type-heading-leading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-leading); font-weight: 800; }
h2 { font-size: var(--type-h2-size); }
h3 { font-size: var(--type-h3-size); }
h4 { font-size: var(--type-h4-size); }
h5, h6 { letter-spacing: 0; }

p, li, dd, blockquote, figcaption {
  line-height: var(--type-body-leading);
  text-wrap: pretty;
  orphans: 2;
  widows: 2;
}

p {
  max-inline-size: var(--measure-copy);
}

html[lang="fa"] p,
html[lang="ar"] p,
html[lang="fa"] li,
html[lang="ar"] li {
  hyphens: none;
  word-break: normal;
}

html[lang="en"] p,
html[lang="en"] li {
  hyphens: auto;
}

strong, b { font-weight: 700; }
small { font-size: var(--type-small-size); line-height: 1.6; }

/* Shared section rhythm */
section {
  padding-block: var(--rhythm-section);
}

.section-head {
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.section-head > div:first-child {
  max-inline-size: min(100%, 46rem);
}

.section-head h2 {
  max-inline-size: var(--measure-heading);
  font-size: var(--type-h2-size);
  line-height: var(--type-heading-leading);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
}

/* Slightly quieter narrative section statements; Hero and CTA headings stay unchanged. */
.section-head h2.section-statement {
  font-size: var(--type-section-statement-size);
  max-inline-size: min(100%, 26ch);
}

.section-head p {
  max-inline-size: min(var(--measure-copy), 34rem);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.section-eyebrow,
.hero-eyebrow {
  font-family: var(--type-body);
  font-size: var(--type-caption-size);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--rhythm-3);
}

html[lang="fa"] .section-eyebrow,
html[lang="fa"] .hero-eyebrow,
html[lang="ar"] .section-eyebrow,
html[lang="ar"] .hero-eyebrow {
  letter-spacing: 0;
}

/* Navigation and controls */
header nav a,
header nav .nav-inactive,
.lang-switch a {
  font-family: var(--type-body);
  font-size: var(--type-small-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

header nav a,
header nav .nav-inactive {
  text-wrap: nowrap;
}

.lang-switch a {
  min-inline-size: 2.5rem;
  text-align: center;
}

/* Keep every desktop navigation item on the same optical baseline.
   This prevents the first item (Products) from appearing displaced
   when language-specific font metrics are applied. */
@media (min-width: 901px) {
  header nav,
  header nav ul,
  header nav li {
    align-items: center;
  }

  header nav {
    display: flex;
  }

  header nav ul,
  header nav li {
    display: flex;
  }

  header nav a,
  header nav .nav-inactive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2rem;
    padding-block: 0.25rem;
    line-height: 1;
    vertical-align: middle;
  }
}

.btn,
.pdf-modal-btn,
.map-link,
.contact-channels a {
  font-family: var(--type-body);
  font-size: var(--type-button-size);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

/* Hero */
.hero-text {
  max-inline-size: min(100%, 58rem);
}

.hero h1 {
  max-inline-size: var(--measure-heading);
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-leading);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
}

.hero h1 .accent {
  font-weight: 700;
}

.hero-sub {
  max-inline-size: var(--measure-lead);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  line-height: var(--type-body-leading);
  text-wrap: pretty;
}

.hero-meta {
  font-family: var(--type-body);
  font-size: var(--type-caption-size);
  line-height: 1.6;
  letter-spacing: 0;
}

html[lang="fa"] .hero-text,
html[lang="ar"] .hero-text {
  align-items: flex-start;
  text-align: right;
}

html[lang="fa"] .hero-cta,
html[lang="ar"] .hero-cta,
html[lang="fa"] .hero-eyebrow,
html[lang="ar"] .hero-eyebrow {
  justify-content: flex-start;
}

html[lang="en"] .hero-text {
  align-items: flex-start;
  text-align: left;
}

html[lang="en"] .hero-cta,
html[lang="en"] .hero-eyebrow {
  justify-content: flex-start;
}

/* Stats */
.stat-num {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
}

.stat-label {
  font-size: var(--type-small-size);
  line-height: 1.65;
  text-wrap: balance;
}

/* Product cards */
.product-card .body {
  padding: clamp(1.25rem, 2.25vw, 1.75rem);
}

.product-card .cat-tag {
  font-family: var(--type-body);
  font-size: var(--type-caption-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--rhythm-2);
}

html[lang="fa"] .product-card .cat-tag,
html[lang="ar"] .product-card .cat-tag {
  letter-spacing: 0;
}

.product-card h3 {
  max-inline-size: 24ch;
  margin-bottom: var(--rhythm-2);
  font-size: var(--type-h3-size);
  line-height: var(--type-card-leading);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

.product-card p {
  max-inline-size: var(--measure-card);
  margin-bottom: var(--rhythm-4);
  font-size: clamp(0.9375rem, 0.92rem + 0.08vw, 1rem);
  line-height: var(--type-body-leading);
  text-wrap: pretty;
}

.product-card .specs {
  gap: 0.55rem 0.85rem;
  padding-top: var(--rhythm-3);
  font-size: var(--type-caption-size);
  line-height: 1.65;
  letter-spacing: 0;
}

.product-card .specs span {
  white-space: nowrap;
}

/* Certificates and clients */
.certs-grid,
.clients-strip {
  text-align: center;
}

.cert-clickable::after {
  font-family: var(--type-en);
}

/* Contact */
.contact-card {
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

.contact-card h3 {
  max-inline-size: 24ch;
  margin-bottom: var(--rhythm-3);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  line-height: var(--type-heading-leading);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
}

.contact-card p {
  max-inline-size: var(--measure-copy);
  margin-bottom: var(--rhythm-4);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.contact-details {
  font-family: var(--type-body);
  font-size: var(--type-small-size);
  line-height: 1.9;
  letter-spacing: 0;
}

.contact-details strong {
  font-weight: 700;
}

.contact-map-caption,
.contact-map-fullscreen {
  font-family: var(--type-body);
  font-size: var(--type-caption-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* PDF modal */
.pdf-modal-header {
  font-family: var(--type-body);
  font-size: var(--type-small-size);
  line-height: 1.5;
  letter-spacing: 0;
}

.pdf-modal-title {
  min-inline-size: 0;
  max-inline-size: 55ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.pdf-modal-actions {
  flex: 0 0 auto;
}

/* Footer */
footer,
footer h5,
.footer-bottom {
  font-family: var(--type-body);
}

footer h5 {
  margin-bottom: var(--rhythm-3);
  font-size: var(--type-small-size);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--tracking-label);
  text-transform: none;
}

html[lang="fa"] footer h5,
html[lang="ar"] footer h5 {
  letter-spacing: 0;
}

footer ul li,
.footer-brand p {
  font-size: var(--type-small-size);
  line-height: 1.75;
}

.footer-bottom {
  font-size: var(--type-caption-size);
  line-height: 1.7;
  letter-spacing: 0;
}

/* Generic editorial lists only.
   Component lists such as the header navigation, client grid and footer
   keep their original layout and spacing. */
:where(article, .prose, .text-content) ul,
:where(article, .prose, .text-content) ol {
  padding-inline-start: 1.4em;
}

[dir="rtl"] :where(article, .prose, .text-content) ul,
[dir="rtl"] :where(article, .prose, .text-content) ol {
  padding-inline-start: 0;
  padding-inline-end: 1.4em;
}

:where(article, .prose, .text-content) li + li {
  margin-top: 0.35em;
}

label {
  display: inline-block;
  margin-bottom: var(--rhythm-1);
  font-size: var(--type-small-size);
  font-weight: 600;
  line-height: 1.5;
}

input, textarea, select {
  font-size: 1rem;
  line-height: 1.5;
}

textarea { line-height: 1.7; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-small-size);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

th {
  font-weight: 700;
  text-align: start;
}

th, td {
  padding: 0.8rem 1rem;
  vertical-align: top;
}

/* Utility for isolated technical terms and brand names */
.brand-name,
.no-wrap,
.ltr {
  white-space: nowrap;
}

/* Responsive typography and rhythm */
@media (max-width: 1100px) {
  .hero-text {
    max-inline-size: min(100%, 48rem);
  }

  .section-head {
    align-items: flex-start;
  }

  .section-head p {
    max-inline-size: var(--measure-copy);
  }
}

@media (max-width: 900px) {
  :root {
    --rhythm-section: clamp(5rem, 12vw, 7rem);
  }

  header nav a,
  header nav .nav-inactive {
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero {
    padding-top: 7.5rem;
  }

  .hero-text {
    width: 100%;
  }

  .hero h1 {
    max-inline-size: min(100%, var(--measure-heading));
  }

  .hero-sub {
    max-inline-size: min(100%, var(--measure-lead));
  }

  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rhythm-4);
  }

  .section-head h2,
  .section-head p {
    max-inline-size: min(100%, var(--measure-copy));
  }

  .footer-bottom {
    gap: var(--rhythm-3);
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  :root {
    --type-h1-size: clamp(2.45rem, 11vw, 3.65rem);
    --type-h2-size: clamp(1.85rem, 8vw, 2.65rem);
    --type-section-statement-size: clamp(1.68rem, 7.1vw, 2.35rem);
    --rhythm-section: 5rem;
  }

  html[lang="fa"] {
    --type-h1-size: clamp(2.35rem, 10.4vw, 3.4rem);
  }

  html[lang="fa"] {
    --type-section-statement-size: clamp(1.65rem, 7vw, 2.3rem);
  }

  html[lang="ar"] {
    --type-h1-size: clamp(2.3rem, 10.2vw, 3.35rem);
  }

  html[lang="ar"] {
    --type-section-statement-size: clamp(1.65rem, 7vw, 2.3rem);
  }

  .hero h1 {
    max-inline-size: 100%;
  }

  .hero-sub {
    font-size: 1.0625rem;
  }

  .hero-cta {
    width: 100%;
    align-items: stretch;
  }

  .hero-cta .btn {
    justify-content: center;
  }

  .product-card h3 {
    max-inline-size: 100%;
  }

  .pdf-modal-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .pdf-modal-title {
    max-inline-size: calc(100% - 2.75rem);
  }
}

@supports (text-wrap: balance) {
  h1, h2, h3, h4, h5, h6,
  .btn,
  .stat-label {
    text-wrap: balance;
  }
}

@supports (text-wrap: pretty) {
  p, li, dd, blockquote, figcaption {
    text-wrap: pretty;
  }
}