/* ============================================================================
   Yora Ads — public site
   ----------------------------------------------------------------------------
   The Taur design system, re-coloured for an advertising agency: the same
   layout, components and spacing, set on a warm cream canvas instead of
   near-black.

   Hierarchy still comes from one ink at varying opacity rather than from a
   collection of greys — the ink is cocoa instead of white. Surfaces separate
   by stepping between cream and milk, and depth comes from soft pastel blobs
   rather than stacked shadows.

   Every colour the palette controls lives in the first token block. Swapping
   to another flavour is a matter of changing that block and nothing else —
   plus the literal colours in favicon.svg and og.svg, which cannot read CSS.

   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 {
  color-scheme: light;

  /* ── Palette: peach & caramel ─────────────────────────────────────────── */
  --cream: #fff8ef;           /* page canvas */
  --milk: #fffdf9;            /* cards, inputs, raised surfaces */
  --cream-deep: #fcf1e3;      /* banded sections */
  --ink-rgb: 46 31 24;        /* cocoa: all text and hairlines, at varying alpha */
  --accent: #ee8a68;          /* the primary action — peach */
  --accent-hover: #e8774f;
  --on-accent: #2e1f18;       /* text and icons on the accent */
  --accent-strong: #b4532f;   /* the accent as text or a focus ring on cream (AA) */
  --accent-2: #d9a066;        /* caramel — decoration only, never text */
  --blush: #f9d9cb;           /* the headline marker and the hero blobs */
  --tint: #fcebdd;            /* icon chips and soft pills */
  --shadow-rgb: 122 72 40;    /* warm brown, so a shadow reads as depth, not dirt */

  /* Canvas & surfaces. */
  --bg: var(--cream);
  --surface: var(--milk);
  --surface-sunk: var(--cream-deep);

  /* Text. One ink at descending opacity, never a grey hex. On cream the low end
     sits higher than it would on black: anything a person has to read stays at
     or above 4.5:1, which on this canvas means no lower than about 64%. */
  --text: rgb(var(--ink-rgb));
  --text-90: rgb(var(--ink-rgb) / 0.9);
  --text-80: rgb(var(--ink-rgb) / 0.82);
  --text-70: rgb(var(--ink-rgb) / 0.75);
  --text-60: rgb(var(--ink-rgb) / 0.7);
  --text-50: rgb(var(--ink-rgb) / 0.68);
  --text-40: rgb(var(--ink-rgb) / 0.64);
  --text-30: rgb(var(--ink-rgb) / 0.5);   /* placeholders and decoration only */

  /* Hairlines and washes. Nothing in this system is heavier than ink/24. */
  --line-05: rgb(var(--ink-rgb) / 0.07);
  --line-08: rgb(var(--ink-rgb) / 0.09);
  --line-10: rgb(var(--ink-rgb) / 0.11);
  --line-16: rgb(var(--ink-rgb) / 0.16);
  --line-25: rgb(var(--ink-rgb) / 0.24);
  --wash-03: rgb(var(--ink-rgb) / 0.03);
  --wash-05: rgb(var(--ink-rgb) / 0.05);
  --wash-08: rgb(var(--ink-rgb) / 0.08);

  --shadow-soft: 0 1px 2px rgb(var(--shadow-rgb) / 0.06);
  --shadow-lift: 0 22px 48px -22px rgb(var(--shadow-rgb) / 0.38);

  /* Signal colours, tuned for a light canvas. Semantic only — never decor. */
  --green-text: #1d7346;
  --green-bg: #e9f6ee;
  --green-line: #b9dfc7;
  --red-text: #b42318;
  --red-bg: #fdeceb;
  --red-line: #f4c5c0;
  --amber-text: #8f5300;
  --amber-bg: #fdf1dc;
  --amber-line: #f0d29b;
  --blue-text: #1f58b5;
  --blue-bg: #eaf1fd;
  --blue-line: #bed3f5;

  /* Type. Baloo Bhaijaan 2 carries the wordmark and the headlines — rounded,
     warm, and drawn for Arabic and Latin together, so the brand reads the same
     in both. Alexandria sets everything a person actually reads. */
  --font-wordmark: "Baloo Bhaijaan 2", "Alexandria", system-ui, sans-serif;
  --font-display: "Baloo Bhaijaan 2", "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 label-styled that can hold
     a translated string uses this instead. */
  --font-label: "Alexandria", system-ui, sans-serif;

  /* Radius. Softer than Taur's — cream wants round corners. */
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --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;

  /* Chevrons for the FAQ (used as a mask, so only the shape matters) and for
     <select> (drawn as an image, so it carries the ink colour itself). */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --chevron-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e1f18' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── 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: var(--blush);
  color: var(--text);
}

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. The
   strong accent, not the pastel one: peach on cream is too faint to find. */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  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.15;
  letter-spacing: -0.015em;
  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. Baloo's
   Arabic also stacks taller than its Latin, 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.5;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

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

.lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-60);
  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);
  }
}

/* A band of deeper cream, for a section that should read as a pause between
   two white-card sections rather than as more of the same. */
.section--band {
  background: var(--surface-sunk);
  border-block: 1px solid var(--line-05);
}

.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: var(--text);
  color: var(--cream);
  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 + blobs ─────────────────────────────────────────────── */

/* A 30px grid of faint ink 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, rgb(var(--ink-rgb) / 0.045) 1px, transparent 1px),
    linear-gradient(rgb(var(--ink-rgb) / 0.045) 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 soft pastel blob, not a drop shadow. Two of them,
   in the palette's blush and caramel, sit behind the hero like icing. */
.blob {
  position: absolute;
  border-radius: var(--r-pill);
  filter: blur(70px);
  pointer-events: none;
}

.blob--one {
  inline-size: 520px;
  block-size: 520px;
  inset-block-start: -140px;
  inset-inline-end: -120px;
  background: var(--blush);
  opacity: 0.9;
}

.blob--two {
  inline-size: 420px;
  block-size: 420px;
  inset-block-end: -120px;
  inset-inline-start: -140px;
  background: var(--accent-2);
  opacity: 0.32;
}

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

.header {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 50;
  block-size: 64px;
  background: rgb(255 248 239 / 0.96);
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  border-block-end: 1px solid var(--line-08);
}

@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .header {
    background: color-mix(in srgb, var(--cream) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
  }
}

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

/* The wordmark. Baloo needs a little size to show its roundness: Arabic
   "يورا أدز" reads as the brand from about 20px, below that as body text. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-wordmark);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--text);
}

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

.brand__bubble {
  fill: var(--accent);
}

.brand__y {
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

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

.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-70);
  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 900px.
   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: var(--surface);
  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: 64px;
  z-index: 49;
  display: none;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--cream);
  border-block-end: 1px solid var(--line-08);
  box-shadow: var(--shadow-lift);
}

.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: var(--wash-05);
  color: var(--text);
}

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

@media (max-width: 899px) {
  .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 64px bar, and with 8px gaps the
     effective hit area clears the 44px iOS minimum. */
  .btn--sm {
    block-size: 40px;
  }

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

/* The header's quote button is a duplicate of the hero's on a phone, where
   the bar has room for the language switch and the menu but not all three. */
@media (max-width: 479px) {
  .header__actions > .btn {
    display: none;
  }
}

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

/* The primary action is a peach pill with cocoa text. 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: 600;
  border-radius: var(--r-pill);
  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), box-shadow var(--duration) var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 20px -10px rgb(var(--shadow-rgb) / 0.55);
}

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-16);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--accent-hover);
  }

  .btn--ghost:hover {
    background: var(--milk);
    border-color: var(--line-25);
  }
}

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

.btn--lg {
  block-size: 50px;
  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: var(--surface);
  border: 1px solid var(--line-10);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 14px;
  color: var(--text-70);
  box-shadow: var(--shadow-soft);
}

.dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  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__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  font-size: clamp(36px, 6.4vw, 76px);
  margin-block: var(--s-6) var(--s-6);
  /* Two lines on a laptop. Baloo's figures are wide, so a "ch" here is wider
     than in a narrow face; 16ch, which suited Taur, broke this into three. */
  max-inline-size: 21ch;
}

/* The highlighted word: a blush marker stroke behind the text. clone keeps
   the rounded ends on every line if the word ever wraps. The trailing side is
   tighter than the leading one so punctuation after the word stays attached. */
.hl {
  background: var(--blush);
  color: inherit;
  border-radius: 0.3em;
  padding-block: 0;
  padding-inline: 0.16em 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__lede {
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--text-60);
  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: 13px;
  color: var(--text-50);
}

/* ── Hero: platforms ──────────────────────────────────────────────────────── */

.platforms {
  margin-block-start: var(--s-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.platforms__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-40);
}

.platforms__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}

.platforms__list li {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--milk) 70%, transparent);
  border: 1px solid var(--line-08);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-70);
}

/* ── 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);
  border: 1px solid var(--line-08);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  box-shadow: var(--shadow-soft);
  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-16);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
}

.card__icon {
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--r-lg);
  background: var(--tint);
  display: grid;
  place-items: center;
  margin-block-end: var(--s-2);
  color: var(--accent-strong);
}

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

.card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

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

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

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

.price__label {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-40);
}

.price__value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  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-60);
  white-space: nowrap;
}

.price__period {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-strong);
}

/* ── Services: groups ─────────────────────────────────────────────────────── */

/* The group shortcuts under the section head. Plain anchors — they work
   without JavaScript and each group heading is a real link target. */
.jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-block: calc(-1 * var(--s-4)) var(--s-12);
}

.jump__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 40px;
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-10);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-80);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.jump__icon {
  display: grid;
  color: var(--accent-strong);
}

.jump__icon svg {
  inline-size: 16px;
  block-size: 16px;
}

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

.svc-group + .svc-group {
  margin-block-start: var(--s-16);
}

.svc-group__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
}

.svc-group__icon {
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--on-accent);
}

.svc-group__icon svg {
  inline-size: 24px;
  block-size: 24px;
}

.svc-group__head h3 {
  font-size: clamp(22px, 3vw, 28px);
}

.svc-group__head p {
  margin-block-start: var(--s-1);
  font-size: 15px;
  color: var(--text-60);
  max-inline-size: 70ch;
}

.services__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  max-inline-size: 820px;
  margin: var(--s-16) auto 0;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-xl);
  background: var(--tint);
  border: 1px solid var(--line-05);
}

.services__note svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  margin-block-start: 3px;
  color: var(--accent-strong);
}

.services__note p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-80);
}

.services__custom {
  margin-block-start: var(--s-6);
  text-align: center;
  font-size: 15px;
}

.services__custom a {
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-strong) 35%, transparent);
  text-underline-offset: 4px;
}

/* ── How we work ──────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  counter-reset: step;
}

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

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

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

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-08);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  box-shadow: var(--shadow-soft);
}

.step__num {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin-block-end: var(--s-2);
}

/* "Step 3" is for screen readers that announce list items without numbers,
   and for anyone reading the text alone; the big numeral carries it visually. */
.step__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-40);
}

.step h3 {
  font-size: 18px;
  font-weight: 700;
}

.step p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-60);
}

/* ── Why Yora ─────────────────────────────────────────────────────────────── */

.perk {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line-08);
  box-shadow: var(--shadow-soft);
}

.perk__icon {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--blush);
  color: var(--accent-strong);
  margin-block-end: var(--s-2);
}

.perk__icon svg {
  inline-size: 22px;
  block-size: 22px;
}

.perk h3 {
  font-size: 18px;
  font-weight: 700;
}

.perk p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-60);
}

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

/* Built on <details>/<summary>: keyboard-operable and announced correctly by
   screen readers with no JavaScript at all. */
.faq {
  max-inline-size: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--line-08);
  border-radius: var(--r-xl);
  padding-inline: var(--s-6);
  transition: border-color var(--duration) var(--ease);
}

.faq details[open] {
  border-color: var(--line-16);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  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(--accent-strong);
  }
}

.faq summary::after {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  margin-block-start: 4px;
  background: currentColor;
  opacity: 0.6;
  -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-60);
  line-height: 1.8;
  max-inline-size: 68ch;
}

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

.contact {
  position: relative;
  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);
  border: 1px solid var(--line-08);
  border-radius: var(--r-2xl);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
  box-shadow: var(--shadow-lift);
}

@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: 600;
  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: var(--cream);
  border: 1px solid var(--line-16);
  border-radius: var(--r-md);
  padding: 11px 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), box-shadow var(--duration) var(--ease);
}

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

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

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-strong);
  background: var(--milk);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

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

.select {
  appearance: none;
  background-image: var(--chevron-ink);
  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(--milk);
  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: var(--surface);
  border: 1px solid var(--line-08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  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: var(--milk);
  }
}

.contact__link svg {
  inline-size: 38px;
  block-size: 38px;
  flex: none;
  padding: 9px;
  border-radius: var(--r-md);
  background: var(--tint);
  color: var(--accent-strong);
}

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

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

.contact__link-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-90);
  overflow-wrap: anywhere;
}

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

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

.alert--success {
  background: var(--green-bg);
  border-color: var(--green-line);
  color: var(--green-text);
}

.alert--error {
  background: var(--red-bg);
  border-color: var(--red-line);
  color: var(--red-text);
}

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

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

.footer {
  background: var(--surface-sunk);
  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 1.2fr;
  }
}

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

.footer__cr {
  margin-block-start: var(--s-4);
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--text-50);
}

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

.footer h4:lang(ar) {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

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

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

@media (hover: hover) and (pointer: fine) {
  .footer a:not(.brand):hover {
    color: var(--accent-strong);
  }
}

.footer__bottom {
  border-block-start: 1px solid var(--line-08);
  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(--text-50);
}

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

.lang {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  block-size: 36px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line-10);
  background: var(--surface);
  border-radius: var(--r-pill);
  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: 72ch;
  margin-inline: auto;
  padding-block: 140px var(--s-16);
}

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

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

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

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

.prose strong {
  color: var(--text);
}

/* Cross-references between the legal pages. The base reset strips links to
   plain text, so these get the strong accent and an underline back. */
.prose a:not(.btn) {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose__meta {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--text-50);
  margin-block-end: var(--s-10);
}

.error-page {
  position: relative;
  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-display);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.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);
}