/* ============================================================================
   Taur — public site
   ----------------------------------------------------------------------------
   Design system transcribed from design.md: an always-dark canvas where
   hierarchy comes from white at varying opacity rather than from grey paint,
   surfaces separate by stepping the near-black ramp, and depth comes from
   blurred glows instead of stacked shadows.

   There is no light theme. That is a deliberate decision recorded in design.md,
   not an omission.

   RTL is handled with CSS logical properties throughout (margin-inline,
   padding-block, inset-inline, border-inline). One stylesheet serves both
   directions; there are no [dir="rtl"] override blocks to keep in sync.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  /* Canvas & surfaces — the near-black ramp. Nested surfaces step along it. */
  --bg: #0b0b0b;
  --surface-black: #000000;
  --surface-050: #050505;
  --surface-080: #080808;
  --surface-0a0: #0a0a0a;

  /* Text. Hierarchy is white at descending opacity, never a grey hex. */
  --text: #ffffff;
  --text-90: rgba(255, 255, 255, 0.9);
  --text-80: rgba(255, 255, 255, 0.8);
  --text-70: rgba(255, 255, 255, 0.7);
  --text-60: rgba(255, 255, 255, 0.6);
  --text-55: rgba(255, 255, 255, 0.55);
  --text-50: rgba(255, 255, 255, 0.5);
  --text-40: rgba(255, 255, 255, 0.4);
  --text-35: rgba(255, 255, 255, 0.35);
  --muted: #8f8f8f;

  /* Hairlines. Nothing in this system is heavier than white/16. */
  --line-03: rgba(255, 255, 255, 0.03);
  --line-05: rgba(255, 255, 255, 0.05);
  --line-08: rgba(255, 255, 255, 0.08);
  --line-10: rgba(255, 255, 255, 0.1);
  --line-16: rgba(255, 255, 255, 0.16);
  --line-25: rgba(255, 255, 255, 0.25);

  /* Signal colours. Semantic only — never used for body copy. */
  --emerald-500: #00bb7f;
  --emerald-400: #00d294;
  --emerald-300: #5ee9b5;
  --green-500: #00c758;
  --yellow-500: #edb200;
  --amber-500: #f99c00;
  --orange-500: #fe6e00;
  --red-500: #fb2c36;
  --blue-500: #3080ff;
  --violet-400: #a685ff;

  /* Type. Handjet carries the brand mark, Reem Kufi the headlines, Alexandria
     everything a person actually reads. All three cover Arabic and Latin from
     one drawing, so there is no seam where the wordmark meets Arabic copy and
     no language-scoped font switching anywhere below. */
  --font-wordmark: "Handjet", "Reem Kufi", system-ui, sans-serif;
  --font-display: "Reem Kufi", "Alexandria", system-ui, sans-serif;
  --font-sans: "Alexandria", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* JetBrains Mono has no Arabic glyphs. Anything mono-styled that can hold a
     translated string uses this instead — same face as body copy, so it
     disappears into the page rather than announcing itself. */
  --font-label: "Alexandria", system-ui, sans-serif;

  /* Radius */
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 9999px;

  /* Spacing */
  --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-28: 112px;

  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.15s;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-block-start: 80px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-block-size: 100vh;
  overflow-x: hidden;
}

/* Arabic sits on a taller body than Latin — ascenders and descenders travel
   further, and dots sit above and below the line — so 1.625 crowds it. This
   only moves the inherited default; headings and buttons set their own. */
body:lang(ar) {
  line-height: 1.85;
}

::selection {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

img,
svg,
video {
  display: block;
  max-inline-size: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Anyone navigating by keyboard must be able to see where they are. */
:focus-visible {
  outline: 2px solid var(--emerald-400);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Typography ───────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Arabic does not take negative tracking well — the letters join, and pulling
   them together muddies the joins rather than tightening the line. Reem Kufi
   also carries taller ascenders than the Latin faces this replaced, so the
   leading goes up with it. */
h1:lang(ar),
h2:lang(ar),
h3:lang(ar),
h4:lang(ar) {
  letter-spacing: 0;
  line-height: 1.45;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-55);
}

/* Arabic has no case, so uppercase does nothing, and wide tracking breaks the
   cursive joins. Eyebrows in Arabic stay as written. */
.eyebrow:lang(ar) {
  font-family: var(--font-label);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.lede {
  font-size: 18px;
  line-height: 1.625;
  color: var(--text-50);
  text-wrap: pretty;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

.container--wide {
  max-inline-size: var(--container-wide);
}

.container--narrow {
  max-inline-size: var(--container-narrow);
}

.section {
  padding-block: var(--s-20);
  position: relative;
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--s-24);
  }
}

.section__head {
  text-align: center;
  max-inline-size: 720px;
  margin-inline: auto;
  margin-block-end: var(--s-12);
}

.section__head .eyebrow {
  display: block;
  margin-block-end: var(--s-3);
}

.section__head h2 {
  font-size: clamp(30px, 5vw, 48px);
  margin-block-end: var(--s-4);
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s-4);
  z-index: 100;
  background: #fff;
  color: #000;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
}

.skip-link:focus {
  inset-block-start: var(--s-3);
}

/* ── Decoration: grid + glow ──────────────────────────────────────────────── */

/* A 30px grid of 7.5%-white lines, masked radially so it fades out rather than
   ending at a hard edge. Purely decorative, hidden from assistive tech. */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(95% 90% at 50% 0, #000 0%, transparent 100%);
  mask-image: radial-gradient(95% 90% at 50% 0, #000 0%, transparent 100%);
  pointer-events: none;
}

/* Depth in this system is a blurred glow, not a drop shadow. */
.glow {
  position: absolute;
  inline-size: 600px;
  block-size: 600px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--r-pill);
  filter: blur(100px);
  pointer-events: none;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.header {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 50;
  block-size: 56px;
  background: rgba(0, 0, 0, 0.95);
  border-block-end: 1px solid var(--line-08);
}

@supports ((-webkit-backdrop-filter: blur(24px)) or (backdrop-filter: blur(24px))) {
  .header {
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
}

.header__inner {
  block-size: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

/* The wordmark is the one place Handjet appears. It needs size to resolve: the
   Latin caps read as pixel type from about 15px, but Arabic "تور" needs closer
   to 20px before the element grid is legible as a grid rather than as a
   condensed sans — hence 19px rather than the 15px this sat at before.
   Tracking stays at 0; Handjet is drawn on a matrix and spacing it out breaks
   the illusion that the letters share one. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-wordmark);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--text-90);
}

.brand__mark {
  inline-size: 26px;
  block-size: 26px;
  flex: none;
}

.nav {
  display: none;
  align-items: center;
  gap: var(--s-6);
}

@media (min-width: 768px) {
  .nav {
    display: flex;
  }
}

.nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-80);
  transition: color var(--duration) var(--ease);
}

/* Hover effects are gated behind a real pointer: iOS emulates hover on first
   tap, which would leave buttons "hovered" after the finger lifts. */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover {
    color: var(--text);
  }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ── Mobile menu ──────────────────────────────────────────────────────────── */

/* The toggle lives on small screens only; the inline nav takes over from 768px.
   It is a <details>, so opening it works with JavaScript disabled, and the
   panel links are 48px tall — comfortably above the 44px touch-target minimum
   iOS asks for. */
.menu {
  position: relative;
}

.menu__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--line-10);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-80);
  cursor: pointer;
  list-style: none;
}

.menu__toggle::-webkit-details-marker {
  display: none;
}

.menu__toggle svg {
  inline-size: 20px;
  block-size: 20px;
}

.menu__icon-close {
  display: none;
}

.menu[open] .menu__icon-open {
  display: none;
}

.menu[open] .menu__icon-close {
  display: block;
}

.menu__panel {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 56px;
  z-index: 49;
  display: none;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: rgba(5, 5, 5, 0.98);
  border-block-end: 1px solid var(--line-08);
}

@supports ((-webkit-backdrop-filter: blur(24px)) or (backdrop-filter: blur(24px))) {
  .menu__panel {
    background: rgba(5, 5, 5, 0.92);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
}

.menu[open] .menu__panel {
  display: flex;
}

.menu__panel a:not(.btn) {
  display: flex;
  align-items: center;
  min-block-size: 48px;
  padding-inline: var(--s-4);
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-80);
}

.menu__panel a:not(.btn):active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.menu__cta {
  margin-block-start: var(--s-2);
}

@media (max-width: 767px) {
  .menu__toggle {
    display: inline-flex;
  }

  /* On a touch screen every control in the header gets a finger-sized target:
     40px is the practical ceiling inside a 56px bar, and with 8px gaps the
     effective hit area clears the 44px iOS minimum. */
  .btn--sm {
    block-size: 40px;
  }

  .lang {
    block-size: 40px;
  }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

/* The primary action is always a white pill on black. It is the single
   loudest element on any page, which is why there is only ever one. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease), color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.btn--primary {
  background: #fff;
  color: #000;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border: 1px solid var(--line-10);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--line-25);
  }
}

.btn--sm {
  block-size: 32px;
  padding-inline: var(--s-4);
  font-size: 13px;
}

.btn--lg {
  block-size: 48px;
  padding-inline: var(--s-6);
  font-size: 15px;
}

.btn:active {
  transform: translateY(1px);
}

/* ── Badge & pills ────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-10);
  border-radius: var(--r-md);
  padding: 5px 12px;
  font-size: 14px;
  color: var(--text-70);
}

.dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--r-pill);
  background: var(--emerald-500);
  flex: none;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 140px var(--s-16);
  overflow: clip;
}

@media (min-width: 768px) {
  .hero {
    padding-block: 170px var(--s-20);
    /* dvh tracks the iPhone toolbar: 88vh of the *visible* viewport, not of a
       viewport that Safari has already shrunk by 100px of chrome. */
    min-block-size: 88vh;
    min-block-size: 88dvh;
  }
}

.hero__glow {
  inset-block-start: 25%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  font-size: clamp(32px, 7vw, 72px);
  margin-block: var(--s-6) var(--s-6);
  max-inline-size: 18ch;
}

.hero__lede {
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--text-50);
  max-inline-size: 60ch;
  margin-block-end: var(--s-10);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

.hero__note {
  margin-block-start: var(--s-6);
  font-size: 12px;
  color: var(--text-55);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  background: var(--surface-0a0);
  border: 1px solid var(--line-10);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: var(--line-25);
    transform: translateY(-2px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  }
}

.card__icon {
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-10);
  display: grid;
  place-items: center;
  margin-block-end: var(--s-2);
  color: var(--text-70);
}

.card h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.card p {
  font-size: 14px;
  line-height: 1.625;
  color: var(--text-55);
}

/* ── Services: registered activity code ───────────────────────────────────── */

.isic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-block-start: var(--s-3);
  padding: 3px 9px;
  border: 1px solid var(--line-10);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-40);
}

.isic:lang(ar) {
  font-family: var(--font-label);
  letter-spacing: 0;
  font-size: 11px;
}

/* ── Services: price range ────────────────────────────────────────────────── */

.price {
  margin-block-start: auto;
  padding-block-start: var(--s-4);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.price__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-40);
}

.price__label:lang(ar) {
  font-family: var(--font-label);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.price__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  /* Prices read left-to-right even in an Arabic paragraph. */
  direction: ltr;
  unicode-bidi: isolate;
}

.price__currency {
  font-size: 13px;
  color: var(--text-55);
}

/* ── Case studies ─────────────────────────────────────────────────────────── */

.case {
  background: var(--surface-0a0);
  border: 1px solid var(--line-10);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: border-color var(--duration) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .case:hover {
    border-color: var(--line-25);
  }
}

.case h3 {
  font-size: 17px;
  font-weight: 600;
}

.case__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.case__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-35);
}

.case__label:lang(ar) {
  font-family: var(--font-label);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--text-40);
}

.case__row p {
  font-size: 14px;
  color: var(--text-55);
  line-height: 1.6;
}

.case__row--outcome p {
  color: var(--emerald-300);
}

/* ── Testimonials ─────────────────────────────────────────────────────────── */

.quote {
  background: var(--surface-0a0);
  border: 1px solid var(--line-10);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.quote blockquote {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-70);
}

.quote__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: auto;
}

.quote__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.quote__role {
  font-size: 12px;
  color: var(--text-50);
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

/* Built on <details>/<summary>: keyboard-operable and announced correctly by
   screen readers with no JavaScript at all. */
.faq {
  max-inline-size: 760px;
  margin-inline: auto;
  border-block-start: 1px solid var(--line-05);
}

.faq details {
  border-block-end: 1px solid var(--line-05);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-6);
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
  list-style: none;
  transition: color var(--duration) var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .faq summary:hover {
    color: var(--text-80);
  }
}

.faq summary::after {
  content: "";
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  margin-block-start: 4px;
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
  transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(180deg);
}

.faq__answer {
  padding-block-end: var(--s-6);
  font-size: 15px;
  color: var(--text-55);
  line-height: 1.7;
  max-inline-size: 65ch;
}

:root {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Contact form ─────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}

@media (min-width: 900px) {
  .contact {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.form {
  background: var(--surface-0a0);
  border: 1px solid var(--line-10);
  border-radius: var(--r-2xl);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 768px) {
  .form {
    padding: var(--s-8);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field--pair {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 560px) {
  .field--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-80);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.label__hint {
  font-size: 11px;
  color: var(--text-40);
  font-weight: 400;
}

.input,
.select,
.textarea {
  inline-size: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-10);
  border-radius: var(--r-md);
  padding: 10px 14px;
  /* 16px is the floor iOS Safari will not auto-zoom on. Below it, focusing a
     field zooms the whole page in. */
  font-size: 16px;
  color: var(--text);
  transition: border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-35);
}

@media (hover: hover) and (pointer: fine) {
  .input:hover,
  .select:hover,
  .textarea:hover {
    border-color: var(--line-16);
  }
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--line-25);
  background: rgba(255, 255, 255, 0.05);
}

.textarea {
  min-block-size: 130px;
  resize: vertical;
  line-height: 1.6;
}

.select {
  appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-inline-end: 40px;
}

[dir="rtl"] .select {
  background-position: left 12px center;
  padding-inline-end: 14px;
  padding-inline-start: 40px;
}

.select option {
  background: var(--surface-080);
  color: var(--text);
}

/* The honeypot must be reachable by a bot parsing the DOM but invisible and
   unreachable for a person — including anyone navigating by keyboard, which is
   why it is not simply display:none. */
.honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Contact aside ────────────────────────────────────────────────────────── */

.contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.contact__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-10);
  border-radius: var(--r-lg);
  transition: border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .contact__link:hover {
    border-color: var(--line-25);
    background: rgba(255, 255, 255, 0.05);
  }
}

.contact__link svg {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  color: var(--text-60);
}

.contact__link-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.contact__link-label {
  font-size: 11px;
  color: var(--text-40);
}

.contact__link-value {
  font-size: 14px;
  color: var(--text-80);
  overflow-wrap: anywhere;
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */

.alert {
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  font-size: 14px;
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  border: 1px solid;
}

.alert--success {
  background: rgba(0, 187, 127, 0.08);
  border-color: rgba(0, 187, 127, 0.3);
  color: var(--emerald-300);
}

.alert--error {
  background: rgba(251, 44, 54, 0.08);
  border-color: rgba(251, 44, 54, 0.3);
  color: #ffa3a3;
}

.alert strong {
  display: block;
  margin-block-end: 2px;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.footer {
  border-block-start: 1px solid var(--line-05);
  padding-block: var(--s-16) var(--s-8);
  margin-block-start: var(--s-16);
}

.footer__grid {
  display: grid;
  gap: var(--s-10);
  margin-block-end: var(--s-12);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer__tagline {
  color: var(--muted);
  max-inline-size: 38ch;
  margin-block-start: var(--s-4);
  font-size: 14px;
}

.footer__cr {
  margin-block-start: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-40);
  letter-spacing: 0.05em;
}

.footer__cr:lang(ar) {
  font-family: var(--font-label);
  letter-spacing: 0;
  font-size: 12px;
}

.footer h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-80);
  margin-block-end: var(--s-5);
  font-weight: 400;
}

.footer h4:lang(ar) {
  font-family: var(--font-label);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
}

.footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.footer a {
  display: inline-block;
  padding-block: var(--s-1);
  color: var(--muted);
  font-size: 14px;
  transition: color var(--duration) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .footer a:hover {
    color: var(--text-90);
  }
}

.footer__bottom {
  border-block-start: 1px solid var(--line-05);
  padding-block-start: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}

/* ── Language switcher ────────────────────────────────────────────────────── */

.lang {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  block-size: 32px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line-10);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-80);
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .lang:hover {
    border-color: var(--line-25);
    color: var(--text);
  }
}

/* ── Legal & error pages ──────────────────────────────────────────────────── */

.prose {
  max-inline-size: 70ch;
  margin-inline: auto;
  padding-block: 140px var(--s-16);
}

.prose h1 {
  font-size: clamp(28px, 5vw, 44px);
  margin-block-end: var(--s-3);
}

.prose h2 {
  font-size: 20px;
  margin-block: var(--s-10) var(--s-3);
  color: var(--text-90);
}

.prose p,
.prose li {
  color: var(--text-55);
  font-size: 15px;
  line-height: 1.8;
  margin-block-end: var(--s-3);
}

.prose ul,
.prose ol {
  padding-inline-start: var(--s-6);
}

.prose__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-35);
  letter-spacing: 0.05em;
  margin-block-end: var(--s-10);
}

.prose__meta:lang(ar) {
  font-family: var(--font-label);
  letter-spacing: 0;
  font-size: 12px;
}

.error-page {
  min-block-size: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-4);
  padding-block: 140px var(--s-16);
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-35);
}

.error-page h1 {
  font-size: clamp(28px, 6vw, 48px);
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.fade-up {
  opacity: 0;
  animation: fade-up 0.8s var(--ease-out) forwards;
}

.d-1 { animation-delay: 50ms; }
.d-2 { animation-delay: 100ms; }
.d-3 { animation-delay: 180ms; }
.d-4 { animation-delay: 250ms; }
.d-5 { animation-delay: 300ms; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.dot--live {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Utilities ────────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Numbers, IBANs, phone numbers and dates read left-to-right regardless of the
   surrounding paragraph direction. Without isolation, a "+" or a hyphen at the
   edge of the run gets reordered by the bidi algorithm and lands on the wrong
   side. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.mono {
  font-family: var(--font-mono);
}