/* Alturath Tech, prototype v19. */
:root {
  --ivory: #f6f4ef; --ivory-2: #ece8df; --surface: #fbfaf7;
  --ink: #121629; --ink-2: #545a6b; --line: #e2ddd2;
  --navy: #0b1230; --navy-2: #141c42; --on-navy: #eef0f6; --on-navy-2: #a9b0c6;
  --bronze: #a8743f; --bronze-text: #8a5a2b; --bronze-light: #d4ab78;
  --f-sans: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-brand: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  /* Headings in a geometric Kufi; reading text stays in Plex */
  --f-head: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
  --t-h1: clamp(34px, 4.4vw, 64px); --t-h2: clamp(28px, 3.2vw, 44px); --t-h3: clamp(20px, 1.7vw, 24px);
  --t-lede: clamp(17px, 1.3vw, 19px); --t-small: 14px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --section: clamp(64px, 8vw, 112px); --gutter: clamp(16px, 4vw, 48px);
  --r-sm: 10px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(18,22,41,.04), 0 12px 32px -18px rgba(18,22,41,.18);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --head-h: 68px;
  --bricks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07'%3E%3Cpath d='M0 .5h56M0 14.5h56M.5 0v14M28.5 14v14'/%3E%3C/g%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 8px); }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--f-sans); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* Kufi stands tall and carries marks above the letters, so Arabic headings get room between lines */
h1, h2, h3, h4 { margin: 0; font-family: var(--f-head); line-height: 1.45; font-weight: 700; text-wrap: balance; }
html[lang="en"] :is(h1, h2, h3, h4) { line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--navy); color: var(--on-navy); text-decoration: none; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-pill); font: 600 16px/1 var(--f-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-primary { background: var(--navy); color: var(--on-navy); }
.btn-secondary { background: transparent; color: var(--ink); border-color: rgba(18,22,41,.22); }
.btn-light { background: var(--ivory); color: var(--navy); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(238,240,246,.45); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(18,22,41,.35); }
@media (hover: hover) and (pointer: fine) { .btn-light:hover { background: #fff; } .btn-ghost:hover { border-color: #fff; } .btn-primary:hover { background: var(--navy-2); } .btn-secondary:hover { border-color: var(--ink); } .text-link:hover { text-decoration-color: currentColor; } }

/* Header */
.progress { position: absolute; inset: auto 0 -1px 0; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--bronze); transform-origin: right; transform: scaleX(0); }
.site-head { position: sticky; top: 0; z-index: 50; color: var(--ink); background: rgba(246,244,239,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: background-color 250ms ease, border-color 200ms ease, color 250ms ease; }
/* Over the dark hero the header turns clear and light; app.js sets .on-dark while the hero is under it */
.site-head.on-dark:not(.menu-open) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; color: #fff; }
.site-head.on-dark:not(.menu-open) .brand .logo { color: #fff; --logo-accent: var(--bronze-light); }
.site-head.on-dark:not(.menu-open) .site-nav a, .site-head.on-dark:not(.menu-open) .head-actions .lang { color: rgba(238,240,246,.82); }
.site-head.on-dark:not(.menu-open) .site-nav a:hover, .site-head.on-dark:not(.menu-open) .site-nav a[aria-current] { color: #fff; }
.site-head.on-dark:not(.menu-open) .head-actions .btn-primary { background: var(--ivory); color: var(--navy); }
.site-head.on-dark:not(.menu-open) .menu-btn { color: #fff; }
/* Once the page moves, the clear header turns to dark glass so the hero text never runs under the links */
.site-head.on-dark.is-scrolled:not(.menu-open) { background: rgba(11,18,48,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.site-head.is-scrolled { border-bottom-color: var(--line); }
.head-row { height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
/* The mark is inline SVG in two colours: the robot takes the text colour, the seal the bronze */
.logo { display: block; flex: none; width: auto; color: var(--navy); --logo-accent: var(--bronze); }
.logo .ink { fill: currentColor; }
.logo .ink-s { stroke: currentColor; }
.logo .accent { fill: var(--logo-accent); }
.brand .logo { height: 42px; }
.brand span { font-family: var(--f-brand); font-weight: 700; font-size: 19px; line-height: 1; }
.site-nav { display: flex; gap: var(--s-6); font-size: 15px; font-weight: 500; }
.site-nav a { text-decoration: none; padding-block: var(--s-2); color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); }
/* The section you are reading, or the page you are on */
.site-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 2px; text-underline-offset: 10px; }
.head-actions { display: flex; align-items: center; gap: var(--s-4); }
.lang { font-size: 14px; color: var(--ink-2); text-decoration: none; padding: var(--s-2) var(--s-1); }
.menu-btn { display: none; width: 44px; height: 44px; margin-inline-end: -8px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.menu-icon, .menu-icon::before { display: block; width: 20px; height: 1.5px; margin-inline: auto; background: currentColor; transition: transform 240ms var(--ease-out); }
.menu-icon { position: relative; transform: translateY(-4px); }
.menu-icon::before { content: ""; position: absolute; top: 8px; inset-inline-end: 0; }
.menu-btn[aria-expanded="true"] .menu-icon { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon::before { transform: translateY(-8px) rotate(-90deg); }
.mobile-menu { position: absolute; inset-inline: 0; top: 100%; max-height: calc(100vh - var(--head-h)); overflow-y: auto; border-top: 1px solid var(--line); background: var(--ivory); box-shadow: 0 24px 40px -24px rgba(18,22,41,.35); }
.mobile-menu nav { display: flex; flex-direction: column; padding-block: var(--s-3) var(--s-5); }
.mobile-menu nav > a { padding-block: var(--s-3); font-size: 20px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-menu-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-5); }
@media (max-width: 900px) {
  :root { --head-h: 60px; }
  .site-nav, .head-actions > .lang, .head-actions > .btn { display: none; }
  .menu-btn { display: block; }
  .brand .logo { height: 36px; }
  .brand span { font-size: 19px; }
}

/* Hero: the headline over the "Saving Iraqi Culture" monument; the products follow in the sections below.
   On iPhone, Safari's toolbar floats over the page and the page shows through it, down to the bottom
   of the screen, about 58px past 100lvh (measured on an iPhone 17 simulator: svh 714, lvh 754, visible 812).
   So on touch screens the hero runs on under the toolbar and the next section starts out of sight.
   The scroll cue is pinned to the top of the hero at 100svh, which is always above the toolbar. */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; margin-top: calc(-1 * var(--head-h)); padding-block: calc(var(--head-h) + 32px) 64px; background: var(--navy); color: var(--on-navy); }
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 10%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 36% at 50% 50%, rgba(11,18,48,.5), transparent 75%), linear-gradient(to bottom, rgba(11,18,48,.88) 0%, rgba(11,18,48,.6) 40%, rgba(11,18,48,.6) 62%, rgba(11,18,48,.94) 100%); }
.hero-copy { max-width: 900px; margin-inline: auto; text-align: center; }
.hero-copy h1 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.55; color: #fff; }
/* The page behind the dark hero is navy too, so overscroll and the phone's top bar match it */
html:has(.hero) { background: var(--navy); }
@media (hover: none) and (pointer: coarse) { .hero { min-height: calc(100lvh + 64px); } }
/* Safari on iPhone tints its status bar from the page background: navy behind the hero, ivory content */
html:has(.hero) body { background: var(--navy); }
html:has(.hero) main { background: var(--ivory); }
/* A quiet cue that the page continues below the full-screen hero */
/* It sits at the start edge, in line with the logo, with its label beside it */
.hero-foot { position: absolute; top: calc(100svh - 62px); inset-inline: 0; pointer-events: none; }
.hero-cue { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: rgba(238,240,246,.8); font-size: 14px; font-weight: 500; text-decoration: none; text-shadow: 0 1px 10px rgba(11,18,48,.75); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .hero-cue:hover { color: #fff; } }
.cue-line { position: relative; display: block; flex: none; width: 1px; height: 40px; overflow: hidden; background: rgba(238,240,246,.32); }
.cue-line::after { content: ""; position: absolute; top: -14px; left: -1px; width: 3px; height: 14px; border-radius: 2px; background: var(--bronze-light); animation: cue 2.4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cue { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(56px); } }
.hero-lede { margin: var(--s-5) auto 0; max-width: 38em; font-size: var(--t-lede); color: rgba(238,240,246,.86); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 900px) { .hero-actions .btn { flex: 1 1 0; } }
/* Phones and portrait tablets: the whole monument stands at the foot of the hero and fades up
   into the navy, so the headline sits above its sky rather than across the figures */
@media (orientation: portrait) and (max-width: 900px) {
  .hero { justify-content: flex-start; }
  .hero-bg img { top: auto; bottom: 0; height: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, #000 34%); }
  .hero-bg::after { background: linear-gradient(to bottom, rgba(11,18,48,.6) 0%, rgba(11,18,48,.5) 45%, rgba(11,18,48,.35) 70%, rgba(11,18,48,.8) 100%); }
}

/* Phone frame */
/* The bezel is measured against the phone itself (padding % would follow the parent and thicken it) */
.phone { position: relative; aspect-ratio: 9 / 19.5; background: #0a0d18; border-radius: 15% / 7%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 30px 60px -30px rgba(10,13,24,.55); }
.phone img { position: absolute; top: 1.015%; left: 2.2%; width: 95.6%; height: 97.97%; max-width: none; object-fit: cover; object-position: top; border-radius: 13.4% / 6%; }
/* Store screenshots already carry their own device art, so they get a plain rounded card */
.shot { border-radius: 22px; overflow: hidden; background: var(--ivory-2); box-shadow: 0 30px 60px -32px rgba(10,13,24,.5); }
.shot img { width: 100%; height: auto; }

/* Sections */
.section { padding-block: var(--section); }
.section-head { max-width: 640px; margin-bottom: var(--s-7); }
.section-head h2 { font-size: var(--t-h2); }
.section-head p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-lede); }

/* Products */
.product { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .product:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(18,22,41,.04), 0 24px 48px -24px rgba(18,22,41,.28); } }
.product-media { display: flex; align-items: flex-end; justify-content: center; gap: 6%; aspect-ratio: 16 / 10; padding: 7% 10% 0; background: var(--tint, var(--ivory-2)); overflow: hidden; }
.product-media .phone { width: 30%; transform: translateY(8%); }
.product-media .phone:nth-child(2) { transform: translateY(18%); }
.product-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
.product-kind { font-size: var(--t-small); font-weight: 500; color: var(--bronze-text); }
.product h3 { font-size: var(--t-h3); }
.product-desc { color: var(--ink-2); font-size: 16px; }
@media (max-width: 600px) { .product-media { aspect-ratio: 16 / 11; padding: 20px 24px 0; } .product-media .phone { width: 33%; } }
/* The whole card opens the project page; its own buttons stay clickable above the cover link */
.product h3 a { color: inherit; text-decoration: none; }
.product h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-actions { position: relative; z-index: 2; }
/* "Details" is a picture of a button: clicks pass through it to the card's cover link */
.product-actions, .wow-actions { pointer-events: none; }
.product-actions a, .wow-actions a { pointer-events: auto; }
.product h3 a:focus-visible { outline: none; }
.product:has(h3 a:focus-visible) { outline: 2px solid var(--bronze); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .product:has(h3 a:hover) h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; } }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: auto; padding-top: var(--s-4); }
.product { position: relative; }
.product-label { align-self: flex-start; margin-bottom: var(--s-2); padding: 4px 12px; border-radius: var(--r-pill); background: rgba(168,116,63,.12); color: var(--bronze-text); font-size: 14px; font-weight: 600; }
.product-shade { position: absolute; inset: 0; background: var(--navy); opacity: 0; pointer-events: none; }
.stack { display: flex; flex-direction: column; gap: var(--s-6); }
@media (min-width: 900px) and (min-height: 640px) {
  .stack-item { position: sticky; top: calc(var(--head-h) + 20px + var(--i) * 14px); transform-origin: 50% 0; }
  .stack .product { flex-direction: row-reverse; height: min(520px, calc(100vh - var(--head-h) - 120px)); }
  .stack .product-media { flex: 1 1 56%; aspect-ratio: auto; padding: 40px 32px 0; }
  .stack .product-media .phone { width: 31%; }
  .stack .product-body { flex: 1 1 44%; justify-content: center; padding: var(--s-7); }
  .stack .product h3 { font-size: var(--t-h2); }
  .stack .product-desc { font-size: var(--t-lede); }
  .stack .product-actions { margin-top: var(--s-3); }
}

/* Services: three panels that slide sideways while pinned */
.services { background: var(--surface); border-block: 1px solid var(--line); padding-block: var(--section); }
.services-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-5) var(--s-7); }
.services-top .section-head { margin-bottom: 0; }
.svc-tabs { display: none; gap: var(--s-5); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.svc-tabs button { display: grid; gap: var(--s-2); min-width: 120px; padding: var(--s-2) 0 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .svc-tabs button:hover { color: var(--ink); } }
.svc-tabs i { display: block; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.svc-tabs i::after { content: ""; position: absolute; inset: 0; background: var(--bronze); transform-origin: right; transform: scaleX(var(--p, 0)); }
.svc-tabs li.is-on { color: var(--ink); }
.svc-track { display: flex; flex-direction: column; gap: var(--s-7); margin-top: var(--s-7); }
.svc-panel-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--s-7); }
.svc-text h3 { font-size: var(--t-h2); }
.svc-text > p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-lede); max-width: 30em; }
.svc-text ul { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); display: grid; gap: var(--s-2); font-size: 16px; }
.svc-text li { position: relative; padding-inline-start: 18px; }
.svc-text li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 6px; height: 6px; background: var(--bronze); border-radius: 1px; }
.svc-eg { margin-top: var(--s-5); font-size: 14px; font-weight: 500; color: var(--bronze-text); }
.svc-visual { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r-lg); overflow: hidden; background: var(--bricks), radial-gradient(70% 60% at 50% 100%, rgba(168,116,63,.22), transparent 70%), var(--navy); display: grid; place-items: end center; padding-inline: 7%; }
.trio { display: flex; align-items: flex-end; justify-content: center; gap: 5%; width: 100%; }
.trio .phone { width: 28%; margin-bottom: -14%; }
.trio .phone:nth-child(2) { width: 32%; margin-bottom: -6%; }
.web-vis { position: relative; width: 100%; height: 100%; }
.browser { position: absolute; top: 10%; inset-inline-end: 0; width: 86%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding-inline: 12px; background: #e9e7e2; direction: ltr; }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9c5bc; }
.browser-bar span { margin-inline-start: 10px; font-size: 11px; color: #555a66; }
.browser img { width: 100%; }
.web-vis .phone { position: absolute; bottom: -14%; inset-inline-start: 4%; width: 24%; }
.services-note { margin-top: var(--s-7); max-width: 60em; color: var(--ink-2); font-size: 16px; }
/* Set by app.js only while the section is actually pinned; without it the panels simply stack */
.svc-h .svc-tabs { display: flex; }
.svc-h .services { padding-block: 0 var(--section); }
.svc-h .services-pin { height: 100vh; display: flex; flex-direction: column; padding-top: calc(var(--head-h) + 40px); overflow: hidden; }
.svc-h .svc-track { flex-direction: row; gap: 0; width: max-content; flex: 1; margin-top: var(--s-5); }
.svc-h .svc-panel { width: 100vw; flex: none; display: flex; align-items: center; padding-bottom: var(--s-6); }
.svc-h .svc-panel-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.svc-h .svc-visual { width: min(100%, calc((100vh - var(--head-h) - 290px) * 1.4545)); justify-self: start; }
@media (max-width: 900px) {
  .svc-panel-in { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* About: the story over the Mustansiriya's arches */
.about { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--on-navy); }
.about-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.about-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.about-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(11,18,48,.97) 0%, rgba(11,18,48,.93) 36%, rgba(11,18,48,.55) 70%, rgba(11,18,48,.3) 100%), linear-gradient(to top, rgba(11,18,48,.85), transparent 40%); }
.about-copy { max-width: 580px; }
.about-copy h2 { font-size: var(--t-h2); }
.about-copy > p { margin-top: var(--s-4); color: var(--on-navy-2); font-size: var(--t-lede); max-width: 34em; }
.founder { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(238,240,246,.14); }
.founder blockquote { margin: 0; font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; line-height: 1.7; }
.founder figcaption { margin-top: var(--s-3); font-size: var(--t-small); color: var(--bronze-light); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8); margin: var(--s-7) 0 0; padding-top: var(--s-6); border-top: 1px solid rgba(238,240,246,.14); max-width: 580px; }
.facts dt { font-family: var(--f-head); font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; color: var(--bronze-light); }
.facts dd { margin: var(--s-1) 0 0; color: var(--on-navy-2); font-size: 15px; }
@media (max-width: 900px) {
  .about { padding-top: 0; }
  .about-bg { bottom: auto; height: 78vw; }
  .about-bg::after { background: linear-gradient(to bottom, rgba(11,18,48,.2), rgba(11,18,48,.55) 55%, var(--navy)); }
  .about .wrap { padding-top: 58vw; }
}

/* Process */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s-5); }
.steps h3 { margin-top: var(--s-2); font-size: 18px; }
.steps p { margin-top: var(--s-2); color: var(--ink-2); font-size: 15px; }

/* Contact */
.contact { position: relative; overflow: hidden; background: var(--navy); color: var(--on-navy); }
.contact-bg { position: absolute; inset: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.contact-bg::after { content: ""; position: absolute; inset: 0; background: var(--bricks), linear-gradient(to bottom, rgba(11,18,48,.82), rgba(11,18,48,.94)); }
.contact .contact-grid { position: relative; }
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--s-7) var(--s-8); align-items: start; }
.contact-intro h2 { font-size: var(--t-h2); }
.contact-intro > p { margin-top: var(--s-3); color: var(--on-navy-2); font-size: var(--t-lede); max-width: 30em; }
.channels { margin-top: var(--s-6); border-top: 1px solid rgba(238,240,246,.14); }
.channels a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; border-bottom: 1px solid rgba(238,240,246,.14); text-decoration: none; font-weight: 500; }
.ch-val { color: var(--on-navy-2); font-size: 15px; font-weight: 400; }
.contact-form { background: var(--surface); color: var(--ink); border-radius: var(--r-md); padding: var(--s-6); display: grid; gap: var(--s-4); }
.contact-form h3 { font-size: var(--t-h3); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: 15px; font-weight: 600; }
.optional { font-weight: 400; color: var(--ink-2); font-size: 14px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #cfc9bc; border-radius: var(--r-sm); background: #fff; color: var(--ink); font: 400 16px/1.6 var(--f-sans); }
.field textarea { resize: vertical; min-height: 120px; }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field-error { color: #b3261e; font-size: 14px; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.form-note { font-size: 14px; color: var(--ink-2); }
.form-status { font-size: 14px; font-weight: 500; color: var(--navy); }
.form-status:empty { display: none; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-form { padding: var(--s-5); } .form-actions .btn { flex: 1 1 100%; } }

/* Cuneiform: a faint field behind the hero, lit near the pointer */
/* The signs stay in the sky: faded towards the phones and kept out from behind the headline */
.cune-field { --hole: 36% 24%; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse var(--hole) at 50% 50%, transparent 45%, #000 100%), linear-gradient(to bottom, #000 40%, transparent 70%); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse var(--hole) at 50% 50%, transparent 45%, #000 100%), linear-gradient(to bottom, #000 40%, transparent 70%); mask-composite: intersect; }
.cf-layer { position: absolute; inset: -12px; overflow: hidden; font-family: "Noto Sans Cuneiform", serif; font-size: 30px; line-height: 1.55; letter-spacing: .32em; word-break: break-all; user-select: none; }
.cf-base { color: rgba(238,240,246,.045); }
.cf-glow { color: var(--bronze-light); opacity: 0; -webkit-mask-image: radial-gradient(200px circle at var(--mx, 30%) var(--my, 35%), #000, transparent 72%); mask-image: radial-gradient(200px circle at var(--mx, 30%) var(--my, 35%), #000, transparent 72%); }
/* A band of light crosses the signs in the reading direction whenever the pointer rests.
   The band moves one way and its copy of the signs the other, so the signs stay put and nothing repaints. */
.cf-sweep { position: absolute; top: 0; bottom: 0; left: 0; right: auto; width: 38%; overflow: hidden; opacity: 0; will-change: transform, opacity; -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent); mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent); }
.cf-sweep-in { inset: auto; top: -12px; left: -12px; color: var(--bronze-light); opacity: .62; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .cf-sweep { display: none; } }
@media (max-width: 900px) { .cune-field { --hole: 75% 22%; } .cf-layer { font-size: 22px; } .cf-glow { display: none; } }
/* Phones: the headline sits at the top, so the signs stay quiet behind it and fade out before the photo */
@media (orientation: portrait) and (max-width: 900px) {
  .cune-field { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 9%, rgba(0,0,0,.22) 20%, rgba(0,0,0,.22) 48%, transparent 60%); mask-image: linear-gradient(to bottom, #000 0, #000 9%, rgba(0,0,0,.22) 20%, rgba(0,0,0,.22) 48%, transparent 60%); }
  .cf-base { color: rgba(238,240,246,.035); }
  .cf-sweep-in { opacity: .34; }
}

/* Cuneiform strip between the hero and the story */
.cune-strip { overflow: hidden; background: #0f1838; border-bottom: 1px solid rgba(238,240,246,.08); padding-block: 14px; }
.cs-track { display: inline-flex; white-space: nowrap; font-family: "Noto Sans Cuneiform", serif; font-size: 30px; line-height: 1.4; color: var(--bronze-light); will-change: transform; }
.cs-track span { padding-inline: 18px; }
.cs-track i { font-style: normal; padding-inline: 18px; color: rgba(212,171,120,.45); }

/* Process: a line that lights each step as it reaches it */
.steps-wrap { position: relative; }
.steps-line { position: absolute; top: 17px; inset-inline: 0; height: 2px; background: var(--line); }
.steps-line span { display: block; height: 100%; background: var(--bronze); transform-origin: right; transform: scaleX(var(--p, 1)); }
.steps li { position: relative; border-top: 0; padding-top: 56px; }
.step-n { position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--line); font-size: 16px; line-height: 1; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
.steps li.is-on .step-n { background: var(--bronze); border-color: var(--bronze); color: #fff; }
@media (max-width: 900px) {
  .steps-line { top: 0; bottom: 0; inset-inline: 17px auto; width: 2px; height: auto; }
  .steps-line span { width: 100%; height: 100%; transform-origin: top; transform: scaleY(var(--p, 1)); }
  .steps { grid-template-columns: 1fr; gap: var(--s-5); }
  .steps li { padding-top: 4px; padding-inline-start: 56px; }
}

/* Headings rise word by word */
.split .wm { display: inline-block; vertical-align: top; padding-block: .45em .25em; margin-block: -.45em -.25em; }
/* Words rise out of a clipped box; the box is tall enough for a damma or shadda above the tallest
   letter, and the clip comes off once the words have arrived */
.motion .split:not(.is-done) .wm { overflow: hidden; }
.split .wi { display: inline-block; }

/* Footer */
.site-foot { background: #070b1f; color: var(--on-navy-2); font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-6); padding-block: var(--s-8) var(--s-6); }
.foot-brand .brand { color: var(--on-navy); }
.foot-brand .logo { height: 58px; color: var(--on-navy); --logo-accent: var(--bronze-light); }
.foot-brand p { margin-top: var(--s-3); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.foot-col h2 { font-size: 15px; font-weight: 600; color: var(--on-navy); margin-bottom: var(--s-1); }
.foot-col a { text-decoration: none; padding-block: 2px; }
.foot-col a:hover { color: var(--on-navy); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6); padding-block: var(--s-5) var(--s-6); border-top: 1px solid rgba(238,240,246,.1); font-size: 13px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } .foot-col { gap: 0; } .foot-col h2 { margin-bottom: var(--s-2); } .foot-col a { display: inline-flex; align-items: center; min-height: 44px; } }

/* Achievements: the WOW maps, under the work */
.wow { padding-top: 0; }
.wow-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: var(--r-md); overflow: hidden; background: var(--bricks), var(--navy); color: var(--on-navy); box-shadow: var(--shadow-card); }
.wow-media { display: grid; gap: 4px; background: #070b1f; }
.wow-media img { width: 100%; height: 100%; object-fit: cover; }
.wow-body { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); padding: clamp(24px, 4vw, 56px); }
.wow-body .product-kind { color: var(--bronze-light); }
.wow-body h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; }
.wow-body h3 a { color: inherit; text-decoration: none; }
.wow-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wow-body h3 a:focus-visible { outline: none; }
.wow-card:has(h3 a:focus-visible) { outline: 2px solid var(--bronze); outline-offset: 3px; }
.wow-body > p { color: var(--on-navy-2); font-size: var(--t-lede); }
.wow-facts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); margin: var(--s-2) 0 0; padding-top: var(--s-4); border-top: 1px solid rgba(238,240,246,.14); }
.wow-facts dt { font-family: var(--f-head); font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; color: var(--bronze-light); }
.wow-facts dd { margin: 0; font-size: 14px; color: var(--on-navy-2); }
.wow-actions { position: relative; z-index: 2; margin-top: var(--s-4); }
@media (min-width: 901px) { .wow-media { order: 2; } }
@media (max-width: 900px) { .wow-card { grid-template-columns: 1fr; } }

/* Project pages */
.pj-hero { position: relative; overflow: hidden; background: linear-gradient(var(--tint), var(--tint)), var(--ivory); padding-top: clamp(24px, 5vh, 64px); }
.pj-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); min-height: min(76vh, 700px); }
.pj-copy { align-self: center; padding-bottom: clamp(40px, 8vh, 96px); }
.pj-back { color: var(--ink-2); }
.pj-id { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.pj-logo { width: 52px; height: 52px; padding: 5px; border-radius: 14px; background: #fff; object-fit: contain; box-shadow: var(--shadow-card); }
.pj-copy h1 { margin-top: var(--s-3); font-size: var(--t-h1); line-height: 1.2; }
.pj-lede { margin-top: var(--s-4); max-width: 34em; font-size: var(--t-lede); color: var(--ink-2); }
.pj-meta { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); margin: var(--s-5) 0 0; }
.pj-meta dt { font-size: 14px; color: var(--ink-2); }
.pj-meta dd { margin: 2px 0 0; font-weight: 600; }
.pj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.pj-visual { align-self: end; display: flex; justify-content: center; align-items: flex-end; gap: 4%; padding-top: var(--s-5); }
.pj-visual > * { flex: none; width: 31%; margin-bottom: -16%; }
.pj-visual > :nth-child(2) { width: 39%; margin-bottom: -6%; z-index: 1; }
.pj-visual.is-wide { flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; padding-bottom: clamp(40px, 8vh, 96px); }
.pj-visual.is-wide > * { width: 100%; margin: 0; }
.pj-overview-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-5) var(--s-8); }
.pj-overview h2, .pj-features h2 { font-size: var(--t-h2); }
.pj-overview-text p { font-size: var(--t-lede); color: var(--ink-2); }
.pj-overview-text p + p { margin-top: var(--s-4); }
.pj-overview-text .pj-note { font-size: 14px; }
.pj-list-title { margin-top: var(--s-6); font-size: 17px; }
.pj-list { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.pj-overview-text .wide { margin-top: var(--s-6); }
.pj-list li { position: relative; padding-inline-start: 18px; }
.pj-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 6px; height: 6px; background: var(--bronze); border-radius: 1px; }
.pj-features { padding-bottom: var(--section); }
.pj-feat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
.pj-feat { display: flex; flex-direction: column; justify-content: center; min-height: 72vh; padding-block: var(--s-6); border-top: 1px solid var(--line); transition: border-color 300ms ease; }
.pj-feat.is-on { border-top-color: var(--bronze); }
.pj-feat h3 { font-size: clamp(22px, 2.2vw, 30px); }
.pj-feat p { margin-top: var(--s-3); max-width: 30em; font-size: var(--t-lede); color: var(--ink-2); }
.pj-feat-code { margin-top: var(--s-3); font-size: 15px; font-weight: 600; color: var(--bronze-text); }
.pj-feat-img { display: none; }
.pj-stage { position: sticky; top: calc(var(--head-h) + 32px); height: calc(100vh - var(--head-h) - 64px); display: grid; place-items: center; }
.pj-stage > * { grid-area: 1 / 1; height: min(100%, 680px); width: auto; aspect-ratio: var(--ar, 9 / 19.5); opacity: 0; transform: translateY(24px) scale(.98); transition: opacity 450ms ease, transform 650ms var(--ease-out); }
.pj-stage > .wide { width: 100%; height: auto; }
.pj-stage > .is-on { opacity: 1; transform: none; }
.pj-stage .shot img, .pj-stage .wide img { width: 100%; height: 100%; object-fit: cover; }
.wide { border-radius: var(--r-md); overflow: hidden; box-shadow: 0 30px 60px -32px rgba(10,13,24,.5); }
.wide img { width: 100%; }
.pj-cta { background: var(--bricks), var(--navy); color: var(--on-navy); }
.pj-cta-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5) var(--s-7); }
.pj-cta h2 { font-size: var(--t-h2); }
.pj-cta p { margin-top: var(--s-2); color: var(--on-navy-2); font-size: var(--t-lede); }
.pj-cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pj-next { padding-block: var(--s-8); }
.pj-next a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-decoration: none; box-shadow: var(--shadow-card); }
.pj-next small { display: block; font-size: 14px; color: var(--ink-2); }
.pj-next strong { display: block; margin-top: 2px; font-size: var(--t-h3); }
.pj-next span[aria-hidden] { font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .pj-next a:hover { border-color: rgba(18,22,41,.3); } }
@media (max-width: 900px) {
  .pj-hero-grid, .pj-overview-grid, .pj-feat-grid { grid-template-columns: 1fr; }
  .pj-hero-grid { gap: var(--s-4); min-height: 0; }
  .pj-copy { padding-bottom: 0; }
  .pj-feat-media { display: none; }
  .pj-feat { min-height: 0; padding-block: var(--s-6) var(--s-7); }
  .pj-feat-img { display: block; margin-top: var(--s-5); width: min(68%, 300px); }
  .pj-feat-img.wide { width: 100%; }
  .pj-visual.is-wide { padding-bottom: var(--s-7); }
}

/* How we build: engineering and design, each point traced to a real project */
.craft { background: var(--bricks), var(--navy); color: var(--on-navy); }
.craft .section-head p { color: var(--on-navy-2); }
.craft-block + .craft-block { margin-top: var(--s-8); }
.craft-label { margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid rgba(238,240,246,.14); font-size: var(--t-h3); color: #fff; }
.craft-eng { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.craft-eng li { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: 1px solid rgba(238,240,246,.12); border-radius: var(--r-md); background: rgba(255,255,255,.03); }
.craft h4 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; color: #fff; }
.craft li p { font-size: 15px; color: var(--on-navy-2); }
.craft-proof { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-top: auto; font-size: 14px; font-weight: 600; color: var(--bronze-light); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(212,171,120,.45); }
@media (hover: hover) and (pointer: fine) { .craft-proof:hover { text-decoration-color: currentColor; } }
.craft-stack { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.craft-stack p { font-size: 14px; color: var(--on-navy-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-family: "Red Hat Text", var(--f-sans); padding: 4px 12px; border: 1px solid rgba(238,240,246,.2); border-radius: var(--r-pill); font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--on-navy); direction: ltr; }
.craft-design { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.craft-design li { display: flex; flex-direction: column; gap: var(--s-2); }
.craft-shot { margin-bottom: var(--s-3); aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: 0 24px 48px -28px rgba(0,0,0,.6); }
.craft-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 1100px) { .craft-eng, .craft-design { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .craft-eng, .craft-design { grid-template-columns: 1fr; } }

/* Project pages: how it's built */
.pj-build { background: var(--surface); border-block: 1px solid var(--line); }
.pj-build-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-5) var(--s-8); }
.pj-build h2 { font-size: var(--t-h2); }
.pj-stack-label { margin-top: var(--s-5); font-size: 14px; color: var(--ink-2); }
.pj-build .chips { margin-top: var(--s-3); }
.pj-build .chips li { border-color: var(--line); background: #fff; color: var(--ink); }
.pj-build-list li { position: relative; padding-block: var(--s-4); padding-inline-start: 28px; border-top: 1px solid var(--line); font-size: 17px; }
.pj-build-list li:last-child { border-bottom: 1px solid var(--line); }
.pj-build-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: calc(var(--s-4) + .8em); width: 12px; height: 2px; background: var(--bronze); }
@media (max-width: 900px) { .pj-build-grid { grid-template-columns: 1fr; } }

/* Privacy and terms */
.legal { padding-top: clamp(32px, 6vh, 72px); }
.legal-in { max-width: 760px; }
.legal h1 { font-size: var(--t-h2); }
.legal-updated { margin-top: var(--s-2); font-size: 14px; color: var(--ink-2); }
.legal-lede { margin-top: var(--s-4); font-size: var(--t-lede); color: var(--ink-2); }
.legal section { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.legal h2 { font-size: 20px; }
.legal section p { margin-top: var(--s-2); color: var(--ink-2); }
.legal section b { font-weight: 600; color: var(--ink); }
.legal section a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .legal section a:hover { color: var(--bronze-text); } }

/* 404: one page in both languages */
.nf { min-height: 100svh; background: var(--bricks), radial-gradient(60% 50% at 50% 40%, rgba(168,116,63,.2), transparent 70%), var(--navy); color: var(--on-navy); }
.nf-main { display: grid; justify-items: center; align-content: center; gap: var(--s-6); min-height: 100svh; padding: var(--s-8) var(--gutter); text-align: center; }
.nf-brand { color: #fff; }
.nf-brand .logo { height: 72px; color: #fff; --logo-accent: var(--bronze-light); }
.nf-code { font-family: "Red Hat Display", var(--f-sans); font-size: clamp(72px, 16vw, 136px); font-weight: 700; line-height: 1; color: var(--bronze-light); }
.nf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: var(--s-7); }
.nf-grid h1, .nf-grid h2 { font-size: 22px; line-height: 1.4; color: #fff; }
.nf-grid p { margin-top: var(--s-2); color: var(--on-navy-2); }
.nf-grid .btn { margin-top: var(--s-5); }
.nf [lang="en"] { font-family: "Red Hat Text", sans-serif; }
.nf [lang="en"] h2 { font-family: "Red Hat Display", sans-serif; }
/* Latin names inside Arabic headings (SketchRush, PUBG Mobile…) keep the Latin face */
html[lang="ar"] [lang="en"] { --f-head: "Red Hat Display", "IBM Plex Sans Arabic", sans-serif; }
@media (max-width: 700px) { .nf-grid { grid-template-columns: 1fr; } }

/* English pages: Latin type, and the few details that point the other way */
/* English: Red Hat Display for headings and the wordmark, Red Hat Text (its reading cut) for everything else */
html[lang="en"] { --f-sans: "Red Hat Text", "IBM Plex Sans Arabic", system-ui, sans-serif; --f-brand: "Red Hat Display", sans-serif; --f-head: "Red Hat Display", "IBM Plex Sans Arabic", sans-serif; }
html[lang="en"] body { line-height: 1.65; }
html[lang="en"] h1, html[lang="en"] h2 { letter-spacing: -.015em; }
html[lang="en"] .hero-copy h1 { line-height: 1.12; letter-spacing: -.02em; }
/* The wordmark: Tektur, whose clipped corners echo the cuneiform wedge, in both languages */
.brand span[lang="en"] { font-family: "Tektur", "Red Hat Display", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .01em; }
.foot-brand .brand span[lang="en"] { font-size: 23px; }
.nf-brand span[lang="en"] { font-size: 26px; }
html[lang="en"] .about-copy h2 { font-weight: 700; }
[dir="ltr"] .progress span, [dir="ltr"] .svc-tabs i::after, [dir="ltr"] .steps-line span { transform-origin: left; }
[dir="ltr"] .about-bg::after { background: linear-gradient(to right, rgba(11,18,48,.97) 0%, rgba(11,18,48,.93) 36%, rgba(11,18,48,.55) 70%, rgba(11,18,48,.3) 100%), linear-gradient(to top, rgba(11,18,48,.85), transparent 40%); }
@media (max-width: 900px) {
  [dir="ltr"] .steps-line span { transform-origin: top; }
  [dir="ltr"] .about-bg::after { background: linear-gradient(to bottom, rgba(11,18,48,.2), rgba(11,18,48,.55) 55%, var(--navy)); }
}

/* WhatsApp shortcut on phones: shown once the hero is passed, hidden where the page already offers WhatsApp */
.wa-fab { position: fixed; z-index: 40; bottom: 16px; inset-inline-end: 16px; display: none; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1b9e4b; color: #fff; box-shadow: 0 12px 28px -10px rgba(10,13,24,.5); opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity 250ms ease, translate 320ms var(--ease-out); }
.wa-fab svg { width: 24px; height: 24px; }
.wa-fab.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
@media (max-width: 900px) { .wa-fab { display: grid; } }

/* Project pages: screenshots open larger */
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(7,11,31,.95); color: #fff; overscroll-behavior: contain; }
.lb[open] { display: grid; place-items: center; animation: lb-in 220ms ease; }
.lb::backdrop { background: transparent; }
@keyframes lb-in { from { opacity: 0; } }
.lb-img { max-width: min(92vw, 760px); max-height: 82dvh; width: auto; height: auto; border-radius: 16px; object-fit: contain; }
.lb-count { position: absolute; top: 24px; inset-inline-start: 24px; font-size: 14px; color: var(--on-navy-2); }
.lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(238,240,246,.25); border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 14px; inset-inline-end: 14px; }
.lb-prev, .lb-next { top: 50%; margin-top: -24px; }
.lb-prev { inset-inline-start: 16px; }
.lb-next { inset-inline-end: 16px; }
[dir="rtl"] .lb-prev svg, [dir="rtl"] .lb-next svg { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .lb-btn:hover { background: rgba(255,255,255,.14); } }
@media (max-width: 600px) { .lb-prev, .lb-next { top: auto; bottom: 20px; margin-top: 0; } }

/* Moving between the home page and a project page morphs the card into the project's hero */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 450ms; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

/* Motion: one quiet entrance, then content settles in once */
.motion .reveal { opacity: 0; translate: 0 16px; transition: opacity 600ms ease, translate 700ms var(--ease-out); }
.motion .reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }