@charset "UTF-8";

/* ============================================================
   SALMARK — one stylesheet.
   Written with logical properties throughout, so the same rules
   drive the Arabic (RTL) and English (LTR) documents.
   ============================================================ */

/* ---------- tokens ---------- */

:root {
  /* The eight petals of the mark. Every accent below descends from these. */
  --p1: #f6a623;
  --p2: #f2622b;
  --p3: #e1252f;
  --p4: #d81b60;
  --p5: #c2158c;
  --p6: #8e2dbe;
  --p7: #5b34c4;
  --p8: #1e7fd4;
  --spectrum: linear-gradient(90deg, var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), var(--p6), var(--p7), var(--p8));

  --paper: #f2f3f8;
  --surface: #ffffff;
  --surface-2: #fafbfe;
  --ink: #151934;
  --ink-2: #545b7d;
  --ink-3: #7f86a6;
  --line: rgba(21, 25, 52, 0.12);
  --line-soft: rgba(21, 25, 52, 0.07);
  --shadow: 0 1px 2px rgba(21, 25, 52, 0.05), 0 12px 34px -18px rgba(21, 25, 52, 0.28);
  --btn-ink: #ffffff;

  --display: "Archivo", "Segoe UI", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --r: 14px;
  --r-sm: 9px;
}

[dir="rtl"] {
  --display: "Noto Kufi Arabic", "Archivo", sans-serif;
  --body: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
}

[data-theme="dark"] {
  --paper: #0d1030;
  --surface: #161a3c;
  --surface-2: #1b2047;
  --ink: #e9ebf6;
  --ink-2: #a3aacb;
  --ink-3: #7d85ab;
  --line: rgba(233, 235, 246, 0.15);
  --line-soft: rgba(233, 235, 246, 0.08);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px -22px rgba(0, 0, 0, 0.85);
  --btn-ink: #0d1030;
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

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

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 1rem;
  z-index: 100;
  background: var(--ink);
  color: var(--btn-ink);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.skip:focus { inset-block-start: 1rem; }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 1.1rem;
}
[dir="rtl"] .eyebrow {
  font-family: var(--body);
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.lnk {
  font-weight: 600;
  border-block-end: 1px solid var(--line);
  padding-block-end: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.lnk:hover { border-color: var(--p8); color: var(--p8); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s, background 0.2s, border-color 0.2s, color 0.2s;
}
.btn--solid { background: var(--ink); color: var(--btn-ink); }
.btn--solid:hover { transform: translateY(-2px); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

/* ---------- header ---------- */

.hdr {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid var(--line-soft);
}

.hdr__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.7rem var(--gut);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.logo__word {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  direction: ltr;
}
.logo__a { position: relative; }
.logo__a::after {
  content: "";
  position: absolute;
  inset-block-end: 0.06em;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  border-inline: 0.12em solid transparent;
  border-block-end: 0.15em solid var(--wedge);
}
.logo:hover .mark { transform: rotate(45deg); }
.logo .mark { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: auto;
}
.nav__link {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.2s, background 0.2s;
}
.nav__link:hover { color: var(--ink); background: var(--line-soft); }
.nav__link.is-active { color: var(--ink); font-weight: 600; }
.nav__link--cta {
  border: 1px solid var(--line);
  color: var(--ink);
  margin-inline-start: 0.3rem;
}
.nav__link--cta:hover { border-color: var(--ink); background: transparent; }

.hdr__tools { display: flex; align-items: center; gap: 0.4rem; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 34px;
  padding-inline: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pill:hover { border-color: var(--ink-2); }
.pill--lang { font-family: var(--body); letter-spacing: 0.02em; }

.pill__sun {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset -4px -3px 0 0 var(--paper);
  transition: box-shadow 0.3s, background 0.3s;
}
[data-theme="dark"] .pill__sun {
  box-shadow: inset 0 0 0 0 var(--paper);
  background: var(--p1);
}

.pill--menu { display: none; flex-direction: column; gap: 4px; }
.pill--menu span {
  display: block;
  width: 15px;
  height: 1.6px;
  background: var(--ink);
  transition: transform 0.25s;
}

/* ---------- the mark and the dial ---------- */

.mark { display: block; }
.mark__spin { transform-origin: 50% 50%; animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.dial { width: 100%; height: auto; overflow: visible; }
.dial__ring { stroke: var(--line); }
.dial__mark { transform-origin: 50% 50%; animation: spin 140s linear infinite; }
.dial__tick { transition: opacity 0.35s, stroke-width 0.35s; }
.dial__arc { transition: opacity 0.35s; }
.dial.is-focused .dial__tick { opacity: 0.16; }
.dial.is-focused .dial__arc { opacity: 0.08; }
.dial.is-focused .dial__tick.is-lit { opacity: 1; stroke-width: 9; }
.dial.is-focused .dial__arc.is-lit { opacity: 0.6; }

/* ---------- hero ---------- */

.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) 0; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__h {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4.3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-block-end: 1rem;
  max-width: 16ch;
}
[dir="rtl"] .hero__h { letter-spacing: 0; line-height: 1.42; max-width: 17ch; }

/* One segment per service, in catalogue order. The headline sits on the
   whole spectrum rather than being coloured by it. */
.hero__rule {
  display: flex;
  gap: 3px;
  max-width: 30rem;
  margin-block-start: 0.4rem;
}
.hero__rule i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--c);
  transform: scaleY(0.25);
  opacity: 0;
  animation: seg 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(360ms + var(--n) * 28ms);
}
@keyframes seg { to { transform: none; opacity: 1; } }

.hero__lead {
  font-size: clamp(1.02rem, 1.5vw, 1.17rem);
  color: var(--ink-2);
  max-width: 48ch;
  margin-block: 1.9rem 2rem;
}

.hero__acts { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.hero__dial { margin: 0; }
.hero__dial figcaption {
  margin-block-start: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.6;
}
[dir="rtl"] .hero__dial figcaption { font-family: var(--body); font-size: 0.8rem; }

/* ---------- stat rail ---------- */

.rail {
  margin-block: clamp(2.5rem, 6vw, 4.5rem) 0;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 3rem);
}
.rail__stat { display: flex; align-items: baseline; gap: 0.65rem; }
.rail__stat b {
  font-family: var(--mono);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
[dir="rtl"] .rail__stat b { font-family: var(--body); font-weight: 600; }
.rail__stat span { font-size: 0.88rem; color: var(--ink-2); }
.rail__sep { flex: 1; height: 1px; background: var(--line); min-width: 12px; }
.rail__modes {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
[dir="rtl"] .rail__modes { font-family: var(--body); letter-spacing: 0; font-size: 0.85rem; }

/* ---------- generic section ---------- */

.sec { padding-block: clamp(3.5rem, 9vw, 7rem); }
.sec--alt { background: var(--surface-2); border-block: 1px solid var(--line-soft); }

.sec__head { max-width: 62ch; margin-block-end: clamp(2rem, 4vw, 3.2rem); }
.sec__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
}
[dir="rtl"] .sec__h { letter-spacing: 0; line-height: 1.4; }
.sec__p { margin-block-start: 0.9rem; color: var(--ink-2); font-size: 1.02rem; }
.sec__more { margin-block-start: 2.2rem; }

/* ---------- tracks ledger ---------- */

.tracks { border-block-start: 1px solid var(--line); }

.track {
  position: relative;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-block-end: 1px solid var(--line);
  transition: background 0.3s;
}
.track:hover { background: color-mix(in srgb, var(--from) 5%, transparent); }

.track__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: start;
}

.track__num {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--from);
  padding-block-start: 0.45rem;
}

.track__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
[dir="rtl"] .track__title { letter-spacing: 0; line-height: 1.45; }
.track__title a { transition: color 0.2s; }
.track__title a:hover { color: var(--from); }

.track__lead {
  margin-block-start: 0.6rem;
  color: var(--ink-2);
  font-size: 0.98rem;
  max-width: 58ch;
}

.track__count { text-align: center; padding-block-start: 0.2rem; }
.track__count b {
  display: block;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--to);
}
.track__count small {
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[dir="rtl"] .track__count small { letter-spacing: 0; text-transform: none; }

.track__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.4rem 1.6rem;
  margin-block-start: 1.5rem;
  padding-inline-start: 3.1rem;
}
.track__list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.34rem;
  font-size: 0.92rem;
  color: var(--ink-2);
  transition: color 0.2s;
}
.track__list a:hover { color: var(--ink); }
.track__list i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
  flex-shrink: 0;
}

.track__bar {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--from), var(--to));
  transition: width 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.track:hover .track__bar { width: 100%; }

/* ---------- programmes ---------- */

.progs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.prog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s, border-color 0.3s;
}
.prog:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.prog__art {
  position: relative;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  background: var(--surface-2);
  border-block-end: 1px solid var(--line-soft);
}
.prog__art picture { position: absolute; inset: 0; display: block; }
.prog__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.prog:hover .prog__art img { transform: scale(1.04); }

/* The code sits on artwork of any brightness, so it carries its own scrim. */
.prog__code {
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-start: 0.95rem;
  z-index: 1;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 82%, #0d1030);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.prog__body { padding: 1.5rem clamp(1.1rem, 2vw, 1.6rem) 1.6rem; display: flex; flex-direction: column; flex: 1; }
.prog__tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 0.6rem;
}
[dir="rtl"] .prog__tag { font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: 0.8rem; font-weight: 600; }
.prog__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
[dir="rtl"] .prog__title { letter-spacing: 0; line-height: 1.5; }
.prog__lead { margin-block-start: 0.65rem; color: var(--ink-2); font-size: 0.95rem; }
.prog__text { margin-block-start: 0.8rem; color: var(--ink-2); font-size: 0.95rem; }

.prog__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: auto;
  padding-block-start: 1.3rem;
}
.prog__facts li {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}
[dir="rtl"] .prog__facts li { font-family: var(--body); font-size: 0.78rem; }

.progs--full { grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-block-end: clamp(3rem, 6vw, 5rem); }
.progs--full .prog { flex-direction: row; align-items: stretch; }
.progs--full .prog__art { flex: 0 0 40%; aspect-ratio: auto; min-height: 340px; border-block-end: 0; border-inline-end: 1px solid var(--line-soft); }
.progs--full .prog__body { padding: clamp(1.6rem, 3vw, 2.6rem); justify-content: center; }
.progs--full .prog__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

/* ---------- method steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.step {
  background: var(--surface);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  position: relative;
}
.step::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.step:hover::before { transform: scaleX(1); }
.step__num {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.step__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.18rem;
  margin-block: 0.7rem 0.55rem;
  letter-spacing: -0.015em;
}
[dir="rtl"] .step__title { letter-spacing: 0; }
.step__body { color: var(--ink-2); font-size: 0.94rem; }

/* ---------- cta band ---------- */

.cta { position: relative; background: var(--surface); border-block-start: 1px solid var(--line); }
.cta::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  height: 2px;
  background: var(--spectrum);
}
.cta__inner { padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.cta__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin-inline: auto;
}
[dir="rtl"] .cta__h { letter-spacing: 0; line-height: 1.45; max-width: 26ch; }
.cta__p {
  margin: 1rem auto 2rem;
  max-width: 54ch;
  color: var(--ink-2);
}
.cta__acts { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }

.ico { flex-shrink: 0; }
.btn--wa .ico { color: #25d366; }
.aside__wa { width: 100%; margin-block-end: 1.1rem; }

/* ---------- page head ---------- */

.phead { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); }
.phead--tight { padding-block-end: clamp(1.5rem, 3vw, 2rem); }
.phead__h {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 20ch;
}
[dir="rtl"] .phead__h { letter-spacing: 0; line-height: 1.32; max-width: 24ch; }
.phead__lead {
  margin-block-start: 1.3rem;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 2rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: border-color 0.2s, color 0.2s;
}
.chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--from), var(--to));
}
.chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--from) 55%, var(--line)); }

/* ---------- service ledger ---------- */

.ledger { padding-block-end: clamp(3rem, 6vw, 5rem); }

.svcblock { padding-block-start: clamp(2rem, 5vw, 3.5rem); scroll-margin-block-start: 96px; }

.svcblock__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem clamp(1rem, 3vw, 2rem);
  padding-block-end: 1.4rem;
  border-block-end: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--from), var(--to)) 1;
}
.svcblock__num {
  grid-row: span 2;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--from);
  padding-block-start: 0.5rem;
}
.svcblock__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
[dir="rtl"] .svcblock__h { letter-spacing: 0; line-height: 1.4; }
.svcblock__lead { color: var(--ink-2); max-width: 62ch; font-size: 0.98rem; }

.svcblock__list { display: grid; }

.svc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 2.5vw, 2rem);
  align-items: center;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-block-end: 1px solid var(--line-soft);
  scroll-margin-block-start: 96px;
  position: relative;
  transition: background 0.25s;
}
.svc::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--gut) * -1);
  width: 3px;
  background: var(--c);
  opacity: 0;
  transition: opacity 0.25s;
}
.svc:hover { background: color-mix(in srgb, var(--c) 5%, transparent); }
.svc:hover::before { opacity: 1; }
.svc:target { background: color-mix(in srgb, var(--c) 9%, transparent); }
.svc:target::before { opacity: 1; }

.svc__n {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c);
  min-width: 2.2rem;
  padding-block-start: 0.15rem;
  align-self: start;
}
.svc__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
[dir="rtl"] .svc__title { letter-spacing: 0; line-height: 1.55; }
.svc__blurb { margin-block-start: 0.35rem; color: var(--ink-2); font-size: 0.94rem; max-width: 72ch; }

.svc__cta {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-2);
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.svc:hover .svc__cta { background: var(--c); border-color: var(--c); color: #fff; transform: scale(1.06); }

/* ---------- about ---------- */

.markline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 54rem;
  margin-inline: auto;
}
.markline__art { display: grid; place-items: center; }
.markline__cap {
  color: var(--ink-2);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  max-width: 52ch;
  line-height: 1.75;
}

.prins, .auds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.prin, .aud {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  border-block-start: 3px solid var(--accent);
  transition: transform 0.3s, box-shadow 0.3s;
}
.prin:hover, .aud:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.prin__t, .aud__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.13rem;
  line-height: 1.3;
  margin-block-end: 0.65rem;
  letter-spacing: -0.015em;
}
[dir="rtl"] .prin__t, [dir="rtl"] .aud__t { letter-spacing: 0; line-height: 1.5; }
.prin__b, .aud__b { color: var(--ink-2); font-size: 0.95rem; }

/* ---------- request form ---------- */

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block-end: clamp(3.5rem, 8vw, 6rem);
}

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.3rem, 3vw, 2.4rem);
}

.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.fset { padding-block-end: clamp(1.5rem, 3vw, 2.2rem); }
.fset + .fset { border-block-start: 1px solid var(--line-soft); padding-block-start: clamp(1.5rem, 3vw, 2.2rem); }

.fset__legend {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  margin-block-end: 1.4rem;
  padding: 0;
}
[dir="rtl"] .fset__legend { letter-spacing: 0; }
.fset__legend span {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}

.fset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.2rem; }
.fset__legend { grid-column: 1 / -1; }
.field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }

.label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.label em, .tick em { color: var(--p3); font-style: normal; }
.hint { font-size: 0.84rem; color: var(--ink-3); margin-block-end: 0.4rem; }

.input {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s;
}
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--p8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p8) 18%, transparent); }
.input--area { resize: vertical; min-height: 140px; line-height: 1.65; }
.input[aria-invalid="true"] { border-color: var(--p3); }
select.input { appearance: none; cursor: pointer; padding-inline-end: 2rem; }

.seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  align-self: start;
}
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg__opt span {
  display: block;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.22s, color 0.22s;
}
.seg__opt input:checked + span { background: var(--ink); color: var(--btn-ink); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--p8); outline-offset: 2px; }

.pickers { display: grid; gap: 0.9rem; }
.picker {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.9rem 1rem 1rem;
  background: var(--paper);
}
.picker__legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0 0.3rem;
  margin-inline-start: -0.3rem;
}
.picker__legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--from), var(--to));
}
.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.15rem 1rem;
  margin-block-start: 0.6rem;
}

.tick { display: flex; align-items: start; gap: 0.6rem; padding-block: 0.35rem; cursor: pointer; font-size: 0.9rem; color: var(--ink-2); }
.tick input {
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  flex-shrink: 0;
  margin-block-start: 0.18rem;
  border: 1px solid var(--ink-3);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.tick input:checked {
  background: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100%;
}
[data-theme="dark"] .tick input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%230d1030' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tick:hover { color: var(--ink); }
.tick input:focus-visible { outline: 2px solid var(--p8); outline-offset: 2px; }
.tick--consent { font-size: 0.92rem; }

.form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block-start: 0.4rem; }
.form__note { font-size: 0.88rem; color: var(--ink-3); }
.form__note[data-tone="error"] { color: var(--p3); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

.result { margin-block-start: 1.5rem; padding: 1.3rem 1.4rem; border-radius: var(--r-sm); border: 1px solid var(--line); }
.result h2 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; margin-block-end: 0.4rem; }
.result p { color: var(--ink-2); font-size: 0.95rem; }
.result--ok { border-inline-start: 3px solid var(--p8); background: color-mix(in srgb, var(--p8) 7%, transparent); }
.result--err { border-inline-start: 3px solid var(--p3); background: color-mix(in srgb, var(--p3) 7%, transparent); }
.result a { color: var(--p8); text-decoration: underline; }

.aside {
  position: sticky;
  inset-block-start: 96px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.3rem, 2.5vw, 1.8rem);
  background: var(--surface-2);
}
.aside__h { font-family: var(--display); font-size: 1.02rem; font-weight: 700; margin-block-end: 1rem; }
.aside__h--2 { margin-block-start: 1.8rem; }
.aside__steps { display: grid; gap: 1rem; }
.aside__steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.aside__steps b {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  margin-block-start: 0.18rem;
}
.aside__steps span { font-size: 0.92rem; color: var(--ink-2); }
.aside__contact { display: grid; gap: 0.35rem; font-size: 0.93rem; }
.aside__contact a { color: var(--ink); border-block-end: 1px solid var(--line); width: fit-content; }
.aside__contact a:hover { border-color: var(--p8); color: var(--p8); }
.aside__contact span { color: var(--ink-3); }

/* ---------- 404 ---------- */

.nf { padding-block: clamp(4rem, 12vw, 8rem); }
.nf__inner { display: grid; justify-items: center; text-align: center; gap: 0.4rem; }
.nf__code { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--ink-3); margin-block-start: 1.5rem; }
.nf__h { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 2.8rem); letter-spacing: -0.03em; }
[dir="rtl"] .nf__h { letter-spacing: 0; }
.nf__p { color: var(--ink-2); max-width: 46ch; margin-block: 0.8rem 1.6rem; }

/* ---------- footer ---------- */

.ftr { background: var(--paper); border-block-start: 1px solid var(--line); }
.ftr__top {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gut) clamp(2rem, 4vw, 2.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.ftr__brand { display: grid; gap: 1rem; align-content: start; }
.ftr__note { color: var(--ink-2); font-size: 0.92rem; max-width: 34ch; }
.ftr__col { display: grid; gap: 0.5rem; align-content: start; }
.ftr__h {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-block-end: 0.35rem;
}
[dir="rtl"] .ftr__h { font-family: var(--body); letter-spacing: 0; font-size: 0.8rem; font-weight: 600; }
.ftr__col a { font-size: 0.92rem; color: var(--ink-2); display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; }
.ftr__col a:hover { color: var(--ink); }
.ftr__col--tracks i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ftr__muted { font-size: 0.9rem; color: var(--ink-3); }

.ftr__bar {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.1rem var(--gut) 1.4rem;
  border-block-start: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.ftr__spectrum { flex: 1; height: 2px; border-radius: 2px; background: var(--spectrum); min-width: 60px; }

/* ---------- motion ---------- */

.reveal { animation: rise 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.rise { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); transition-delay: calc(var(--i, 0) * 55ms); }
.rise.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__dial { max-width: 440px; margin-inline: auto; order: -1; }
  .form-layout { grid-template-columns: 1fr; }
  .aside { position: static; }
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progs--full .prog { flex-direction: column; }
  .progs--full .prog__art { flex: none; aspect-ratio: 16 / 9; min-height: 0; border-inline-end: 0; border-block-end: 1px solid var(--line-soft); }
}

@media (max-width: 820px) {
  .nav {
    position: fixed;
    inset-block-start: 58px;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    padding: 0.6rem var(--gut) 1.2rem;
    margin: 0;
    transform: translateY(-130%);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
    box-shadow: var(--shadow);
  }
  .nav.is-open { transform: none; }
  .nav__link { padding: 0.75rem 0.4rem; border-radius: 0; border-block-end: 1px solid var(--line-soft); font-size: 1rem; }
  .nav__link--cta { border: 0; border-block-end: 0; margin-inline-start: 0; margin-block-start: 0.6rem; }
  .pill--menu { display: inline-flex; }
  .hdr__tools { margin-inline-start: auto; }
  .track__head { grid-template-columns: auto minmax(0, 1fr); }
  .track__count { grid-column: 2; text-align: start; display: flex; align-items: baseline; gap: 0.4rem; padding-block-start: 0.5rem; }
  .track__list { padding-inline-start: 0; }
  .fset { grid-template-columns: 1fr; }
  .markline { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ftr__top { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* Keep the dial as the opening image, but small enough that the headline
     is on screen without scrolling. */
  .hero__dial { max-width: 272px; }
  .hero__dial figcaption { margin-block-start: 0.7rem; font-size: 0.68rem; }
}

@media (max-width: 520px) {
  .svc { grid-template-columns: auto minmax(0, 1fr); }
  .svc__cta { grid-column: 2; justify-self: start; margin-block-start: 0.6rem; }
  .rail { gap: 1.2rem; }
  .rail__sep { display: none; }
  .rail__stat { flex: 1 1 40%; }
  .btn { width: 100%; }
  .hero__acts { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rise { opacity: 1; transform: none; }
}

@media print {
  .hdr, .cta, .pill, .svc__cta { display: none; }
  body { background: #fff; color: #000; }
}