/*
  Tokens are Riyaly's, taken from riyaly_app/lib/core/theme/app_colors.dart, so
  the company page and the product read as the same hand. They are repeated
  here rather than imported because this site has no build step and no
  dependency on the app — it has to keep working if the app moves on.
*/
:root {
  --green:  #1F7A5C;   /* AppColors.primary */
  --deep:   #0B3D2E;   /* AppColors.deep */
  --gold:   #D4AF37;   /* AppColors.gold */
  --paper:  #F7F5EF;   /* AppColors.paper */
  --ink:    #262628;   /* AppColors.ink */

  --bg:     var(--paper);
  --fg:     var(--ink);
  --accent: var(--green);
  /* The loom now lives only behind the hero, with no text over it, so it can
     be as strong as it wants. It was dropped to 24% when it sat behind the
     whole page and tangled with Arabic — that was treating the symptom. */
  --thread: color-mix(in srgb, var(--green) 40%, transparent);
  --rule:   color-mix(in srgb, var(--fg) 12%, transparent);
  --panel:  color-mix(in srgb, var(--paper) 70%, #fff);

  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     var(--deep);
    --fg:     #EFEDE6;
    --accent: #3FB88C;   /* AppColors.primaryTintDark — green on deep is unreadable */
    --thread: color-mix(in srgb, #3FB88C 36%, transparent);
    --rule:   color-mix(in srgb, #EFEDE6 14%, transparent);
    --panel:  color-mix(in srgb, var(--deep) 70%, #000);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky, so an anchored section must not land under it. */
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* The loom is positioned against the page, so the page is its containing
     block and it stays at the top rather than following the viewport. */
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: Tajawal, system-ui, sans-serif;
  /* 400 for Arabic, not 300. Tajawal at 300 is too fine to hold its own over
     the loom, and Arabic has no capitals to anchor a line — the whole word
     rides on the stroke, so a thin weight simply dissolves into the threads. */
  font-weight: 400;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* Latin content gets Poppins, which is sturdier at the same optical size, so
   it keeps the lighter weight. */
html[lang="en"] body {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.75;
}

/* ---- language switching ---------------------------------------------------
   Both languages ship in the markup so the page needs no round trip and reads
   correctly with JavaScript off — Arabic shows, English hides. */
html[lang="ar"] .en { display: none; }
html[lang="en"] .ar { display: none; }

/* Visible only to screen readers. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the loom -------------------------------------------------------------
   It belongs to the opening, not the page. Absolutely positioned at the top
   rather than fixed to the viewport, so it scrolls away once the reading
   starts and never sits behind a paragraph.

   --lift is set by JS: the loom travels up slightly faster than the page, so
   it reads as threads being drawn off rather than a background sliding past.
   Without JS the value stays 0 and it simply scrolls with everything else,
   which is also fine. */
.loom {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  height: min(118svh, 60rem);
  color: var(--thread);
  pointer-events: none;
  z-index: 0;
  transform: translate3d(0, calc(var(--lift, 0px) * -1), 0);
  opacity: var(--loom-fade, 1);
  will-change: transform;
  /* Fade the weave out at the bottom so the cloth ends rather than being cut,
     and slightly at the top so it does not collide with the header. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 68%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 68%, transparent);
}

/* Threads draw themselves once, slowly, like something being strung. */
.loom line {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 2.4s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .loom line { animation: none; stroke-dashoffset: 0; }
}

/* ---- layout --------------------------------------------------------------- */
.bar, main, .foot {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

.bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}
.bar.scrolled { border-bottom-color: var(--rule); }

/* ---- the mark, which is also the menu trigger ----------------------------- */
.nav { position: relative; }

.markbtn {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 0;
  padding: .25rem;
  margin-inline-start: -.25rem;
  cursor: pointer;
  color: inherit;
  border-radius: .375rem;
}
.markbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A scrap of weave standing in for a logotype. Two warp and two weft threads
   rather than one of each: a single cross reads as a plus sign. */
.wordmark {
  width: 1.375rem;
  height: 1.375rem;
  background:
    linear-gradient(var(--accent), var(--accent)) 0    30% / 100% 9% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0    64% / 100% 9% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 30%  0   / 9% 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 64%  0   / 9% 100% no-repeat;
  opacity: .85;
}

/* The chevron is what tells you the mark is a control and not just a logo. */
.chev {
  width: .4rem;
  height: .4rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
.markbtn[aria-expanded="true"] .chev {
  transform: rotate(225deg) translate(-1px, -1px);
  opacity: .9;
}

.menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + .5rem);
  margin: 0;
  padding: .375rem;
  list-style: none;
  min-width: 11rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: .625rem;
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .25);
}
.menu[hidden] { display: none; }
.menu a {
  display: block;
  padding: .5rem .75rem;
  border-radius: .375rem;
  color: var(--fg);
  text-decoration: none;
  font-size: .9375rem;
}
.menu a:hover, .menu a:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  outline: none;
}

.lang {
  font: inherit;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--fg);
  background: none;
  border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
  border-radius: 999px;
  padding: .35rem 1rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.lang:hover { border-color: var(--accent); color: var(--accent); }
.lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 10vh, 6rem);
  padding-block: clamp(3rem, 12vh, 7rem) clamp(3rem, 9vh, 5rem);
}

/* ---- hero ----------------------------------------------------------------- */
.name {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 4.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--accent);
}
html[lang="en"] .name { font-weight: 600; letter-spacing: -0.02em; }

.lede {
  margin: 1rem 0 0;
  max-width: var(--measure);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  color: color-mix(in srgb, var(--fg) 82%, transparent);
}

/* ---- sections ------------------------------------------------------------- */
.block { max-width: var(--measure); }

.block h2 {
  margin: 0 0 1.25rem;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 45%, transparent);
}
.block h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-top: .625rem;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Each item is a heading and a line of explanation, on its own thread. */
.does {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
}
.does li {
  padding-inline-start: 1rem;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.does b {
  display: block;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 700;
  line-height: 1.4;
}
html[lang="en"] .does b { font-weight: 600; }
.does li > span {
  display: block;
  margin-top: .25rem;
  font-size: 1rem;
  color: color-mix(in srgb, var(--fg) 72%, transparent);
}

.gloss {
  margin: 0;
  font-size: 1.0625rem;
  /* 78%, not 72%: secondary text still has to beat the background. */
  color: color-mix(in srgb, var(--fg) 78%, transparent);
}
.gloss em { font-style: normal; color: var(--accent); }

/* The wash that used to sit behind running text is gone. It existed to lift
   type off the threads; the threads no longer reach the text, so the panel was
   solving a problem that no longer exists and only made the page look padded. */

.claim {
  margin: 1.25rem 0 0;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 700;
  line-height: 1.4;
}
html[lang="en"] .claim { font-weight: 600; }

.mailto {
  margin: 1rem 0 0;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
}
.mailto a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ---- footer --------------------------------------------------------------- */
.foot {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
}

.foot dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem 2rem;
}
.foot dt {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
}
.foot dd { margin: .3rem 0 0; }
.foot a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Numbers are data, not prose: keep them LTR even on the Arabic page. */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }