/* Kyu skin over the Runtime template (site.css). Colours are Code@'s (ink black, paper white, lime #82B541);
   the Kyu mark keeps Jil Al-Tahadi navy for its pillar. Arabic pairs Reem Kufi (square, sharp, like Michroma)
   with Readex Pro (Code@'s Arabic body face). */
@font-face { font-family: 'Reem Kufi'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('assets/fonts/ReemKufi-Arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Readex Pro'; font-weight: 300 600; font-style: normal; font-display: swap; src: url('assets/fonts/ReadexPro-Arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  --color-bg: #000000;
  --color-surface: #0A0A0A;
  --color-surface-2: #111111;
  --color-line: rgba(255,255,255,0.16);
  --color-line-strong: rgba(255,255,255,0.40);
  --color-text: #F2F2F2;
  --color-muted: #8A8A8A;
  --color-dim: #5C5C5C;
  --color-acid: #82B541;
  --color-acid-ink: #000000;
  --color-bar: #1F1F1F;
  --navy: #20255A;
  --paper: #F4F3EF;
  color-scheme: dark;
}
html { background: var(--color-bg); }
body { background: var(--color-bg); }

/* Arabic: Michroma and Poppins carry Latin and digits, the Arabic faces carry the script. No tracking or caps on Arabic. */
html[lang="ar"] {
  --font-display: 'Reem Kufi', 'Michroma', 'Runtime Arrows', sans-serif;
  --font-sans: 'Readex Pro', 'Poppins', 'Runtime Arrows', sans-serif;
  --tracking-display: 0px;
  --tracking-label: 0px;
  --tracking-nav: 0px;
}
html[lang="ar"] body { font-weight: 300; }
html[lang="ar"] .display, html[lang="ar"] .h1, html[lang="ar"] .h2 { --lh: 1.12; font-weight: 600; }
html[lang="ar"] .h3, html[lang="ar"] .h4 { font-weight: 500; }
html[lang="ar"] .label, html[lang="ar"] .idx, html[lang="ar"] .tag, html[lang="ar"] .chip, html[lang="ar"] .btn, html[lang="ar"] .nav-links a { letter-spacing: 0; }
html[lang="ar"] .statement, html[lang="ar"] .lead, html[lang="ar"] .lead-mono, html[lang="ar"] p { --lh: 1.75; }
html[lang="ar"] .display { font-size: calc(var(--fs-display) * 0.9); }

/* The glass objects keep their chrome but lean toward the lime and away from the template's violet. */
.k-obj { filter: grayscale(1) contrast(1.08) brightness(1.06); }

/* ── nav ── */
.k-brand { display: inline-flex; align-items: center; gap: 12px; }
.k-brand svg { width: 28px; height: 28px; flex: none; }
.k-brand span { font-family: 'Michroma', sans-serif; letter-spacing: 2px; }
.k-lang { font-family: var(--font-sans); font-size: var(--fs-14); color: var(--color-muted); padding: 8px 12px; border: 1px solid var(--color-line); text-decoration: none; transition: color .15s, border-color .15s; }
.k-lang:hover, .k-lang:focus-visible { color: var(--color-text); border-color: var(--color-line-strong); }
html[lang="en"] .k-lang { font-family: 'Readex Pro', sans-serif; }
@media (max-width: 900px) { .nav .end .k-lang { display: none; } }
.k-pl { display: flex; align-items: center; gap: 16px; }
.k-pl svg { width: 48px; height: 48px; }

/* ── logo tiles: paper square, navy pillar, product ticks ── */
.k-logo { display: inline-grid; place-items: center; flex: none; background: var(--paper); border-radius: 2px; }
.k-logo svg, .k-logo img { width: 66%; height: 66%; object-fit: contain; }
.k-logo img { width: 100%; height: 100%; }
.k-logo-s { width: 32px; height: 32px; }
.k-logo-m { width: 48px; height: 48px; }
.k-logo-l { width: 88px; height: 88px; }

/* ── chips ── */
.k-chip { white-space: nowrap; }
.k-chip.on { background: var(--color-acid); color: var(--color-acid-ink); border-color: var(--color-acid); }

/* ── hero ── */
.k-hero-lead { max-width: 46ch; color: var(--color-text); font-size: var(--fs-16-18); }
html[lang="ar"] .k-hero .ls-he-show { max-width: 520px; }

/* ── product cards ── */
.k-grid { display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.k-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { .k-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .k-grid-2, .k-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.k-card { position: relative; display: flex; flex-direction: column; background: var(--color-bg); min-width: 0; }
.k-card[hidden] { display: none; }
.k-card-link { display: block; text-decoration: none; }
.k-shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.k-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: none; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s; opacity: .92; }
.k-card:hover .k-shot img, .k-card-link:focus-visible .k-shot img { transform: scale(1.025); opacity: 1; }
.k-shot-empty > span { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; color: var(--color-muted); font-size: var(--fs-14); }
.k-shot-empty em { font-style: normal; }
.k-shot-big { aspect-ratio: 16 / 9; border: 1px solid var(--color-line); }
.k-card-body { display: flex; flex-direction: column; gap: 12px; padding: var(--sp-24); flex: 1; }
.k-id { display: flex; align-items: center; gap: 16px; }
.k-id-t { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.k-id-t .h3 { margin: 0; overflow-wrap: anywhere; }
.k-id-t .h3 a { color: inherit; text-decoration: none; }
.k-id-t .h3 a::after { content: ""; position: absolute; inset: 0; }
.k-card .k-chip { position: relative; z-index: 1; }
.k-sector { margin: 0; color: var(--color-acid); font-size: var(--fs-14); }
.k-tag { margin: 0; color: var(--color-muted); }
.k-card:focus-within { outline: 2px solid var(--color-acid); outline-offset: -2px; }

/* coming-soon rows: logo + number in the key column */
.k-row .c-key { display: inline-flex; align-items: center; gap: 12px; }
.k-row .c-meta { text-transform: none; letter-spacing: 0; }
.k-row .c-meta b { color: var(--color-acid); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-12); }

/* ── the mark section ── */
.k-mark-show { display: flex; justify-content: flex-end; margin: calc(var(--sp-48) * -1) 0 var(--sp-48); }
.k-mark-show svg { width: clamp(120px, 18vw, 240px); height: auto; }
html[dir="rtl"] .k-mark-show { justify-content: flex-start; }
@media (max-width: 900px) { .k-mark-show { margin: 0 0 var(--sp-32); } }

/* ── shared features ── */
.k-shared { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
.k-shared-i { padding: var(--sp-32) var(--sp-24) var(--sp-40) 0; border-bottom: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 12px; }
.k-shared-i + .k-shared-i { padding-inline-start: var(--sp-24); }
.k-shared-i:nth-child(3n + 1) { padding-inline-start: 0; }
.k-shared-i:not(:nth-child(3n)) { border-inline-end: 1px solid var(--color-line); }
.k-shared-i .h3 { margin: 0; }
.k-shared-i p { margin: 0; color: var(--color-muted); }
@media (max-width: 900px) {
  .k-shared { grid-template-columns: minmax(0, 1fr); }
  .k-shared-i, .k-shared-i + .k-shared-i { padding-inline: 0; border-inline-end: 0 !important; }
}

/* ── filters ── */
.k-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-32); }
.k-filter { text-decoration: none; cursor: pointer; }
.k-filter span { opacity: .7; margin-inline-start: 6px; }
.k-filter.on { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

/* ── product page ── */
.k-sys-title { display: flex; align-items: flex-end; gap: var(--sp-32); }
.k-sys-title .h1 { margin: 0; }
.k-sys-title .k-pre { color: var(--color-muted); }
@media (max-width: 599px) { .k-sys-title { flex-direction: column; align-items: flex-start; gap: var(--sp-20); } .k-sys-title .k-logo-l { width: 64px; height: 64px; } }
.k-wide { grid-column: span 2; }
@media (max-width: 900px) { .k-wide { grid-column: auto; } }
.k-gallery { display: grid; gap: var(--sp-16); }
.k-main { margin: 0; display: grid; gap: 12px; }
.k-main figcaption { color: var(--color-muted); font-size: var(--fs-14); min-height: 1.5em; }
.k-zoom, .k-thumb { all: unset; display: block; cursor: zoom-in; border: 1px solid var(--color-line); background: var(--color-surface); }
.k-zoom:focus-visible, .k-thumb:focus-visible { outline: 2px solid var(--color-acid); outline-offset: 2px; }
.k-zoom img { display: block; width: 100%; height: auto; }
.k-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-12); }
.k-thumb { cursor: pointer; aspect-ratio: 16 / 10; overflow: hidden; opacity: .55; transition: opacity .15s, border-color .15s; }
.k-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.k-thumb.on, .k-thumb:hover { opacity: 1; border-color: var(--color-acid); }
.k-modules { counter-reset: k; list-style: none; padding: 0; margin: var(--sp-32) 0; display: grid; gap: 0; border-top: 1px solid var(--color-line); }
.k-modules li { counter-increment: k; display: flex; gap: var(--sp-20); padding: var(--sp-16) 0; border-bottom: 1px solid var(--color-line); }
.k-modules li::before { content: counter(k, decimal-leading-zero); color: var(--color-acid); font-family: 'Michroma', sans-serif; font-size: var(--fs-12); padding-top: 4px; min-width: 28px; }
.k-note { color: var(--color-muted); border-inline-start: 2px solid var(--color-acid); padding-inline-start: var(--sp-16); }
.k-pn .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); padding: 0; }
.k-pn a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 8px 16px; align-items: center; padding: var(--sp-24); background: var(--color-bg); text-decoration: none; color: var(--color-text); transition: background .15s; }
.k-pn a .label { grid-column: 1 / -1; }
.k-pn a[rel="next"] { text-align: end; grid-template-columns: 1fr auto; }
.k-pn a[rel="next"] .k-logo { order: 2; }
.k-pn a:hover, .k-pn a:focus-visible { background: var(--color-surface); }
@media (max-width: 599px) { .k-pn .wrap { grid-template-columns: 1fr; } .k-pn a[rel="next"] { text-align: start; grid-template-columns: auto 1fr; } .k-pn a[rel="next"] .k-logo { order: 0; } }
.k-lightbox { border: 1px solid var(--color-line); background: var(--color-bg); padding: var(--sp-16); max-width: min(1600px, 96vw); max-height: 94vh; color: var(--color-text); }
.k-lightbox::backdrop { background: rgba(0,0,0,.86); }
.k-lightbox img { display: block; max-width: 100%; max-height: calc(94vh - 96px); width: auto; height: auto; margin: 0 auto; }
.k-lightbox form { display: flex; justify-content: flex-end; margin-bottom: var(--sp-12); }

/* ── about ── */
.k-about-b + .k-about-b { margin-top: var(--sp-64); }
.k-marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.k-marks a { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: var(--sp-24); background: var(--color-bg); color: var(--color-text); text-decoration: none; font-size: var(--fs-14); height: 100%; }
.k-marks a:hover, .k-marks a:focus-visible { background: var(--color-surface); }

/* ── contact form ── */
.k-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.k-form select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
html[dir="rtl"] .k-form select.input { background-position: 14px 50%, 20px 50%; }
.k-form .field .k-err { color: #FF8A8A; font-size: var(--fs-14); }
.k-form .input[aria-invalid="true"] { border-color: #FF8A8A; }
.k-form-msg { margin: 0; min-height: 1.5em; }
.k-form-msg[data-state="ok"] { color: var(--color-acid); }
.k-form-msg[data-state="fail"] { color: #FF8A8A; }
.k-form button[aria-busy="true"] { opacity: .7; pointer-events: none; }
.k-form textarea.input { min-height: 140px; resize: vertical; }

/* ── footer ── */
.k-wordmark { font-family: 'Michroma', sans-serif; display: block; line-height: .9; font-size: clamp(96px, 26vw, 400px); letter-spacing: -0.02em; color: var(--color-text); margin: var(--sp-48) 0 var(--sp-24); }
.k-madeby b { color: var(--color-text); font-weight: 500; }
.k-cta-h { margin-top: 32px; }

/* ── RTL: the template is written in physical directions; mirror the parts that read wrong ── */
html[dir="rtl"] .arrow { display: inline-block; }
html[dir="rtl"] .rt-curtain-label::before { margin-right: 0; margin-left: var(--sp-24); }
html[dir="rtl"] .obj { --x-flip: 1; }
html[dir="rtl"] .rows-foot, html[dir="rtl"] .ls-he-top { direction: rtl; }
html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"] { text-align: right; }
html[dir="rtl"] input[type="tel"]::placeholder, html[dir="rtl"] input[type="email"]::placeholder { text-align: right; }

@media (prefers-reduced-motion: reduce) { .k-shot img, .k-thumb { transition: none; } }

/* RTL: the glass objects sit on the reading end in LTR (right). In Arabic the text starts on the right,
   so the objects move to the left edge with the same offsets. */
html[dir="rtl"] .obj-hero { right: auto; left: var(--x, -150px); }
html[dir="rtl"] .obj-tr { right: auto; left: var(--x, -60px); }
html[dir="rtl"] .obj-cta { right: auto; left: var(--x, 0px); }
html[dir="rtl"] .page-head .obj-hero { right: auto; left: var(--x, -180px); }
@media (min-width: 901px) and (max-width: 1199px) {
  html[dir="rtl"] .obj-hero { left: var(--lx, calc(var(--x, -150px) * .7)); }
  html[dir="rtl"] .obj-tr { left: var(--lx, calc(var(--x, -60px) * .7)); }
  html[dir="rtl"] .obj-cta { left: var(--lx, calc(var(--x, 0px) * .7)); }
  html[dir="rtl"] .page-head .obj-hero { left: var(--lx, calc(var(--x, -180px) * .7)); }
}
@media (max-width: 900px) {
  html[dir="rtl"] .obj-hero { left: var(--mx, -96px); }
  html[dir="rtl"] .obj-tr { left: var(--mx, -90px); }
  html[dir="rtl"] .obj-cta { left: var(--mx, -70px); }
  html[dir="rtl"] .page-head .obj-hero { left: var(--mx, -110px); }
}
html[dir="rtl"] .obj { transform: scaleX(-1); }