/* Layout: a dark stone tablet. Big left-aligned inscription type over a wide grid,
   the logo's circuit traces running out of the emblem across the hero, and real
   cuneiform signs as the marks for services and process steps. Single dark theme
   on purpose: the brand is carved stone, bronze and patina. */
:root {
  --stone: #131516;
  --stone-raised: #1b1e1f;
  --stone-line: #2b2f30;
  --bone: #ede6d8;
  --bone-muted: #a8a196;
  --bronze: #d9a46a;
  --bronze-deep: #9e6835;
  --teal: #63aaa3;
  --teal-deep: #1d4c4d;
  --on-bronze: #1a1209;

  /* Noto Kufi Arabic follows each Latin face, so Arabic and Kurdish letters
     fall through to it anywhere on the page while Latin keeps the brand fonts */
  --display: "Unbounded", "Noto Kufi Arabic", "Arial Black", system-ui, sans-serif;
  --body: "Instrument Sans", "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Noto Kufi Arabic", ui-monospace, "SF Mono", Menlo, monospace;
  --cune: "Noto Sans Cuneiform", "Segoe UI Historic", serif;

  --gutter: clamp(16px, 4.5vw, 56px);
  --radius: 18px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; }
body {
  margin: 0;
  background: var(--stone);
  color: var(--bone);
  font: 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }

.wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.label {
  font: 500 12.5px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-muted);
}
.sign { font-family: var(--cune); font-weight: 400; line-height: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--bronze); color: var(--on-bronze); }
.btn-primary:hover { background: #e6b47c; }
.btn-ghost { border-color: var(--stone-line); color: var(--bone); background: transparent; }
.btn-ghost:hover { border-color: var(--bone-muted); }
.btn:active { transform: translateY(1px); }

/* ---------- Nav ---------- */
.nav { position: relative; z-index: 2; }
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.brand span { font: 600 14px/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.brand span b { display: block; font-weight: 500; color: var(--bronze); letter-spacing: .3em; font-size: 11px; margin-top: 3px; }
.nav-end { display: flex; align-items: center; gap: 30px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--bone-muted); font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav-links a:not(.btn):hover { color: var(--bone); }
.nav-links .btn, .menu-btn { display: none; }
.menu-btn {
  width: 48px; height: 48px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--stone-line); background: transparent; color: var(--bone);
  place-items: center;
}
.menu-btn:hover { border-color: var(--bone-muted); }
.menu-btn span, .menu-btn span::before {
  display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease;
}
.menu-btn span { position: relative; transform: translateY(-3px); }
.menu-btn span::before { content: ""; position: absolute; top: 6px; }
.nav.open .menu-btn span { transform: rotate(45deg); }
.nav.open .menu-btn span::before { transform: translateY(-6px) rotate(-90deg); }
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--stone-line); background: transparent; cursor: pointer;
  color: var(--bone-muted); font: 500 13px/1 var(--mono); letter-spacing: .08em;
}
.lang-btn:hover { color: var(--bone); border-color: var(--bone-muted); }
.lang-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }
.lang-list {
  position: absolute; z-index: 3; top: calc(100% + 8px); inset-inline-end: 0; min-width: 190px;
  list-style: none; margin: 0; padding: 6px; border: 1px solid var(--stone-line); border-radius: 14px;
  background: var(--stone-raised); box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}
.lang-list[hidden] { display: none; }
.lang-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--bone-muted); font-size: 16px;
}
.lang-list a:hover { background: var(--stone); color: var(--bone); }
.lang-list a[aria-current="true"] { color: var(--bronze); }
.lang-list a[aria-current="true"]::after { content: "𒁹"; font: 16px/1 var(--cune); }
/* The full row of links needs about 1,000px in Kurdish, the longest of the three languages;
   below that the links move into a panel behind the menu button */
@media (max-width: 1280px) { .nav-links, .nav-end { gap: 22px; } }
@media (max-width: 1100px) {
  .nav-end { gap: 10px; }
  .menu-btn { display: inline-grid; }
  .nav-links { display: none; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: calc(100% - 8px); left: var(--gutter); right: var(--gutter);
    max-width: 420px; margin-inline-start: auto;
    padding: 8px 22px 22px; border: 1px solid var(--stone-line); border-radius: var(--radius);
    background: var(--stone-raised); box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
  }
  .nav.open .nav-links a:not(.btn) {
    padding: 14px 0; border-bottom: 1px solid var(--stone-line);
    font: 500 20px/1.2 var(--display); letter-spacing: -.01em; color: var(--bone);
  }
}
@media (max-width: 760px) { .lang-btn { padding: 0 14px; } }
@media (max-width: 480px) {
  .nav-cta { display: none; }
  .nav.open .nav-links .btn { display: inline-flex; justify-content: center; margin-top: 18px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--stone-line); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .wrap {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center; gap: 48px;
  padding-block: clamp(40px, 8vw, 110px) clamp(56px, 9vw, 120px);
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hero h1 {
  font: 500 clamp(36px, 5.4vw, 80px)/1.04 var(--display);
  letter-spacing: -.035em;
}
.hero h1 em { font-style: normal; color: var(--bronze); text-shadow: 0 0 38px rgba(217, 164, 106, .35); }
.hero h1 .quiet { display: block; color: var(--bone-muted); }
.hero-lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--bone-muted); max-width: 54ch; }
.hero-lede strong { color: var(--bone); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.emblem {
  justify-self: center; width: min(100%, 380px); aspect-ratio: 350 / 365; max-width: 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}
.emblem img { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 8px; }
  .emblem { order: -1; width: min(62vw, 260px); justify-self: start; }
}

/* ---------- Capability strip ---------- */
.strip { border-bottom: 1px solid var(--stone-line); overflow: hidden; }
.strip-track {
  display: flex; width: max-content; gap: 0;
  animation: slide 46s linear infinite;
}
.strip-track ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 22px 0; }
.strip-track li {
  display: flex; align-items: center; gap: 28px; padding-inline-end: 28px;
  font: 500 clamp(18px, 2.2vw, 26px)/1 var(--display); letter-spacing: -.01em; white-space: nowrap;
}
.strip-track li::after { content: "𒁹"; font: 22px/1 var(--cune); color: var(--bronze-deep); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section.block .wrap { padding-block: clamp(72px, 10vw, 140px); display: flex; flex-direction: column; gap: clamp(36px, 5vw, 64px); }
.block-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; }
.block-head h2 { font: 500 clamp(30px, 4.4vw, 60px)/1.05 var(--display); letter-spacing: -.03em; }
.block-head p { color: var(--bone-muted); max-width: 46ch; }
.block-head .label { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.block-head .label .sign { font-size: 18px; color: var(--bronze); }
@media (max-width: 760px) { .block-head { grid-template-columns: 1fr; } }

/* ---------- Work ---------- */
.work-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
.case {
  display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--stone-line);
  border-radius: var(--radius); overflow: hidden; background: var(--stone-raised);
}
.case-visual {
  position: relative; min-height: 340px; padding: clamp(24px, 4vw, 44px);
  background: radial-gradient(120% 90% at 85% 10%, #e0684b 0%, transparent 60%), linear-gradient(135deg, #c9503a, #9d3119);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; color: #fbf6ec;
}
.case-visual svg { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 18px 40px rgba(60, 14, 4, .45); }
.taglines { display: grid; gap: 10px; }
.taglines p { display: flex; gap: 14px; align-items: baseline; font-size: clamp(17px, 2vw, 22px); font-weight: 500; }
.taglines p span:first-child { font: 500 11px/1 var(--mono); letter-spacing: .12em; opacity: .75; min-width: 22px; direction: ltr; }
.taglines p[dir="rtl"] { justify-content: flex-end; flex-direction: row-reverse; }
.case-body { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.case-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.case-title h3 { font: 500 30px/1.1 var(--display); letter-spacing: -.02em; }
.case-body > p { color: var(--bone-muted); max-width: 60ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; margin: 0; }
.facts div { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--stone-line); padding-top: 12px; }
.facts dt { font: 500 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-muted); }
.facts dd { margin: 0; font-size: 15px; }
.case-link { color: var(--bronze); text-decoration: none; font-weight: 600; font-size: 15px; }
.case-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.blank {
  border: 1.5px dashed var(--stone-line); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background:
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(237, 230, 216, .035) 46px 47px);
}
.blank .sign { font-size: clamp(72px, 9vw, 120px); color: var(--stone-line); }
.blank h3 { margin-top: 10px; font: 500 clamp(24px, 2.6vw, 32px)/1.15 var(--display); letter-spacing: -.02em; }
.blank .btn { align-self: flex-start; }
.blank p { color: var(--bone-muted); margin-top: 10px; }
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
#services .wrap { padding-top: 0; } /* follows straight on from Work */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--stone-line); }
.service {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 28px;
  padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--stone-line);
}
.services .service:nth-child(odd) { padding-inline-end: clamp(16px, 4vw, 48px); }
.services .service:nth-child(even) { padding-inline-start: clamp(16px, 4vw, 48px); border-inline-start: 1px solid var(--stone-line); }
.service .sign { grid-row: span 3; justify-self: center; max-width: 112px; overflow: hidden; font-size: 58px; color: var(--bronze); text-shadow: 0 0 30px rgba(217, 164, 106, .25); }
.service .gloss { font: 400 12.5px/1.4 var(--mono); color: var(--teal); letter-spacing: .06em; }
.service h3 { font: 500 22px/1.25 var(--display); letter-spacing: -.01em; }
.service p { color: var(--bone-muted); max-width: 46ch; }
@media (max-width: 860px) {
  .services { grid-template-columns: 1fr; }
  .services .service:nth-child(n) { padding-inline: 0; border-inline-start: 0; }
}
@media (max-width: 480px) {
  .service { grid-template-columns: 1fr; }
  .service .sign { grid-row: auto; font-size: 56px; margin-bottom: 8px; }
}

/* ---------- Languages band ---------- */
.tongues { background: var(--stone-raised); border-block: 1px solid var(--stone-line); }
.tongues .wrap { padding-block: clamp(64px, 8vw, 110px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.tongues h2 { font: 500 clamp(28px, 3.6vw, 48px)/1.08 var(--display); letter-spacing: -.03em; }
.tongues .intro { display: flex; flex-direction: column; gap: 18px; }
.tongues .intro p { color: var(--bone-muted); max-width: 44ch; }
.lines { display: flex; flex-direction: column; border-top: 1px solid var(--stone-line); }
.line { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--stone-line); }
.line .label { color: var(--teal); }
.line p { font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; line-height: 1.35; }
.line p[dir="rtl"] { text-align: right; }
@media (max-width: 860px) { .tongues .wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .line { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Process ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 36px; height: 1px;
  background: linear-gradient(90deg, var(--bronze-deep), var(--teal-deep));
}
.step { position: relative; display: flex; flex-direction: column; gap: 14px; }
.step-mark {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--stone); border: 1px solid var(--bronze-deep); color: var(--bronze);
  font-size: 30px; box-shadow: 0 0 0 6px var(--stone);
}
.step .label { color: var(--bronze); }
.step h3 { font: 500 22px/1.2 var(--display); letter-spacing: -.01em; }
.step p { color: var(--bone-muted); font-size: 16px; }
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .steps::before { display: none; }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
#about { border-top: 1px solid var(--stone-line); }
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; }
.about-intro p { color: var(--bone-muted); max-width: 52ch; }
.about-intro p strong { color: var(--bone); font-weight: 500; }
.founders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.founder { display: flex; flex-direction: column; gap: 16px; }
.portrait {
  position: relative; aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--stone-line); display: grid; place-items: center;
  background: radial-gradient(90% 70% at 50% 32%, #27241f 0%, var(--stone-raised) 72%);
}
.portrait .initial {
  font: 600 clamp(110px, 13vw, 180px)/1 var(--display); color: var(--stone);
  text-shadow: 0 1px 0 rgba(237, 230, 216, .12), 0 -1px 1px rgba(0, 0, 0, .8);
}
.portrait .wedge { position: absolute; inset-inline-start: 18px; bottom: 14px; font-size: 34px; color: var(--bronze); }
.portrait .label { position: absolute; inset-inline-end: 16px; top: 14px; }
.founder-name { display: flex; flex-direction: column; gap: 4px; }
.founder h3 { font: 500 22px/1.2 var(--display); letter-spacing: -.01em; }
.founder .role { font: 400 13px/1.4 var(--mono); letter-spacing: .06em; color: var(--teal); }
.label.strokes { text-transform: none; letter-spacing: .04em; }
.founder p { color: var(--bone-muted); font-size: 16px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 5px 11px; border: 1px solid var(--stone-line); border-radius: 999px;
  font: 500 12.5px/1.4 var(--mono); color: var(--bone);
  direction: ltr; unicode-bidi: isolate; /* keeps "C#" and ".NET" intact on Arabic pages */
}
.spoken { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; border-top: 1px solid var(--stone-line); padding-top: 28px; }
.spoken ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.spoken li { display: flex; align-items: center; gap: 24px; font: 500 clamp(20px, 2.4vw, 28px)/1.3 var(--display); letter-spacing: -.01em; }
.spoken li + li::before { content: "𒁹"; font: 20px/1 var(--cune); color: var(--bronze-deep); }
@media (max-width: 860px) {
  .about-intro { grid-template-columns: 1fr; }
  .founders { grid-template-columns: 1fr; }
  .portrait { aspect-ratio: 3 / 2; }
}

/* ---------- Join us ---------- */
.join { background: var(--stone-raised); border-block: 1px solid var(--stone-line); }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.perk { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--bronze-deep); padding-top: 18px; }
.perk h3 { font: 500 20px/1.25 var(--display); letter-spacing: -.01em; }
.perk p { color: var(--bone-muted); font-size: 16px; }
.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone-line); }
.role-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .7fr); gap: 8px 24px;
  align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--stone-line);
}
.role-row h3 { font: 500 clamp(19px, 2vw, 24px)/1.25 var(--display); letter-spacing: -.01em; }
.role-row span { color: var(--bone-muted); font-size: 15px; }
.apply {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  padding: clamp(22px, 3vw, 32px); border: 1.5px dashed var(--stone-line); border-radius: var(--radius);
}
.apply div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.apply h3 { font: 500 clamp(20px, 2.2vw, 26px)/1.2 var(--display); letter-spacing: -.01em; }
.apply p { color: var(--bone-muted); max-width: 52ch; }
.apply p strong { color: var(--bone); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .perks { grid-template-columns: 1fr; }
  .role-row { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; border-top: 1px solid var(--stone-line); }
.contact .wrap { padding-block: clamp(80px, 11vw, 160px); display: flex; flex-direction: column; gap: 32px; position: relative; }
.contact h2 { font: 500 clamp(40px, 7.4vw, 108px)/1 var(--display); letter-spacing: -.04em; max-width: 12ch; }
.contact h2 em { font-style: normal; color: var(--bronze); }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.email {
  font: 500 clamp(20px, 2.6vw, 32px)/1.2 var(--display); letter-spacing: -.02em; color: var(--bone);
  text-decoration: none; border-bottom: 1px solid var(--bronze-deep); padding-bottom: 4px; overflow-wrap: anywhere;
}
.email:hover { border-color: var(--bronze); }
.copy-status { font: 500 13px/1 var(--mono); color: var(--teal); min-width: 8ch; }
.contact .ghost-sign {
  position: absolute; inset-inline-end: -2vw; bottom: -6vw; font-size: clamp(220px, 34vw, 520px);
  color: var(--stone-raised); pointer-events: none; user-select: none;
}

/* ---------- Social ---------- */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.social .label { margin-inline-end: 6px; }
.social svg, .footer-social svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--stone-line); color: var(--bone-muted);
}
.footer-social a:hover { color: var(--bronze); border-color: var(--bronze-deep); }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--stone-line); }
footer .wrap { padding-block: 48px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: start; }
footer img { width: 100%; max-width: 300px; height: auto; display: block; }
.footer-side { display: flex; flex-direction: column; gap: 24px; }
.name-note { color: var(--bone-muted); max-width: 58ch; font-size: 15.5px; }
.name-note .sign { color: var(--bronze); font-size: 20px; vertical-align: -3px; margin-inline-end: 6px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-bottom a { color: var(--bone-muted); text-decoration: none; font-size: 15px; }
.footer-bottom a:hover { color: var(--bone); }
@media (max-width: 760px) { footer .wrap { grid-template-columns: 1fr; } }

/* ---------- Arabic & Kurdish ---------- */
/* Arabic script joins its letters, so no tracking or capitals, and the Kufi forms need taller lines.
   Labels lead with Kufi too: a monospaced space leaves wide gaps between Arabic words */
:root[dir="rtl"] { --mono: "Noto Kufi Arabic", "IBM Plex Mono", ui-monospace, monospace; }
:root[dir="rtl"] :not(.brand, .brand *), :root [lang="ar"], :root [lang="ckb"] { letter-spacing: 0; }
:root[dir="rtl"] .label { text-transform: none; font-size: 13.5px; }
:root[dir="rtl"] :is(h1, h2, h3) { line-height: 1.4; }
:root[dir="rtl"] .hero h1 { line-height: 1.35; }
:root[dir="rtl"] .strip-track { animation-name: slide-rtl; }
@keyframes slide-rtl { to { transform: translateX(50%); } }
:root[dir="rtl"] .steps::before { background: linear-gradient(270deg, var(--bronze-deep), var(--teal-deep)); }
/* Set by js/i18n.js while it swaps in a translation, so English doesn't flash first */
.i18n-pending body { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; }
  .btn, .menu-btn span, .menu-btn span::before { transition: none; }
}