/* =========================================================
   T-146 · رئيسية الشبكة: خطوط رفيعة على الحبر، أقسام مقسومة إلى خانات بحدود 1px، وجسم واحد من نقاط
   الهوية: Ink #0B0B0B · White · Pulse Cyan #18C7D9 إشارة فقط (نقطة السكة، المربع النشط، العينان)
   الخطوط: Alexandria للعناوين العربية · Readex Pro للنص · Manrope للاتيني والأرقام والكود الزخرفي
   التخطيط بخصائص منطقية فقط، فالـRTL ينعكس وحده
   ========================================================= */
:root {
  --ink: #0B0B0B;
  --w: #FFFFFF;
  --cy: #18C7D9;
  /* الرمادي بأبيض شفاف فوق الحبر لا بلون مصمت (identity-tokens/AGENT.md §2) */
  --t1: #FFFFFF;                     /* العناوين */
  --t2: rgba(255, 255, 255, .76);   /* النص */
  --t3: rgba(255, 255, 255, .62);   /* الثانوي */
  --t4: rgba(255, 255, 255, .5);    /* الأرقام الصغيرة والكود الزخرفي: .5 لا .46، فـ.46 تنزل عن 4.5 على الحواف */
  --grey-solid: #9E9E9E;            /* الاستثناء الواحد: الخط العربي الضخم في الهيرو */
  --line: rgba(255, 255, 255, .13);
  --line-2: rgba(255, 255, 255, .26);
  --line-s: #2B2B2B;      /* الخط نفسه مصمتاً، لئلا يتضاعف عند تقاطع الخانات */
  --grid: rgba(255, 255, 255, .038);
  --ar: 'Readex Pro', 'Segoe UI', Tahoma, sans-serif;
  --ard: 'Alexandria', 'Readex Pro', Tahoma, sans-serif;
  --lat: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 3vw, 40px);
  --bar: 56px;
  --cell: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { background: var(--ink); color-scheme: dark; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--bar) + 16px) }
body {
  font-family: var(--ar); font-size: 16px; line-height: 1.7; color: var(--t2);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  background-color: var(--ink);
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
ol, ul { list-style: none }
.lat { font-family: var(--lat) }
.sr, .skip:not(:focus) { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.skip:focus { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 50; background: var(--w); color: var(--ink); padding: 8px 14px }
/* T-147: رابط التخطّي في الصفحات ثنائية اللغة يحمل النصين، ويظهر منهما ما يطابق lang الصفحة (تقلبه سكربتات اللغة) */
.skip [lang] { display: none }
html[lang="ar"] .skip [lang="ar"], html[lang="en"] .skip [lang="en"] { display: inline }
.skip [lang="en"] { font-family: var(--lat) }
:focus-visible { outline: 2px solid var(--w); outline-offset: 2px }
.wrap { inline-size: min(100% - var(--gut) * 2, 1360px); margin-inline: auto }

/* الكتلة البيضاء على الكلمة المميزة */
.hl { background: var(--w); color: var(--ink); padding: .14em .2em .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone }

/* الجسم: خلف المحتوى، فوق الشبكة */
.field { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease) }
.field-on .field { opacity: 1 }
html.still .field { display: none }
main, .bar { position: relative; z-index: 1 }

/* الخانة: حدود 1px فقط، شفافة فيظهر الجسم خلفها */
/* حيلة الظلال الخمسة: خط 1px واحد بين كل خانتين مهما كان الترتيب (شبكة أو صف) */
.cell, .facts li, .fbar__name { --l: var(--line-s); box-shadow: 1px 0 0 0 var(--l), 0 1px 0 0 var(--l), 1px 1px 0 0 var(--l), 1px 0 0 0 var(--l) inset, 0 1px 0 0 var(--l) inset }
.cell { display: flex; align-items: center; min-block-size: var(--cell) }

/* الكود الزخرفي: لاتيني صغير، مخفي عن قارئات الشاشة */
.code { position: absolute; font-size: 10px; line-height: 1.3; letter-spacing: .02em; color: var(--t4); white-space: nowrap; direction: ltr; pointer-events: none; user-select: none }
.code i { font-style: normal; color: var(--t3) }

/* ---------- الترويسة ---------- */
.bar { position: sticky; inset-block-start: 0; z-index: 10; background: var(--ink) }
.bar__in { display: flex; align-items: stretch; block-size: var(--bar); padding-block-start: 0 }
.bar .cell { min-block-size: var(--bar); padding-inline: 20px; font-size: 14px; color: var(--t2); transition: color .2s var(--ease), background-color .2s var(--ease) }
.bar__brand { gap: 12px; color: var(--t1) !important; font-weight: 600 }
.bar__brand .lat { font-size: 14px; letter-spacing: .02em }
.mark { inline-size: 32px; block-size: auto; fill: var(--w) } /* حد الشعار الأدنى 24px */
.bar__nav { display: flex; margin-inline-end: auto }
.bar__in { position: relative }
.bar__menu { display: none; padding-inline: 18px; font-size: 14px; color: var(--t1) }
/* الصفحة الحالية في القائمة */
.bar__nav a[aria-current="page"] { color: var(--t1); background: rgba(255, 255, 255, .06) }
/* الترويسة الموحّدة: تحت 960px تنتقل الروابط إلى «القائمة» (grid/bar.js)، وبلا سكربت تنزل صفاً ثانياً */
@media (max-width: 960px) {
  .bar__brand { margin-inline-end: auto }
  .bar-js .bar__menu { display: flex }
  .bar-js .bar__nav { display: none; position: absolute; inset-block-start: var(--bar); inset-inline: 0; flex-direction: column; margin: 0; background: var(--ink); z-index: 11 }
  .bar-js.menu-open .bar__nav { display: flex }
  .bar-js .bar__nav .cell { min-block-size: 52px; padding-inline: 20px }
  html:not(.bar-js) .bar__in { flex-wrap: wrap; block-size: auto }
  html:not(.bar-js) .bar__nav { order: 3; inline-size: 100%; flex-wrap: wrap }
}
.bar__end { display: flex }
.bar__go { color: var(--t1) !important }
@media (hover: hover) and (pointer: fine) {
  .bar a.cell:hover { color: var(--w); background: rgba(255, 255, 255, .05) }
}

/* ---------- الهيرو ---------- */
.hero { padding-block: clamp(28px, 5vh, 56px) 0; min-block-size: calc(100svh - var(--bar)); display: flex; flex-direction: column }
.hero__grid {
  position: relative; flex: 1; display: grid;
  grid-template-columns: 1fr clamp(300px, 32vw, 460px) 1fr;
  grid-template-rows: auto 1fr auto; row-gap: 18px; align-items: center;
}
.corner { font-size: 13px; color: var(--t2); padding-inline: clamp(8px, 2.6vw, 40px); align-self: start; z-index: 2 }
.corner b { font-weight: 600; color: var(--t4); font-size: 11px; margin-inline-end: 6px; letter-spacing: .04em }
.corner a { color: var(--t2); unicode-bidi: isolate; display: inline-flex; align-items: center; min-block-size: 28px; padding-block: 4px } /* T-147: هدف لمس ≥24px (كان 17px) */
.corner--1 { grid-column: 1; grid-row: 1 }
.corner--2 { grid-column: 3; grid-row: 1; text-align: end }
.corner--3 { grid-column: 1; grid-row: 3; align-self: end }
.corner--4 { grid-column: 3; grid-row: 3; align-self: end; text-align: end }
.hero__h {
  grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: subgrid; align-items: center;
  font-family: var(--ard); font-weight: 600; font-size: clamp(30px, 3.9vw, 62px); line-height: 1.5; color: var(--grey-solid); z-index: 2;
}
.hero__h > span { padding-inline: clamp(8px, 2.6vw, 40px) }
.hero__a { grid-column: 1 }
.hero__b { grid-column: 3 }
.hero__b > span { margin-inline-start: auto }
.hero__h > span > span { display: block; inline-size: fit-content }
.hero__a .hl { margin-block-start: 4px }
.hero__obj { grid-column: 2; grid-row: 1 / 4; position: relative; align-self: stretch; border: 1px solid var(--line); min-block-size: 360px }
.tick { position: absolute; inline-size: 14px; block-size: 14px; border-color: var(--line-2); border-style: solid; border-width: 0 }
.tick--a { inset-block-start: -1px; inset-inline-start: -1px; border-block-start-width: 1px; border-inline-start-width: 1px }
.tick--b { inset-block-end: -1px; inset-inline-end: -1px; border-block-end-width: 1px; border-inline-end-width: 1px }
.code--t { top: 10px; right: 12px } /* rtl-ok: زخرفة لاتينية بموضع ثابت */
.code--e { bottom: 10px; left: 12px } /* rtl-ok */
.code--s { top: 12px; left: 4px; writing-mode: vertical-rl } /* rtl-ok */
.code--b { bottom: 10px; left: 12px } /* rtl-ok */
.hero__obj .code--b { bottom: 12px; left: auto; right: 4px; writing-mode: vertical-rl; transform: rotate(180deg) } /* rtl-ok */
.hero__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; margin-block-start: 24px; border-block-start: 1px solid var(--line) }
.hero__txt { display: grid; gap: 4px; max-inline-size: 64ch }
.hero__desc { font-size: 15px; color: var(--t2) }
.hero__note { font-size: 15px; color: var(--t1) }
/* T-147: الزر الأساسي أولاً، والرابط إلى الأعمال ثانوي بلا إطار */
.hero__acts { display: flex; align-items: center; gap: 24px; flex-shrink: 0 }
.hero__more { display: inline-flex; align-items: center; min-block-size: 44px; font-size: 14px; color: var(--t2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 6px; transition: color .2s var(--ease) }
@media (hover: hover) and (pointer: fine) { .hero__more:hover { color: var(--t1); text-decoration-color: currentColor } }

/* دخول الهيرو على إيقاع الهوية: ظلام ← نبضة ← بناء ← تثبيت (الجسم يبني، والنص يثبت بعده) */
.js .hero__h, .js .corner, .js .hero__foot { animation: settle 1s var(--ease) both }
.js .hero__h { animation-delay: .9s }
.js .corner { animation-delay: 1.15s }
.js .hero__foot { animation-delay: 1.3s }
@keyframes settle { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* الأزرار */
.btn { display: inline-flex; align-items: center; gap: 14px; block-size: 52px; padding-inline: 22px; border: 1px solid var(--line-2); color: var(--t1); font-size: 15px; font-weight: 500; transition: background-color .2s var(--ease), color .2s var(--ease), transform 160ms var(--ease) }
.btn i, .fbar__open i, .go__cta i, .go__door i { font-style: normal; font-family: var(--lat) }
.btn:active, a.cell:active, button.cell:active { transform: scale(.97) }
.btn--sm { block-size: 46px; font-size: 14px }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--w); color: var(--ink) }
}

/* ---------- السكة ---------- */
.rail { position: relative; block-size: clamp(220px, 34vh, 340px) }
.rail__track { position: absolute; inset-block: 18px; inset-inline-start: 24%; display: flex; flex-direction: column; align-items: center; inline-size: 9px }
.rail__sq { inline-size: 9px; block-size: 9px; border: 1px solid var(--line-2); flex: none }
.rail__line { position: relative; flex: 1; inline-size: 1px; background: var(--line-2) }
.rail__dot { position: absolute; inset-block-start: 0; inset-inline-start: -3px; inline-size: 7px; block-size: 7px; background: var(--w); will-change: transform }
.rail .code--v { inset-block-start: 34px; inset-inline-start: 14px; writing-mode: vertical-rl; max-height: calc(100% - 82px) /* rtl-ok: النص عمودي فالبعد الفيزيائي هو المقصود */; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.rail__lab { position: absolute; inset-block-end: 14px; inset-inline-start: calc(24% + 22px); font-size: 14px; color: var(--t1) }
.rail__lab em { font-style: normal; font-size: 11px; color: var(--t4); margin-inline-start: 6px; letter-spacing: .06em; text-transform: uppercase }
.rail__box { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: clamp(150px, 16vw, 240px); block-size: 75%; border: 1px solid var(--line) }

/* ---------- الإطار العام لكل قسم ---------- */
.frame { position: relative; padding-block-end: 8px }
.fhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block-end: 14px }
.fhead h2 { font-family: var(--ard); font-weight: 600; font-size: clamp(28px, 3.3vw, 50px); line-height: 1.35; color: var(--t1) }
.fhead p { font-size: 14px; color: var(--t3); margin-block-start: 6px }
.fhead__go { padding-inline: 24px; color: var(--t1); font-size: 14px; flex: none }
@media (hover: hover) and (pointer: fine) {
  .fhead__go:hover, .fbar__btn:hover, .fbar__open:hover, .work__idx button:hover, .svc__tabs button:hover, .go__acts a:hover { background: rgba(255, 255, 255, .05); color: var(--w) }
}
.kicker { font-size: 13px; color: var(--t3) }
.kicker b { color: var(--t4); font-weight: 600; margin-inline-end: 8px; font-size: 12px }
.fbar { display: flex; align-items: stretch }
.fbar .cell { justify-content: center }
.fbar__btn { inline-size: var(--cell); flex: none }
.fbar__btn svg { inline-size: 22px; block-size: 22px; fill: none; stroke: var(--t1); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round }
.fbar__open { gap: 12px; padding-inline: 20px; font-size: 14px; color: var(--t1); flex: none }
.fbar__name { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--t1) }

/* ---------- الأعمال ---------- */
.work__body { display: grid; grid-template-columns: 1.05fr 1.5fr var(--cell); min-block-size: clamp(380px, 46vh, 480px) }
.work__body > .cell { align-items: stretch }
.work__obj, .svc__obj, .vals__obj, .go__obj, .bye__obj { position: relative }
.work__panels { padding: clamp(20px, 2.6vw, 40px); display: block !important }
.work__p, .svc__p { animation: swap .32s var(--ease) both }
@keyframes swap { from { opacity: 0 } to { opacity: 1 } }
.work__p h3 { font-family: var(--ard); font-weight: 600; font-size: clamp(26px, 2.8vw, 44px); line-height: 1.5; color: var(--t1); margin-block: 16px 18px }
.work__p > p:not(.kicker) { max-inline-size: 44ch; color: var(--t2) }
.facts { display: flex; flex-wrap: wrap; gap: 0; margin-block-start: 28px }
.facts li { padding: 8px 16px; font-size: 13px; color: var(--t2) }
.facts bdi { color: var(--t1); font-weight: 600; margin-inline-end: 4px }
.work__idx { display: flex; flex-direction: column }
.work__idx li { flex: 1; display: flex }
.work__idx button { flex: 1; justify-content: center; font-size: 12px; color: var(--t4); min-block-size: 48px }
.work__idx button[aria-current="true"] { color: var(--t1); background: rgba(255, 255, 255, .06) }

/* ---------- ما نلتزم به ---------- */
.vals__body { display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-auto-rows: minmax(150px, auto) }
.vals__obj { grid-row: span 3; min-block-size: 480px }
.vals__list { display: contents }
.vals__list li { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 22px 24px; gap: 4px }
.vals__list li:last-child { grid-column: span 2 }
.vals__list b, .go__steps b { font-size: 11px; color: var(--t4); font-weight: 600; margin-block-end: auto; letter-spacing: .04em }
.vals__list h3, .go__steps h3 { font-family: var(--ard); font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--t1); margin-block-start: 22px }
.vals__list p, .go__steps p { font-size: 14px; color: var(--t3) }
.say { position: absolute; inset-block-start: 22px; inset-inline: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; transform: translateY(6px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none }
.is-waving .say, html.still .say, html.nojs .say { opacity: 1; transform: none }
.say__en { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3) }
.say__ar { font-family: var(--ard); font-weight: 600; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.4; color: var(--t1) }

/* ---------- الخدمات ---------- */
.svc__body { display: grid; grid-template-columns: 1.35fr 1fr 220px; min-block-size: clamp(420px, 52vh, 520px) }
.svc__body > .cell { align-items: stretch }
.svc__panels { flex-direction: column; justify-content: flex-start; padding: clamp(20px, 2.6vw, 40px); display: flex !important }
.squares { display: flex; gap: 6px; margin-block-end: 26px }
.squares i { inline-size: 12px; block-size: 12px; background: rgba(255, 255, 255, .16); transition: background-color .3s var(--ease) }
.squares i.on { background: rgba(255, 255, 255, .45) }
.squares i.now { background: var(--w) }
.svc__p h3 { font-family: var(--ard); font-weight: 600; font-size: clamp(30px, 3.6vw, 58px); line-height: 1.45; color: var(--t1); display: flex; flex-direction: column; align-items: flex-start }
.svc__p h3 .hl { margin-block-start: 6px }
.svc__p p { margin-block: 22px 28px; max-inline-size: 42ch; color: var(--t2) }
.svc__tabs { display: flex; flex-direction: column }
.svc__tabs button { flex: 1; gap: 12px; padding-inline: 18px; font-size: 14px; color: var(--t3); text-align: start; min-block-size: 48px }
.svc__tabs button b { font-size: 11px; color: var(--t4); font-weight: 600 }
.svc__tabs button[aria-selected="true"] { color: var(--t1); background: rgba(255, 255, 255, .06) }
.svc__tabs button[aria-selected="true"] b { color: var(--t1) }

/* ---------- ابدأ ---------- */
.go__body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(130px, auto) }
.go__obj { grid-row: span 3; min-block-size: 400px }
.go__steps { display: contents }
.go__steps li { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 22px 24px; gap: 4px }
.go__acts { display: contents }
.go__acts a { flex-direction: column; align-items: flex-start; justify-content: center; padding: 20px 24px; gap: 6px; color: var(--t1) }
.go__acts .go__cta { font-family: var(--ard); font-size: clamp(22px, 2vw, 30px); line-height: 1.4; font-weight: 600; flex-direction: row; align-items: center; justify-content: space-between; background: var(--w); color: var(--ink); --l: var(--w) }
.go__acts small { font-size: 13px; color: var(--t3) }
.go__mail bdi { font-size: 18px; font-weight: 600; color: var(--t1) }
.go__door span { font-size: 16px }
.sep { font-style: normal }

/* ---------- الوداع والذيل ---------- */
.bye { margin-block-start: clamp(80px, 12vh, 140px); padding-block-end: 40px }
.bye__body { display: grid; grid-template-columns: 1fr 1fr }
.bye__obj { grid-column: 1 / -1; min-block-size: clamp(380px, 58vh, 560px) }
.legal { display: contents }
.legal .cell { padding: 16px 22px; font-size: 13px; color: var(--t3); gap: 18px; flex-wrap: wrap }
.legal a { color: var(--t2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; min-block-size: 32px; min-inline-size: 32px; justify-content: center; display: inline-flex; align-items: center }
.legal bdi { color: var(--t2) }

/* ---------- الوضع الثابت ---------- */
.still-cv { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none }

/* ---------- تابلت ---------- */
@media (max-width: 1100px) {
  .svc__body { grid-template-columns: 1.3fr 1fr }
  .svc__tabs { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap }
  .svc__tabs button { flex: 1 1 25%; justify-content: center }
  .vals__body { grid-template-columns: 1fr 1fr }
  .vals__obj { grid-column: 1 / -1; grid-row: auto; min-block-size: 420px }
  .vals__list li:last-child { grid-column: 1 / -1 }
  .go__body { grid-template-columns: 1fr 1fr }
  .go__obj { grid-column: 1 / -1; grid-row: auto; min-block-size: 320px }
}

/* ---------- جوال ---------- */
@media (max-width: 768px) {
  :root { --cell: 52px; --bar: 52px }
  body { background-size: 48px 48px }
  .bar .cell { padding-inline: 14px; font-size: 13px }
  .hero { min-block-size: 0; padding-block-start: 18px }
  .hero__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; row-gap: 0 }
  .corner { padding: 10px 4px; font-size: 12px }
  .corner--1 { grid-column: 1; grid-row: 1 }
  .corner--2 { grid-column: 2; grid-row: 1 }
  .hero__obj { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 1 / .92; min-block-size: 0 }
  .hero__h { grid-column: 1 / -1; grid-row: 3; display: block; text-align: center; font-size: clamp(30px, 9vw, 40px); padding-block: 22px 8px }
  .hero__h > span { display: block; padding: 0 }
  .hero__h > span > span { display: inline; }
  .corner--3 { grid-column: 1; grid-row: 4 }
  .corner--4 { grid-column: 2; grid-row: 4 }
  .hero__foot { flex-direction: column; align-items: stretch; gap: 16px; margin-block-start: 8px; padding-block: 20px }
  .hero__foot .btn { justify-content: space-between }
  .hero__acts { flex-direction: column; align-items: stretch; gap: 2px }
  .hero__more { justify-content: center }
  .rail { block-size: 200px }
  .rail__track { inset-inline-start: 18% }
  .rail__lab { inset-inline-start: calc(18% + 20px) }
  .rail__box { inline-size: 42%; block-size: 62% }
  .fhead { flex-direction: column; align-items: stretch; gap: 14px }
  .fhead__go { justify-content: center }
  .work__body { grid-template-columns: 1fr var(--cell) }
  .work__obj { grid-column: 1 / -1; aspect-ratio: 1 / .8 }
  .work__panels { grid-column: 1; padding: 20px }
  .fbar__open { padding-inline: 12px; font-size: 13px }
  .fbar__name { font-size: 14px }
  .svc__body { grid-template-columns: 1fr }
  .svc__obj { aspect-ratio: 1 / .8; grid-row: 2 }
  .svc__panels { padding: 20px }
  .svc__tabs button { flex: 1 1 50%; justify-content: flex-start; font-size: 13px }
  .vals__body, .go__body { grid-template-columns: 1fr }
  .vals__obj { min-block-size: 0; aspect-ratio: 1 / 1.05 }
  .vals__list li { min-block-size: 0; padding: 18px 20px }
  .vals__list h3, .go__steps h3 { margin-block-start: 10px }
  .go__obj { min-block-size: 0; aspect-ratio: 1 / .8 }
  .bye__body { grid-template-columns: 1fr }
  .bye__obj { min-block-size: 0; aspect-ratio: 1 / 1.1 }
  .code--t, .code--e { display: none }
}
/* T-147: سطرا الهيرو والرابط الثانوي أطول من السطر القديم، فيقصر صندوق الجسم قليلاً على الجوال العمودي ليبقى «ابدأ طلبك» في أول شاشة */
@media (max-width: 520px) {
  .hero__obj { aspect-ratio: 1 / .78 }
  .hero__foot { margin-block-start: 0; padding-block: 16px }
}
/* الكود العمودي على السكة يتقاطع مع عنوانها تحت 900px (جوال وجوال أفقي) */
@media (max-width: 899px), (max-height: 500px) {
  .rail .code--v { display: none }
}

/* الحركة المخفّضة: تبقى الشفافية وتزول الحركة المكانية */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .js .hero__h, .js .corner, .js .hero__foot { animation-name: fade }
  .say { transform: none }
  .btn:active, a.cell:active, button.cell:active { transform: none }
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.work__p h3 .hl, .svc__p h3 .hl { white-space: nowrap }