/* Kites Development theme. Components reference tokens only. */

@font-face { font-family: "Parkinsans"; src: url("/_theme/1/assets/fonts/kites/parkinsans-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Parkinsans"; src: url("/_theme/1/assets/fonts/kites/parkinsans-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Parkinsans"; src: url("/_theme/1/assets/fonts/kites/parkinsans-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Parkinsans"; src: url("/_theme/1/assets/fonts/kites/parkinsans-700.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face {
  font-family: "Alexandria";
  src: url("/_theme/1/assets/fonts/alexandria-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---------- Tokens ----------
   From the logo: navy #002E45, blue #0E70A0, light blue #3C87AF. Dark is a navy-tinted near-black; light is a cool
   off-white. Text and button pairs are measured with contrast.mjs. */
:root {
  --brand: #0E70A0;
  --navy: #002E45;
  --surface: #F3F6F8;
  --surface-raised: #FFFFFF;
  --surface-raised-2: #FFFFFF;
  --surface-sunken: #E6EDF1;
  --text: #0B1B24;
  --text-muted: #4A5F6C;
  --accent: #0E70A0;
  --accent-text: #0A5F88;
  --accent-strong: #0E70A0;
  --accent-strong-hover: #0A5C85;
  --on-accent: #FFFFFF;
  --border: #D3DEE4;
  --border-input: #718896;
  --focus: #0A5F88;
  --danger: #B42318;
  --danger-surface: #FDECEA;
  --success: #067647;
  --whatsapp: #0B7A3B;
  --shadow-raised: 0 1px 2px rgb(0 46 69 / 0.06), 0 8px 24px -12px rgb(0 46 69 / 0.2);
  --shadow-float: 0 14px 40px -14px rgb(0 46 69 / .34);
  --chip: #FFFFFF;
  --glow: rgb(14 112 160 / 0.22);
  --selection: rgb(14 112 160 / 0.2);
  --string: #0E5E86;
  --string-op: .7;
  --string-glow: transparent;
  --string-glow-display: none;
  --kite-a: #3C87AF;
  --kite-b: #0E70A0;
  color-scheme: light;

  --font: "Parkinsans", "Alexandria", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --radius-card: 24px;
  --radius-field: 12px;
  --radius-pill: 999px;
  --gutter: 20px;
  --max: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --header-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #00080D;
    --surface-raised: #031823;
    --surface-raised-2: #082331;
    --surface-sunken: #000408;
    --text: #EEF4F7;
    --text-muted: #A3B5C0;
    --accent: #3C87AF;
    --accent-text: #7DBDE3;
    --accent-strong: #8CC5E6;
    --accent-strong-hover: #B5DBF0;
    --on-accent: #002E45;
    --border: #15303E;
    --border-input: #5A7B8C;
    --focus: #7DBDE3;
    --danger: #FF8A8A;
    --danger-surface: #2A1416;
    --success: #5FD39A;
    --whatsapp: #3DDC84;
    --shadow-raised: none;
    --shadow-float: 0 0 0 1px var(--border), 0 18px 40px -24px rgb(0 0 0 / .9);
    --chip: #EEF4F7;
    --glow: rgb(60 135 175 / 0.4);
    --selection: rgb(125 189 227 / 0.32);
    --string: #86C4E8;
    --string-op: .6;
    --string-glow: rgb(110 180 225 / .13);
    --string-glow-display: inline;
    --kite-a: #4A93BB;
    --kite-b: #3C87AF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #00080D;
  --surface-raised: #031823;
  --surface-raised-2: #082331;
  --surface-sunken: #000408;
  --text: #EEF4F7;
  --text-muted: #A3B5C0;
  --accent: #3C87AF;
  --accent-text: #7DBDE3;
  --accent-strong: #8CC5E6;
  --accent-strong-hover: #B5DBF0;
  --on-accent: #002E45;
  --border: #15303E;
  --border-input: #5A7B8C;
  --focus: #7DBDE3;
  --danger: #FF8A8A;
  --danger-surface: #2A1416;
  --success: #5FD39A;
  --whatsapp: #3DDC84;
  --shadow-raised: none;
  --shadow-float: 0 0 0 1px var(--border), 0 18px 40px -24px rgb(0 0 0 / .9);
  --chip: #EEF4F7;
  --glow: rgb(60 135 175 / 0.4);
  --selection: rgb(125 189 227 / 0.32);
  --string: #86C4E8;
  --string-op: .6;
  --string-glow: rgb(110 180 225 / .13);
  --string-glow-display: inline;
  --kite-a: #4A93BB;
  --kite-b: #3C87AF;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--accent-strong);
  caret-color: var(--accent);
  overflow-x: clip;
  position: relative;
}
html[lang="ar"] body { font-size: 1.125rem; line-height: 1.85; }
::selection { background: var(--selection); color: var(--text); }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
h3, h4 { line-height: 1.25; }
html[lang="ar"] :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.35; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -120px; z-index: 100; background: var(--accent-strong); color: var(--on-accent); padding: 10px 16px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; }
html { scrollbar-color: var(--border-input) var(--surface); }
.num { font-variant-numeric: tabular-nums; }
.token { unicode-bidi: isolate; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--text); border-radius: 6px; padding: 0 .3em; font-size: .9em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 40px; } }

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 1.4em; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
html[lang="ar"] .btn { font-weight: 600; font-size: 1.0625rem; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-strong); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong-hover); }
.btn-outline { border-color: var(--border-input); color: var(--text); background: transparent; }
.btn-outline:hover { border-color: var(--text); }
.btn-whatsapp { border-color: var(--border-input); color: var(--text); background: transparent; }
.btn-whatsapp .icon { color: var(--whatsapp); }
.btn-whatsapp:hover { border-color: var(--whatsapp); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .btn-row .btn { flex: 0 0 auto; } }

.pill { display: inline-flex; align-items: center; gap: .4em; border: 1px solid var(--border-input); border-radius: var(--radius-pill); padding: .2em .8em; font-size: .875rem; font-weight: 600; color: var(--text-muted); line-height: 1.6; }
html[lang="ar"] .pill { font-size: .9375rem; }

.text-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-block-end: 1px solid transparent; transition: border-color .2s var(--ease); }
.site-header.is-scrolled { border-block-end-color: var(--border); }
.header-bar { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; margin-inline-end: auto; }
.brand img { height: 36px; width: auto; }
.logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-on-light { display: none; } :root:not([data-theme="light"]) .logo-on-dark { display: block; } }
:root[data-theme="dark"] .logo-on-light { display: none; }
:root[data-theme="dark"] .logo-on-dark { display: block; }

.main-nav { display: none; }
.main-nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; }
.main-nav a, .main-nav .nav-trigger { display: inline-flex; align-items: center; gap: .3em; padding: 8px 12px; border-radius: var(--radius-pill); color: var(--text); text-decoration: none; font-weight: 500; font-size: .975rem; }
html[lang="ar"] .main-nav a { font-size: 1rem; font-weight: 500; }
.main-nav a:hover { background: var(--surface-sunken); }
.main-nav li.active > a { color: var(--accent-text); }
.main-nav .has-sub { position: relative; }
/* Without JS (and before it runs): a plain dropdown. app.js turns each one into a mega panel. */
.main-nav .sub {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 280px; list-style: none;
  background: var(--surface-raised-2); border: 1px solid var(--border); border-radius: 20px; padding: 8px;
  box-shadow: var(--shadow-raised); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.main-nav .sub a { display: flex; padding: 10px 14px; border-radius: 12px; font-weight: 500; }
.main-nav .has-sub:hover .sub, .main-nav .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }

/* ---------- Mega menu ----------
   A panel the width of the header drops from the bar like a sail unfurling: the live ripstop fabric on one side with
   the section's line and the call to action, the links on a faint ripstop grid on the other. */
.has-mega .header-bar, .header-bar { position: relative; }
.main-nav .has-sub.is-mega { position: static; }
.mega {
  position: absolute; inset-inline: var(--gutter); top: calc(100% - 6px); z-index: 2;
  visibility: hidden; pointer-events: none;
}
.mega::before { content: ''; position: absolute; inset-inline: 0; top: -14px; height: 20px; } /* hover bridge */
.mega-inner {
  display: grid; grid-template-columns: minmax(300px, .95fr) 1.6fr; min-height: 300px;
  background: var(--surface-raised-2); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow-float);
  overflow: hidden; clip-path: inset(0 0 100% 0 round 28px); opacity: 0;
  transition: clip-path .55s cubic-bezier(.2, .8, .2, 1), opacity .25s var(--ease);
}
.is-mega.is-open > .mega { visibility: visible; pointer-events: auto; }
.is-mega.is-open > .mega .mega-inner { clip-path: inset(0 0 0 0 round 28px); opacity: 1; }
/* The fabric has no edge of its own: it runs past its column and dissolves into the panel on the far side and below. */
.mega-feature { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 28px; isolation: isolate; }
.mega-feature .dune-fig { position: absolute; inset-block: 0; inset-inline-start: 0; width: 150%; height: 100%; z-index: -1; --mega-dir: to right;
  -webkit-mask-image: linear-gradient(var(--mega-dir), #000 0%, #000 35%, transparent 82%), linear-gradient(to top, transparent 0%, #000 60%, #000 85%, rgba(0,0,0,.6) 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(var(--mega-dir), #000 0%, #000 35%, transparent 82%), linear-gradient(to top, transparent 0%, #000 60%, #000 85%, rgba(0,0,0,.6) 100%); mask-composite: intersect;
  transform: scale(1.08); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
[dir="rtl"] .mega-feature .dune-fig { --mega-dir: to left; transform-origin: 100% 50%; }
.is-mega.is-open .mega-feature .dune-fig { transform: none; }
.mega-feature .dune-fig img { object-position: 85% 40%; opacity: 1; scale: -1 1; } /* mirrored so the dense folds sit behind the text */
[dir="rtl"] .mega-feature .dune-fig img { scale: 1 1; }
.mega-pic-dark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mega-pic-dark { display: block !important; } :root:not([data-theme="light"]) .mega-pic-light { display: none !important; } }
:root[data-theme="dark"] .mega-pic-dark { display: block !important; }
:root[data-theme="dark"] .mega-pic-light { display: none !important; }
.mega-title { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--text); }
.mega-text { color: var(--text-muted); max-width: 36ch; font-size: .95rem; }
.mega-feature .btn-row { margin-top: 6px; }
.mega-feature .btn { min-height: 42px; font-size: .925rem; }
.main-nav .mega-feature a.btn { padding: 0 1.2em; justify-content: center; }
.main-nav .mega-feature a.btn-primary { color: var(--on-accent); }
.main-nav .mega-feature a.btn-primary:hover { background: var(--accent-strong-hover); }
.main-nav .sub.mega-links {
  position: static; inset: auto; min-width: 0; transform: none; opacity: 1; visibility: inherit; box-shadow: none; border: 0; border-radius: 0; background: transparent;
  display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 6px 18px; padding: 28px 32px; list-style: none; position: relative;
}
.main-nav .sub.mega-links::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%); }
[dir="rtl"] .mega-links::before { -webkit-mask-image: radial-gradient(120% 90% at 0% 0%, #000, transparent 70%); mask-image: radial-gradient(120% 90% at 0% 0%, #000, transparent 70%); }
.main-nav .mega-links a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 16px; font-size: 1.05rem; font-weight: 600; background: transparent; border: 1px solid transparent;
  opacity: 0; translate: 0 10px; transition: opacity .35s var(--ease), translate .45s var(--ease), background .2s, border-color .2s; transition-delay: calc(var(--i, 0) * 35ms + 90ms); }
.is-mega.is-open .mega-links a { opacity: 1; translate: 0 0; }
.main-nav .mega-links a:hover, .main-nav .mega-links a:focus-visible { background: var(--surface); border-color: var(--border); }
.main-nav .mega-links a[aria-current="page"] { color: var(--accent-text); }
.mega-links a .icon-dir { width: 1.1em; height: 1.1em; opacity: .4; transition: opacity .2s, translate .3s var(--ease); flex: none; }
.mega-links a:hover .icon-dir { opacity: 1; translate: 4px 0; }
[dir="rtl"] .mega-links a .icon-dir { transform: scaleX(-1); }
[dir="rtl"] .mega-links a:hover .icon-dir { translate: -4px 0; }
.mega-links li:first-child a { color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) {
  .mega-inner { clip-path: none; transition: opacity .15s linear; }
  .is-mega.is-open > .mega .mega-inner { clip-path: none; }
  .main-nav .mega-links a { translate: none; transition-delay: 0s; }
  .mega-feature .dune-fig { transform: none; transition: none; }
}
.main-nav .caret { width: .9em; height: .9em; }

.header-tools { display: flex; align-items: center; gap: 6px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--surface-sunken); }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px 0 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); }
[dir="rtl"] .lang-switch { padding: 0 10px 0 4px; }
.lang-switch .icon { width: 1.05em; height: 1.05em; margin-inline-end: 4px; }
.lang-opt { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: var(--radius-pill); font-weight: 600; font-size: .9rem; color: var(--text-muted); text-decoration: none; }
.lang-opt[lang="ar"] { font-family: var(--font-ar, inherit); font-size: 1rem; }
.lang-opt.is-current { background: var(--accent-strong); color: var(--on-accent); }
a.lang-opt:hover { color: var(--text); background: var(--surface-sunken); }
.header-tools .lang-switch { display: none; }
@media (min-width: 560px) { .header-tools .lang-switch { display: inline-flex; } }
.lang-switch.is-menu { display: inline-flex; align-self: flex-start; height: 44px; }
.lang-switch.is-menu .lang-opt { min-width: 52px; height: 36px; }
.theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.header-cta { display: none; min-height: 44px; padding-inline: 1.1em; }
.menu-btn { display: inline-grid; }
@media (min-width: 1240px) { .header-cta { display: inline-flex; } .main-nav a { padding-inline: 12px; } }

@media (min-width: 1080px) {
  .main-nav { display: block; }
  .menu-btn { display: none; }
  .brand { margin-inline-end: 20px; }
  .main-nav a { padding-inline: 10px; }
  .main-nav { margin-inline-end: auto; }
}

/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 60; display: none; }
.mobile-menu.is-open { display: block; }
.mobile-menu-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); }
.mobile-menu-panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(420px, 100%);
  background: var(--surface); padding: 16px var(--gutter) 32px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
  animation: panel-in .35s var(--ease);
}
[dir="rtl"] .mobile-menu-panel { animation-name: panel-in-rtl; }
@keyframes panel-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes panel-in-rtl { from { transform: translateX(-24px); opacity: 0; } }
.mobile-menu-head { display: flex; justify-content: space-between; align-items: center; height: 52px; }
.mobile-menu nav ul { list-style: none; }
.mobile-menu nav > ul > li { border-block-end: 1px solid var(--border); }
.mobile-menu nav a { display: flex; padding: 14px 0; color: var(--text); text-decoration: none; font-size: 1.125rem; font-weight: 600; }
.mobile-menu nav .sub { padding-block-end: 10px; }
.mobile-menu nav .sub a { padding: 9px 0; font-size: 1rem; font-weight: 500; color: var(--text-muted); padding-inline-start: 12px; }
.mobile-menu nav .caret { display: none; }
.mobile-menu nav .has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.mobile-menu nav .has-sub > .sub { grid-column: 1 / -1; display: none; }
.mobile-menu nav .has-sub.is-expanded > .sub { display: block; }
.sub-toggle { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--text); border-radius: var(--radius-pill); cursor: pointer; }
.sub-toggle .caret { display: block !important; width: 1.1em; height: 1.1em; transition: rotate .25s var(--ease); }
.is-expanded > .sub-toggle .caret { rotate: 180deg; }

/* ---------- Scene figures (the still poster at the top of cards and CTA bands) ---------- */
.dune-fig { pointer-events: none; overflow: hidden; --fade-dir: to left;
  -webkit-mask-image: linear-gradient(var(--fade-dir), #000 0%, #000 25%, transparent 100%), linear-gradient(to bottom, #000 60%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(var(--fade-dir), #000 0%, #000 25%, transparent 100%), linear-gradient(to bottom, #000 60%, transparent 100%); mask-composite: intersect; }
[dir="rtl"] .dune-fig { --fade-dir: to right; }
.dune-fig picture, .dune-fig img { display: block; width: 100%; height: 100%; }
.dune-fig img { object-fit: cover; object-position: 100% 30%; }
[dir="rtl"] .dune-fig img { object-position: 0 30%; }

/* ---------- Home hero ---------- */
.hero { position: relative; padding-block: 0 40px; }
.hero h1 { font-size: clamp(2.35rem, 7.6vw, 5.25rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; max-width: 14ch; }
html[lang="ar"] .hero h1 { font-size: clamp(2.1rem, 6.6vw, 4.5rem); font-weight: 700; line-height: 1.3; letter-spacing: 0; max-width: 16ch; }
.hero-lede { margin-top: 18px; font-size: 1.1875rem; color: var(--text-muted); max-width: 34rem; }
html[lang="ar"] .hero-lede { font-size: 1.25rem; }
.hero .btn-row { margin-top: 28px; }
.availability { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 22px; color: var(--text-muted); font-size: .9375rem; }
.availability .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.availability[data-state="open"] .dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 22%, transparent); }
.availability .clock { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
@media (min-width: 900px) { .hero { padding-block: 40px 72px; } }

/* ---------- Dunes banner ----------
   Internal pages and blog posts: full width at the top, fading down into the content; the heading sits on the
   last of the sand. Home: the dunes stand at the inline end of the hero (right in English, left in Arabic) and fade
   toward the text. The poster and the live canvas cover the banner either way. */
.has-banner { --banner-h: clamp(260px, 38vw, 520px); position: relative; isolation: isolate; }
.banner3d { position: absolute; z-index: -1; inset-block-start: 0; inset-inline: 0; height: var(--banner-h); margin: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgb(0 0 0 / .42) 62%, rgb(0 0 0 / .12) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgb(0 0 0 / .42) 62%, rgb(0 0 0 / .12) 82%, transparent 100%); }
.banner3d { contain: strict; }
.banner3d picture, .banner3d img, .banner3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.banner3d img { object-fit: cover; object-position: 50% 40%; }
.banner3d canvas { opacity: 0; transition: opacity .9s var(--ease); }
.banner3d.is-live canvas { opacity: 1; }
.banner3d.is-live picture { opacity: 0; transition: opacity .6s var(--ease) .3s; }
/* A featured image set in Odyssey is a photo, not the transparent scene: give it the page ground behind it. */
.banner3d.is-featured.has-photo { background: var(--surface-sunken); }
.page-hero-copy, .article-page > .wrap, .notfound { padding-block-start: calc(var(--banner-h) * .56); }

/* Home hero: dunes from the inline end, fading toward the copy and softly at the foot. */
.hero.has-banner { min-height: min(86vh, 760px); display: grid; align-content: center; }
.hero .banner3d { inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; width: 64%; height: auto;
  --fade-dir: to left;
  -webkit-mask-image: linear-gradient(var(--fade-dir), #000 0%, #000 28%, rgb(0 0 0 / .45) 62%, transparent 100%), linear-gradient(to bottom, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(var(--fade-dir), #000 0%, #000 28%, rgb(0 0 0 / .45) 62%, transparent 100%), linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-composite: intersect; }
[dir="rtl"] .hero .banner3d { --fade-dir: to right; }
.hero .banner3d img { object-position: 100% 50%; }
[dir="rtl"] .hero .banner3d img { object-position: 0 50%; }
.hero-copy { max-width: 44rem; padding-block-start: clamp(56px, 9vw, 140px); }
@media (max-width: 899px) {
  /* phones: the dunes sit behind the copy on the end side and fade out before most of the text */
  .hero .banner3d { width: 88%; opacity: .75; }
  .hero.has-banner { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .banner3d canvas, .banner3d picture { transition: none; } }

/* ---------- Page hero ---------- */
.page-hero { padding-block: 0 48px; position: relative; }
.page-hero h1 { font-size: clamp(2.1rem, 6vw, 4.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; max-width: 18ch; margin-top: 16px; }
html[lang="ar"] .page-hero h1 { font-size: clamp(1.95rem, 5.4vw, 3.6rem); font-weight: 700; letter-spacing: 0; line-height: 1.32; }
.page-hero .lede { margin-top: 16px; font-size: 1.1875rem; color: var(--text-muted); max-width: 40rem; }
html[lang="ar"] .page-hero .lede { font-size: 1.25rem; }
.page-hero .btn-row { margin-top: 24px; }
@media (min-width: 900px) { .page-hero { padding-block: 0 72px; } }

/* Breadcrumb */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: .9rem; color: var(--text-muted); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-block-start: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
[dir="rtl"] .breadcrumb li + li::before { transform: rotate(-135deg); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Sections ---------- */
.section { padding-block: 56px; }
.section + .section { border-block-start: 1px solid var(--border); }
.section.is-tight { padding-block: 40px; }
@media (min-width: 900px) { .section { padding-block: 80px; } }
.section-head { display: grid; gap: 12px; margin-block-end: 32px; max-width: 46rem; }
.section-head h2, .section > .wrap > h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; }
html[lang="ar"] .section-head h2, html[lang="ar"] .section > .wrap > h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: 0; font-weight: 600; }
.section-head p { color: var(--text-muted); font-size: 1.125rem; }

.prose { max-width: 68ch; display: grid; gap: 1em; align-content: start; }
html[lang="ar"] .prose { max-width: 58ch; }
.prose h2 { margin-block-end: .2em; }
.prose strong { font-weight: 600; color: var(--text); }

.two-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 64px; } .two-col.is-wide-start { grid-template-columns: 1.4fr 1fr; } }

.aside-card { background: var(--surface-raised); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-raised); align-self: start; }
.aside-card h3 { font-size: 1.125rem; margin-block-end: 14px; }
.aside-card ul { list-style: none; display: grid; gap: 12px; }
.aside-card li { display: flex; gap: 12px; align-items: baseline; }
.aside-card li::before { content: ""; width: 8px; height: 14px; border-radius: 99px; background: var(--accent); flex: none; transform: translateY(2px); }

/* Item list: rows, not identical cards */
.item-list { list-style: none; display: grid; border-block-start: 1px solid var(--border); }
.item-list > li { display: grid; gap: 6px; padding-block: 22px; border-block-end: 1px solid var(--border); }
.item-list h3 { font-size: 1.1875rem; font-weight: 600; }
html[lang="ar"] .item-list h3 { font-size: 1.1875rem; font-weight: 600; }
.item-list p { color: var(--text-muted); max-width: 62ch; }
@media (min-width: 900px) {
  .item-list > li { grid-template-columns: minmax(220px, 1fr) 2fr; gap: 32px; padding-block: 26px; }
}
.item-list.is-numbered { counter-reset: item; }
.item-list.is-numbered h3::before { counter-increment: item; content: counter(item, decimal-leading-zero); display: inline-block; min-width: 2.2em; color: var(--accent-text); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Services showcase (home) */
.service-showcase { display: grid; gap: 14px; list-style: none; }
.service-card { position: relative; display: grid; gap: 12px; background: var(--surface-raised); border-radius: var(--radius-card); padding: 148px 24px 26px; box-shadow: var(--shadow-raised); overflow: hidden; align-content: end; }
.service-card .dune-fig { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 82%; height: 150px; }
.service-card h3 { font-size: 1.5rem; max-width: 14ch; }
.service-card h3 a { color: var(--text); text-decoration: none; }
.service-card h3 a::after { content: ""; position: absolute; inset: 0; }
.service-card p { color: var(--text-muted); max-width: 40ch; }
.service-card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.service-card h3 a:focus-visible { outline: none; }
.service-card .text-link { position: relative; }
@media (min-width: 720px) { .service-showcase { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .service-showcase { grid-template-columns: 1.3fr 1fr 1fr; } .service-showcase > .service-card:first-child { grid-row: span 2; min-height: 520px; } .service-showcase > .service-card:first-child .dune-fig { width: 100%; height: 62%; } .service-showcase > .service-card:first-child h3 { font-size: 2rem; } }

/* Card echo: faded pictures of the card's subject (Odoo app icons, or line drawings) on the side where the fabric
   fades out. They sit muted and grey at rest; on hover they lift one after another and take their colour back. */
.card-echo { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 64%; height: 150px; pointer-events: none; --s: 1; --echo-dir: to right;
  opacity: .5; transition: opacity .6s var(--ease);
  -webkit-mask-image: linear-gradient(var(--echo-dir), #000 30%, transparent 100%), linear-gradient(to bottom, #000 50%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(var(--echo-dir), #000 30%, transparent 100%), linear-gradient(to bottom, #000 50%, transparent 100%); mask-composite: intersect; }
[dir="rtl"] .card-echo { --echo-dir: to left; }
.echo-tile { position: absolute; display: grid; place-items: center; width: calc(var(--w) * var(--s)); aspect-ratio: 1; color: var(--accent-text);
  border: 1px solid var(--border); border-radius: 30%; background: color-mix(in srgb, var(--surface) 70%, transparent); padding: calc(var(--w) * var(--s) * .2);
  transition: translate .7s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 45ms), filter .6s var(--ease); }
.echo-tile svg { width: 100%; height: 100%; }
.echo-tile.is-app { padding: calc(var(--w) * var(--s) * .16); filter: grayscale(.55) saturate(.8); }
.echo-tile.is-app img { display: block; width: 100%; height: 100%; }
.echo-tile:nth-child(1) { --w: 44px; inset-inline-start: 7%; top: 15%; }
.echo-tile:nth-child(2) { --w: 34px; inset-inline-start: 34%; top: 7%; }
.echo-tile:nth-child(3) { --w: 36px; inset-inline-start: 21%; top: 51%; }
.echo-tile:nth-child(4) { --w: 40px; inset-inline-start: 52%; top: 34%; }
.echo-tile:nth-child(5) { --w: 30px; inset-inline-start: 71%; top: 10%; }
.echo-tile:nth-child(6) { --w: 28px; inset-inline-start: 41%; top: 70%; }
@media (min-width: 1080px) { .service-showcase > .service-card:first-child .card-echo { width: 58%; height: 62%; --s: 1.45; } }
@media (hover: hover) {
  .service-card:is(:hover, :focus-within) .card-echo { opacity: .85; }
  .service-card:is(:hover, :focus-within) .echo-tile { translate: 0 -5px; }
  .service-card:is(:hover, :focus-within) .echo-tile.is-app { filter: none; }
}
@media (prefers-reduced-motion: reduce) { .echo-tile { transition: filter .3s linear; } .service-card .echo-tile { translate: none !important; } }

/* Stages: the project process. Each number is a knot on the kite string. */
.stages { list-style: none; display: grid; gap: 0; position: relative; }
.stage { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 0 18px; padding-block-end: 28px; }
.stage .knot { grid-row: 1 / span 3; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-strong); border: 1.5px solid var(--accent-strong); color: var(--on-accent); font-weight: 700; font-size: 1.25rem; position: relative; z-index: 1; }
.stage::after { content: ""; position: absolute; inset-inline-start: 22px; top: 46px; bottom: 0; width: 2px; background: linear-gradient(var(--accent), var(--border)); }
.stage:last-child::after { display: none; }
.flight-on .stage::after { display: none; }
.stage h3 { font-size: 1.3rem; padding-top: 8px; }
.stage p { color: var(--text-muted); margin-top: 6px; max-width: 60ch; }
.stage .receive { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-raised); box-shadow: var(--shadow-raised); max-width: 60ch; font-size: 1rem; }
.stage .receive strong { display: block; font-size: .9rem; color: var(--accent-text); font-weight: 600; margin-bottom: 2px; }
.flight-on .stage .knot { transition: transform .7s var(--spring), background-color .3s, color .3s, border-color .3s; }
.flight-on .stage:not(.is-reached) .knot { transform: scale(.8); background: var(--surface); color: var(--text); border-color: var(--string); }
@media (min-width: 1080px) {
  /* a staircase the string climbs down, one knot per step */
  .stages.is-horizontal { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 28px; padding-block-end: 24px; }
  .stages.is-horizontal .stage { grid-template-columns: 1fr; gap: 10px; padding: 0; align-content: start; }
  .stages.is-horizontal .stage .knot { grid-row: auto; margin-bottom: 8px; }
  .stages.is-horizontal .stage::after { display: none; }
  .stages.is-horizontal .stage:nth-child(2) { margin-top: 48px; }
  .stages.is-horizontal .stage:nth-child(3) { margin-top: 96px; }
  .stages.is-horizontal .stage:nth-child(4) { margin-top: 144px; }
  .stages.is-horizontal .stage:nth-child(5) { margin-top: 192px; }
}

/* FAQ */
.faq { display: grid; border-block-start: 1px solid var(--border); max-width: 52rem; }
.faq details { border-block-end: 1px solid var(--border); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-block: 20px; cursor: pointer; font-weight: 600; font-size: 1.125rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border-input); display: grid; place-items: center; transition: transform .25s var(--ease), border-color .2s; }
.faq details[open] summary .plus { transform: rotate(45deg); border-color: var(--accent); }
.faq .answer { padding-block-end: 22px; color: var(--text-muted); max-width: 64ch; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: var(--shadow-raised); padding: 32px 24px; display: grid; gap: 20px; }
.cta-band h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); max-width: 18ch; position: relative; z-index: 1; }
.cta-band p { color: var(--text-muted); max-width: 44ch; position: relative; z-index: 1; }
.cta-band .btn-row { position: relative; z-index: 1; }
.cta-band .dune-fig { position: absolute; inset-block: 0; inset-inline-end: 0; width: 58%; }
@media (max-width: 719px) { .cta-band .dune-fig { width: 90%; opacity: .55; } }
@media (min-width: 900px) { .cta-band { padding: 56px; } }

/* Booking band (home + contact) */
.booking { display: grid; gap: 32px; }
@media (min-width: 1000px) { .booking { grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; } }
.booking-copy h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.booking-copy p { color: var(--text-muted); margin-top: 14px; max-width: 42ch; }
.contact-lines { list-style: none; display: grid; gap: 14px; margin-top: 28px; }
.contact-lines li { display: flex; gap: 12px; align-items: center; }
.contact-lines .icon { color: var(--accent-text); }
.contact-lines a { color: var(--text); font-weight: 600; text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; max-width: 420px; }
.zone { border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; }
.zone .z-name { font-size: .875rem; color: var(--text-muted); }
.zone .z-time { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.zone .z-week { font-size: .8125rem; color: var(--text-muted); }

/* Form */
.form-card { background: var(--surface-raised); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-raised); }
@media (min-width: 900px) { .form-card { padding: 36px; } }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 600; font-size: .9375rem; }
.field .hint { font-size: .875rem; color: var(--text-muted); }
.field .optional { font-weight: 400; color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radius-field);
  background: var(--surface); border: 1.5px solid var(--border-input); color: var(--text);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 40px; }
[dir="rtl"] .select { background-position: 20px 50%, 15px 50%; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 30%, transparent); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.field .error { display: none; color: var(--danger); font-size: .875rem; font-weight: 500; }
.field.has-error .error { display: block; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--text-muted); }
.field label.check { font-weight: 400; font-size: .9375rem; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }
.check a { color: var(--accent-text); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.form-status { font-size: .9375rem; }
.form-status[data-state="error"] { color: var(--danger); }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.hp { position: absolute; inset-inline-start: -9999px; }

/* Articles */
.post-list { list-style: none; display: grid; gap: 16px; }
@media (min-width: 900px) { .post-list { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.post-card { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.post-card-body { display: grid; gap: 10px; align-content: start; padding: 20px 24px 26px; }
.post-thumb { display: block; position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: var(--surface-sunken, var(--surface)); }
.post-thumb picture, .post-thumb img { display: block; width: 100%; height: 100%; }
.post-thumb img { object-fit: cover; transition: transform .8s var(--ease), opacity .6s var(--ease); }
.post-card:hover .post-thumb img { transform: scale(1.035); }
.post-card h3 { font-size: 1.25rem; line-height: 1.3; }
html[lang="ar"] .post-card h3 { line-height: 1.55; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.post-card h3 a:focus-visible { outline: none; }
.post-card .meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: var(--text-muted); font-size: .875rem; }
.post-card p { color: var(--text-muted); font-size: 1rem; }
.post-list > li[hidden] { display: none; }
/* Insights index: the newest post leads across the column, the rest sit two up beside the sidebar. */
@media (min-width: 720px) {
  .post-list.is-index { grid-template-columns: 1fr 1fr; }
  .post-list.is-index.has-lead > li:first-child:not([hidden]) { grid-column: 1 / -1; }
  .post-list.is-index.has-lead > li:first-child .post-card { grid-template-rows: none; grid-template-columns: 1.15fr 1fr; }
  .post-list.is-index.has-lead > li:first-child .post-thumb { aspect-ratio: auto; min-height: 280px; }
  .post-list.is-index.has-lead > li:first-child .post-card-body { align-content: center; padding: 32px; }
  .post-list.is-index.has-lead > li:first-child h3 { font-size: 1.6rem; }
}

/* ---------- Blog layout and sidebar ---------- */
.blog-layout { display: grid; gap: 48px; }
.blog-main, .blog-layout > .article { min-width: 0; }
@media (min-width: 1080px) { .blog-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; } .blog-sidebar { position: sticky; top: 96px; } }
.blog-sidebar { display: grid; gap: 28px; align-content: start; }
.side-block h2 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.side-cta { background: var(--surface-raised); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); padding: 24px; }
.side-cta h2 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 8px; }
.side-cta p { color: var(--text-muted); font-size: .9375rem; }
.side-cta .btn-row { margin-top: 18px; display: grid; gap: 10px; }
.side-cta .btn { width: 100%; justify-content: center; }
.side-topics, .side-links, .side-posts { list-style: none; display: grid; }
.side-topics a, .side-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding-block: 8px; border-block-end: 1px solid var(--border); color: var(--text); text-decoration: none; }
.side-topics a:hover, .side-links a:hover, .side-topics a[aria-current="true"] { color: var(--accent-text); }
.side-topics a[aria-current="true"] { font-weight: 700; }
.side-topics .num { color: var(--text-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.side-posts { gap: 16px; }
.side-posts a { color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.4; }
.side-posts a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
.side-posts time { display: block; margin-top: 4px; color: var(--text-muted); font-size: .875rem; }

/* ---------- Article ---------- */
.article-page { padding-block: 0 64px; }
.article-page .breadcrumb { margin-bottom: 8px; }
.article-head { max-width: 46rem; }
.article-head h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin-top: 16px; }
html[lang="ar"] .article-head h1 { font-size: clamp(1.85rem, 4.6vw, 3rem); font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.article-head .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 18px; color: var(--text-muted); font-size: .9375rem; }
.article-head .excerpt { margin-top: 16px; font-size: 1.1875rem; color: var(--text-muted); }
.article-body { max-width: 68ch; margin-top: 40px; margin-inline: 0; display: grid; gap: 1.05em; font-size: 1.125rem; }
html[lang="ar"] .article-body { max-width: 58ch; font-size: 1.1875rem; }
.article-body h2 { font-size: 1.75rem; margin-top: 1.2em; }
html[lang="ar"] .article-body h2 { font-size: 1.6rem; }
.article-body h3 { font-size: 1.3rem; margin-top: .8em; }
.article-body ul, .article-body ol { padding-inline-start: 1.3em; display: grid; gap: .45em; }
.article-body li::marker { color: var(--accent-text); }
.article-body .note { border-radius: 18px; padding: 16px 18px; background: var(--surface-raised); box-shadow: var(--shadow-raised); font-size: 1rem; color: var(--text-muted); }
.article-body .note strong { color: var(--text); }
.sources { max-width: 68ch; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); font-size: .9375rem; color: var(--text-muted); }
.sources h2 { font-size: 1.125rem; margin-bottom: 10px; color: var(--text); }
.sources ul { padding-inline-start: 1.2em; display: grid; gap: 6px; }
.sources a { word-break: break-word; }

/* Legal */
.legal-body { max-width: 68ch; display: grid; gap: 1em; }
.legal-body h2 { font-size: 1.5rem; margin-top: 1.1em; }
.legal-body h3 { font-size: 1.2rem; margin-top: .6em; }
.legal-body ul { padding-inline-start: 1.3em; display: grid; gap: .4em; }

/* Related */
.related { list-style: none; display: grid; gap: 12px; }
@media (min-width: 900px) { .related { grid-template-columns: repeat(3, 1fr); } }

/* 404 */
.notfound { min-height: 60vh; display: grid; align-content: center; gap: 18px; padding-block: 48px 72px; }
.notfound h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
.notfound .alt-lang { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ---------- Footer ---------- */
.site-footer { margin-top: 24px; padding-block: 56px 32px; background: var(--surface-sunken); }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 32px; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1180px) { .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr) 1.4fr; gap: 32px; } .footer-brand { grid-column: auto; } }
.footer-brand img { height: 40px; width: auto; }
.footer-brand p { margin-top: 16px; color: var(--text-muted); max-width: 32ch; }
.footer-brand .tagline { color: var(--text); font-weight: 600; font-size: 1.125rem; margin-top: 18px; }
.site-footer h2 { font-size: 1rem; font-weight: 600; margin-bottom: 14px; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer nav a, .footer-contact a { color: var(--text-muted); text-decoration: none; }
.site-footer nav a:hover, .footer-contact a:hover { color: var(--text); text-decoration: underline; }
.footer-contact li { display: flex; gap: 10px; align-items: center; color: var(--text-muted); }
.footer-contact .icon { color: var(--accent-text); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .9rem; }
.footer-bottom a { color: var(--text-muted); }
.footer-bottom button { background: none; border: 0; padding: 0; color: var(--text-muted); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* ---------- Consent banner ---------- */
.consent { position: fixed; z-index: 70; inset-inline: 12px; bottom: 12px; max-width: 560px; margin-inline: auto; background: var(--surface-raised-2); color: var(--text); border-radius: 24px; padding: 20px; box-shadow: var(--shadow-float); display: none; }
.consent.is-visible { display: block; animation: rise .4s var(--ease); }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.consent h2 { font-size: 1.0625rem; margin-bottom: 6px; }
.consent p { font-size: .9375rem; color: var(--text-muted); }
.consent .btn-row { margin-top: 14px; }
.consent .btn { min-height: 46px; flex: 1 1 0; }

/* ---------- Motion ----------
   Content is visible by default. app.js adds .js-motion (never with reduced motion) and reveals blocks as they
   enter the viewport: the hero copy settles in after the banner, then each section rises in, children in turn. */
.js-motion .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .9s cubic-bezier(.16, 1, .3, 1), translate .45s var(--ease), box-shadow .45s var(--ease); transition-delay: var(--rv-d, 0ms), var(--rv-d, 0ms), 0s, 0s; }
.js-motion .rv.is-in { opacity: 1; transform: none; }
.js-motion .banner3d { animation: banner-in 1.6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes banner-in { from { transform: scale(1.06) translateY(-12px); } }
.js-motion img.lazy-fade { opacity: 0; }
.js-motion img.lazy-fade.is-loaded { opacity: 1; transition: opacity .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Touch targets: every standalone link and control reaches 44px on touch screens */
.brand, .footer-brand a, .contact-lines a, .footer-contact a, .footer-bottom a, .footer-bottom button, .breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-brand a { display: inline-flex; }

/* ---------- One card style everywhere ----------
   Every card is the service-showcase card: dunes across the top fading toward the text side, then the content. */
.card-grid { list-style: none; display: grid; gap: 16px; }
@media (min-width: 720px) { .card-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1080px) { .card-grid.n3, .card-grid.n6 { grid-template-columns: repeat(3, 1fr); } .card-grid.n4 { grid-template-columns: repeat(4, 1fr); } }
.dune-card { padding-block-end: 64px; min-height: 260px; }
.dune-card h3 { font-size: 1.375rem; }
.dune-card .card-arrow { position: absolute; inset-block-end: 22px; inset-inline-start: 24px; color: var(--accent-text); transition: transform .25s var(--ease); }
.dune-card:hover .card-arrow { transform: translateX(4px); }
[dir="rtl"] .dune-card .card-arrow { transform: scaleX(-1); }
[dir="rtl"] .dune-card:hover .card-arrow { transform: scaleX(-1) translateX(4px); }
.dune-card:hover { box-shadow: var(--shadow-float); }
.case-card, .aside-card { position: relative; overflow: hidden; padding-block-start: 148px; }
.case-card > :not(.dune-fig), .aside-card > :not(.dune-fig) { position: relative; }
.case-card .dune-fig, .aside-card .dune-fig { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 82%; height: 150px; }

/* ---------- Card hover ----------
   The card lifts, its dunes drift toward the text and brighten, and the arrow steps forward. Uses `translate` so it
   never fights the scroll reveal's `transform`; reduced motion turns the movement off (global rule above). */
.service-card, .case-card, .aside-card, .post-card { transition: translate .45s var(--ease), box-shadow .45s var(--ease); }
.dune-fig img { transition: opacity .6s var(--ease); opacity: .85; }
/* the live dunes (scene.js) slide into the hovered card's figure and fade in over its poster */
.dune-fig .dune-live { position: absolute; max-width: none; opacity: 0; transition: opacity .4s var(--ease); }
.dune-fig .dune-live.is-on { opacity: 1; }
@media (hover: hover) {
  :is(.service-card, .case-card, .post-card):is(:hover, :focus-within) { translate: 0 -6px; box-shadow: var(--shadow-float); }
  :is(.service-card, .case-card, .aside-card):hover .dune-fig img { opacity: 1; }
  .service-card:hover .card-arrow { transform: translateX(6px); }
  [dir="rtl"] .service-card:hover .card-arrow { transform: scaleX(-1) translateX(6px); }
}
@media (prefers-reduced-motion: reduce) { :is(.service-card, .case-card, .post-card):is(:hover, :focus-within) { translate: none; } .dune-fig img { transform: none !important; } }

/* ---------- The kite string ----------
   One string path for the whole page, drawn by app.js from the header logo down through the hero, the partner band,
   the Odoo app icons and the process knots to the closing call to action. The kite rides its head. Without JS a quiet
   static string runs down the margin. Painted under positioned content, so cards sit on top of it. */
.flight { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.flight svg { width: 100%; height: 100%; overflow: visible; }
.flight .str { fill: none; stroke: var(--string); stroke-opacity: var(--string-op); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flight .glow-g { display: var(--string-glow-display); }
.flight .glow { fill: none; stroke: var(--string-glow); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.flight .fallback { vector-effect: non-scaling-stroke; stroke-opacity: calc(var(--string-op) * .6); }
.kite-layer { position: absolute; inset: 0; overflow: hidden; z-index: 40; pointer-events: none; }
.kite { position: absolute; left: 0; top: 0; width: 44px; height: 65px; margin: -63.3px 0 0 -8.2px; transform-origin: 8.2px 63.3px; pointer-events: none; visibility: hidden; will-change: transform; }
.kite svg { width: 100%; height: 100%; overflow: visible; }
.kite .ka { fill: var(--kite-a); } .kite .kb { fill: var(--kite-b); }
.flight-on .kite { visibility: visible; }
/* phones: the string would cross the copy, so only the kite flies */
@media (max-width: 759px) { .flight svg { display: none; } .kite { width: 34px; height: 50px; margin: -48.9px 0 0 -6.3px; transform-origin: 6.3px 48.9px; } }
@media print { .flight, .kite-layer { display: none; } }

/* ---------- Partner band ---------- */
.partners-section.is-tight { padding-block: 28px; }
.partner-band { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.partner { display: flex; align-items: center; gap: 16px; }
.partner-logo { display: grid; place-items: center; height: 64px; }
.partner-logo img { height: 60px; width: auto; }
.partner-aws .partner-logo img { height: 40px; }
.partner-bigcommerce .partner-logo img { height: 28px; }
.partner-band.has-text { display: grid; gap: 16px; }
.partner-band.has-text .partner { background: var(--surface-raised); border-radius: var(--radius-card); padding: 18px 22px; box-shadow: var(--shadow-raised); position: relative; }
.partner-text { display: grid; gap: 2px; }
.partner-text strong { font-weight: 600; }
.partner-text span { color: var(--text-muted); font-size: .975rem; }
@media (min-width: 900px) { .partner-band.has-text { grid-template-columns: repeat(3, 1fr); } .partner-band.has-text .partner { flex-direction: column; align-items: flex-start; } }

/* ---------- Client logo wall ---------- */
/* Client marquee (from Nawa): two rows drifting in opposite directions, faded at the edges, paused on hover or by the button */
.clients { position: relative; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marquee img { filter: brightness(0) invert(1); } }
:root[data-theme="dark"] .marquee img { filter: brightness(0) invert(1); }
.clients-title { text-align: center; margin-inline: auto; }
.marquee { display: grid; gap: 18px; margin-top: 28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-row { display: flex; width: max-content; animation: marquee var(--marquee-time, 46s) linear infinite; }
.marquee-row:nth-child(2) { animation-direction: reverse; --marquee-time: 52s; }
.marquee-row ul { list-style: none; display: flex; align-items: center; gap: 14px; padding-inline-end: 14px; margin: 0; }
.marquee-row li { display: grid; place-items: center; height: 84px; min-width: 150px; padding: 14px 26px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.marquee-row img { max-height: 46px; max-width: 150px; width: auto; height: auto; opacity: .78; transition: opacity .3s var(--ease); }
.marquee-row li:hover img { opacity: 1; }
.marquee:hover .marquee-row, .clients.is-paused .marquee-row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-row { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
.marquee-toggle { position: absolute; inset-inline-end: max(var(--gutter), calc((100% - var(--max)) / 2)); top: 32px; }
.marquee-toggle .icon-play, .clients.is-paused .marquee-toggle .icon-pause { display: none; }
.clients.is-paused .marquee-toggle .icon-play { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-row { animation: none; width: auto; justify-content: center; }
  .marquee-row ul { flex-wrap: wrap; justify-content: center; padding: 0; }
  .marquee-row ul[aria-hidden] { display: none; }
  .marquee-toggle { display: none; }
}

/* ---------- Odoo apps: icons down the middle, the string threads them ---------- */
.apps { list-style: none; display: grid; gap: 14px; }
.app { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
.app-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--chip); border: 1px solid var(--border); display: grid; place-items: center; padding: 9px; position: relative; z-index: 1; }
.app-icon img { width: 44px; height: 44px; }
.app h3 { font-size: 1.25rem; margin-bottom: 2px; }
.app p { color: var(--text-muted); font-size: .975rem; line-height: 1.5; }
.flight-on .app-icon { transition: transform .7s var(--spring), opacity .35s var(--ease); }
.flight-on .app:not(.is-reached) .app-icon { transform: scale(.66) rotate(-8deg); opacity: .5; }
@media (min-width: 900px) {
  .apps { grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 7vw, 120px); row-gap: 8px; padding-block-end: 56px; }
  .app { min-height: 96px; }
  .app:nth-child(odd) { grid-template-columns: minmax(0, 1fr) 64px; text-align: end; }
  .app:nth-child(odd) .app-icon { order: 2; }
  .app:nth-child(even) { position: relative; top: 52px; }
}
.section-note { margin-top: 28px; color: var(--text-muted); font-size: 1.0625rem; max-width: 60ch; }

/* ---------- Compare (Community / Enterprise) ---------- */
.compare { display: grid; gap: 16px; }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; gap: 20px; } }
.compare-col { position: relative; background: var(--surface-raised); border-radius: var(--radius-card); padding: 26px; box-shadow: var(--shadow-raised); display: grid; gap: 10px; align-content: start; }
.compare-col h3 { font-size: 1.5rem; }
.compare-col > p { color: var(--text-muted); }
.compare-col ul { list-style: none; display: grid; gap: 10px; margin-top: 6px; }
.compare-col li { display: flex; gap: 12px; align-items: baseline; }
.compare-col li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg) translateY(-2px); background: var(--accent); flex: none; }

/* ---------- Selected work and team placeholders ---------- */
.work-card { padding-block-end: 26px; min-height: 280px; }
.work-card dl { display: grid; gap: 8px; margin: 0; }
.work-card dt { font-weight: 600; font-size: .9375rem; }
.work-card dd { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.team { list-style: none; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .team { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.person { display: grid; gap: 10px; }
.person .portrait { aspect-ratio: 4 / 5; border-radius: var(--radius-card); background: var(--surface-raised); border: 1px dashed var(--border-input); display: grid; place-items: center; color: var(--accent); }
.person .portrait svg { width: 30%; height: auto; }
.person h3 { font-size: 1rem; }
.person p { color: var(--text-muted); font-size: .9375rem; }
.person .token, .work-card .token { font-size: .8rem; }

/* ---------- Contact cards ---------- */
.contact-cards { list-style: none; display: grid; gap: 14px; }
@media (min-width: 720px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.contact-card { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; background: var(--surface-raised); border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-raised); }
.cc-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent-text); }
.contact-card h3 { font-size: 1rem; color: var(--text-muted); font-weight: 500; margin-bottom: 4px; }
.contact-card a:not(.text-link) { color: var(--text); font-size: 1.125rem; font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.contact-card a:not(.text-link):hover { text-decoration: underline; }
.contact-card p { color: var(--text); }
.contact-card .text-link { margin-top: 6px; min-height: 44px; }
.cc-clock { margin-top: 8px; color: var(--text-muted) !important; font-size: .9375rem; }
.cc-clock .clock { color: var(--text); font-weight: 600; }
.social-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.social-row a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-input); color: var(--text); text-decoration: none; font-weight: 500; }
.social-row a:hover { border-color: var(--text); }
.social-row.is-compact { margin-top: 0; gap: 4px; }
.social-row.is-compact a { padding: 0; width: 44px; justify-content: center; border-color: transparent; color: var(--text-muted); }
.social-row.is-compact a:hover { color: var(--text); background: var(--surface); }
.social-row.is-compact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.footer-follow { margin-top: 24px; }

/* ---------- Article extras ---------- */
.pull-quote { margin: .6em 0; padding-inline-start: 22px; border-inline-start: 3px solid var(--accent); }
.pull-quote p { font-size: 1.375rem; line-height: 1.4; font-weight: 500; color: var(--text); text-wrap: balance; }
.article-head .meta [data-odyssey-post="author"] { color: var(--text); font-weight: 500; }
.legal-section { border: 0 !important; padding-top: 8px; }
.notfound .alt-lang-text { margin-block: 10px 16px; }
.notfound .alt-lang-home { margin-top: 12px; }
.site-footer .social-row { display: flex; }
.section .prose > h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; margin-block-end: .25em; }
html[lang="ar"] .section .prose > h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: 0; font-weight: 600; }
@media (min-width: 1080px) { .contact-card.is-wide { grid-column: span 2; } }

/* Strategic partners */
.strategic-card { align-content: end; }
.strategic-logo img { height: 46px; width: auto; }
.strategic-card .text-link { margin-top: 4px; }
.strategic-name { font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
/* Home: technology and strategic partners side by side */
.partner-groups { display: grid; gap: 22px; }
@media (min-width: 900px) { .partner-groups { grid-template-columns: auto auto; justify-content: start; gap: 0; } .partner-group.is-strategic { border-inline-start: 1px solid var(--border); padding-inline-start: 40px; margin-inline-start: 40px; } }
.pg-label { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); margin-bottom: 10px; }
.partner-group .partner-logo { text-decoration: none; }
.partner-nawa .partner-logo img { height: 40px; }
.work-more { margin-top: 18px; }
.work-card .text-link { position: relative; margin-top: 6px; }
.marquee-row li.is-word span { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--text); opacity: .7; white-space: nowrap; transition: opacity .3s var(--ease); }
.marquee-row li.is-word:hover span { opacity: 1; }
/* Oryxa's mark carries a tall horn above the wordmark, so it needs more height to read at the same size as the others */
.strategic-logo img[src*="oryxa"] { height: 76px; }
.partner-logo img[src*="oryxa"] { max-height: 64px; height: 64px; width: auto; }
.marquee-row img[src*="oryxa"] { max-height: 60px; max-width: 170px; }
.marquee-row img[src*="mid-takseet"], .marquee-row img[src*="moishi"], .marquee-row img[src*="zahi-perfume"] { max-height: 58px; }
.marquee-row img[src*="safqqa"] { max-width: 170px; }
.marquee-row img[src*="agrocorp"] { max-height: 56px; }