/* Homepage. Layout follows the concept (big black wordmark, floating quick-start card, light skyline, search pill,
   four cards in a row, slim three-step strip). Motion borrowed from the references sits on top: ring intro,
   masked title reveal, parallax skyline, blind-slat showcase, services grid, closing panel.
   Motion is gated behind html.fx (JavaScript on, no reduced-motion preference). */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { from { opacity: 0.55; transform: scale(0.96); } to { opacity: 1; transform: scale(1.06); } }
@keyframes riseIn { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.85) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px) rotate(2deg); } to { opacity: 1; transform: rotate(var(--tilt, -1.6deg)); } }
@keyframes bob { 0%, 100% { transform: rotate(var(--tilt, -1.6deg)) translateY(0); } 50% { transform: rotate(var(--tilt, -1.6deg)) translateY(-9px); } }
@keyframes skyRise { from { opacity: 0; transform: translate3d(var(--tx, 0), calc(var(--ty, 0px) + 60px), 0); } to { opacity: 1; transform: translate3d(var(--tx, 0), var(--ty, 0px), 0); } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
@keyframes slatIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes slatInUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

.label { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.label::before { content: "[ "; }
.label::after { content: " ]"; }
.lang-ar .label { letter-spacing: 0; text-transform: none; font-size: var(--text-sm); }
.on-dark .label { color: #9db8ff; }
.display { font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.lang-ar .display { letter-spacing: 0; line-height: 1.3; font-weight: 700; }

/* ============================ INTRO (ring) ============================ */
.intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, #ffffff 0%, #eaf1ff 70%); animation: introOut 0.7s var(--ease) 2.35s forwards; }
@keyframes introOut { to { opacity: 0; visibility: hidden; transform: scale(1.08); } }
@keyframes ringLife { 0% { opacity: 0; transform: scale(0.7); } 22% { opacity: 1; transform: scale(1); } 82% { transform: scale(1); } 100% { transform: scale(1.5); } }
.intro__ring { position: relative; width: min(46vmin, 270px); aspect-ratio: 1; display: grid; place-items: center; animation: ringLife 2.9s var(--ease) both; }
.intro__glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(10, 92, 255, 0.22), transparent 62%); animation: pulse 1.4s ease-in-out infinite alternate; }
.intro__arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 28%, #7fb0ff 52%, var(--color-blue) 82%, #0847cc 94%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); filter: drop-shadow(0 0 12px rgba(10, 92, 255, 0.55)); animation: spin 1.7s linear infinite; }
.intro__core { position: relative; display: grid; place-items: center; width: 64%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(11, 13, 18, 0.22); color: var(--color-ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase; }
.lang-ar .intro__core { letter-spacing: 0; text-indent: 0; font-size: 1.1rem; }
.intro__core::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(11, 13, 18, 0.12); }
.intro__brand { position: absolute; inset-block-end: 14%; color: var(--color-ink); font-weight: 800; font-size: 1.5rem; letter-spacing: var(--tracking-display); }
.intro__hint { position: absolute; inset-block-end: 7%; color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.08em; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ============================ HERO ============================ */
.hero { position: relative; isolation: isolate; min-height: 560px; padding-block: var(--space-7) calc(var(--space-9) + var(--space-5)); background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%); overflow: hidden; display: flex; align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: url("../images/pattern.svg") center top / 96px 96px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 75% 20%, #000 0%, transparent 70%); }
.hero__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__poly { position: absolute; background: #edf3fd; }
.hero__poly--a { inset-inline-start: -4%; inset-block-end: 12%; width: 34%; height: 56%; clip-path: polygon(0 100%, 52% 0, 100% 100%); animation: drift 18s ease-in-out infinite; }
.hero__poly--b { inset-inline-end: -2%; inset-block-end: 12%; width: 30%; height: 66%; clip-path: polygon(0 100%, 60% 0, 100% 100%); animation: drift 22s ease-in-out infinite reverse; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.hero__scene { position: absolute; inset: 0; }
[dir="rtl"] .hero__scene { transform: scaleX(-1); }
.hero__layer { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: max(100%, 1100px); height: auto; transform: translate3d(var(--tx, 0), var(--ty, 0), 0); will-change: transform; animation: skyRise 1.4s var(--ease-out) both; }
.hero__layer--far { animation-delay: 0.1s; }
.hero__layer--mid { animation-delay: 0.25s; }
.hero__layer--near { animation-delay: 0.4s; }
.has-intro .hero__layer--far { animation-delay: 2.4s; }
.has-intro .hero__layer--mid { animation-delay: 2.55s; }
.has-intro .hero__layer--near { animation-delay: 2.7s; }
.hero__fog { position: absolute; inset-inline: 0; inset-block-end: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.9)); }
.hero.has-photo .hero__layer--far { display: none; }

.hero__inner { width: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-7); align-items: center; }
.hero__title { display: flex; flex-direction: column; font-size: var(--text-display); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 0.88; color: var(--color-ink); }
.hero__line { display: block; overflow: hidden; padding-block: 0.04em 0.12em; margin-block: -0.04em -0.12em; }
.hero__line > span { display: block; animation: riseIn 1s var(--ease-out) 0.15s both; }
.hero__line:nth-child(2) > span { animation-delay: 0.3s; }
.lang-ar .hero__title { font-size: clamp(2.5rem, 1.2rem + 4.4vw, 4rem); line-height: 1.3; font-weight: 700; }
.hero__sub { margin-block-start: var(--space-5); color: var(--color-ink); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: var(--tracking-heading); line-height: 1.1; animation: fadeUp 0.9s var(--ease-out) 0.6s both; }
.lang-ar .hero__sub { font-weight: 700; line-height: 1.4; }
.hero__text { margin-block-start: var(--space-3); color: var(--color-muted); font-size: var(--text-lg); animation: fadeUp 0.9s var(--ease-out) 0.75s both; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); animation: fadeUp 0.9s var(--ease-out) 0.9s both; }
.has-intro .hero__line > span { animation-delay: 2.5s; }
.has-intro .hero__line:nth-child(2) > span { animation-delay: 2.65s; }
.has-intro .hero__sub { animation-delay: 2.95s; }
.has-intro .hero__text { animation-delay: 3.1s; }
.has-intro .hero__cta { animation-delay: 3.25s; }

/* quick-start card: floats gently, tilted like the concept */
.quick { --tilt: -1.6deg; position: relative; justify-self: start; width: min(100%, 370px); margin-inline-start: -7.5rem; margin-block-start: var(--space-4); padding: 0 var(--space-6) var(--space-6); background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: rotate(var(--tilt)); animation: slideIn 1s var(--ease-out) 0.9s both, bob 7s ease-in-out 2s infinite; }
[dir="rtl"] .quick { --tilt: 1.6deg; }
.has-intro .quick { animation-delay: 3.3s, 4.4s; }
.quick__chrome { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-4); }
.quick__dot { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.quick__dot:nth-child(2) { background: #febc2e; }
.quick__dot:nth-child(3) { background: #28c840; }
.quick__url { flex: 1; margin-inline-start: var(--space-3); padding: 0.25rem 0.9rem; border-radius: var(--radius-pill); background: var(--color-surface-soft); color: var(--color-muted); font-size: var(--text-xs); }
.quick__title { margin-block: var(--space-3) var(--space-5); text-align: center; font-size: var(--text-lg); letter-spacing: -0.02em; }
.quick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-2); }
.quick__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); text-align: center; text-decoration: none; transition: background var(--duration) var(--ease), transform var(--duration) var(--ease); }
a.quick__item:hover { background: var(--color-surface-soft); color: var(--color-ink); transform: translateY(-3px); }
.quick__item.is-soon { opacity: 0.85; cursor: not-allowed; }
.quick__item .svc-icon { width: 52px; height: 52px; }
.quick__item { font-size: var(--text-xs); line-height: 1.25; }
.quick__item.is-more .svc-icon { background: var(--color-blue-100); color: var(--color-blue); }
.quick__item .badge { font-size: 0.6875rem; padding-inline: 0.5rem; }
.quick__chip { position: absolute; inset-inline-start: calc(100% - 18px); inset-block-start: 50%; display: flex; align-items: center; gap: var(--space-3); width: 214px; padding: var(--space-3) var(--space-4); background: rgba(255, 255, 255, 0.94); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; line-height: 1.3; animation: popIn 0.7s var(--ease-out) 1.5s both; }
.has-intro .quick__chip { animation-delay: 3.9s; }
.quick__chip .icon { color: var(--color-blue); width: 1.6em; height: 1.6em; }

.search-band { position: relative; z-index: 5; margin-block-start: -38px; }
.searchbox { margin-inline: auto; }

/* ============================ SERVICES (card grid) ============================ */
.services { padding-block: var(--space-9) var(--space-8); }
.section-head { display: grid; gap: var(--space-3); margin-block-end: var(--space-6); max-width: 60ch; }
.section-head h2 { font-size: var(--text-2xl); line-height: 1.02; }
.lang-ar .section-head h2 { line-height: 1.3; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.service-grid__cell { display: flex; }
.service-grid__cell > * { flex: 1; min-width: 0; }
.service-grid__cell--wide { grid-column: 1 / -1; }

.svc-card { position: relative; display: flex; flex-direction: column; padding: var(--space-5); background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration) var(--ease), transform 0.4s var(--ease-out), border-color var(--duration) var(--ease); }
.svc-card:not(.is-soon):hover { box-shadow: var(--shadow-md); transform: translateY(-5px); border-color: var(--color-blue); }
.svc-card:focus-within { outline: var(--focus-ring); outline-offset: 3px; }
.svc-card { overflow: visible; }
.svc-card__media { position: relative; margin: calc(var(--pad, var(--space-5)) * -1) calc(var(--pad, var(--space-5)) * -1) 0; }
.svc-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-surface-soft); }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.svc-card:not(.is-soon):hover .svc-card__img img { transform: scale(1.06); }
.svc-card.is-soon .svc-card__img img { filter: grayscale(0.7); opacity: 0.8; }
.svc-card__media .svc-icon { position: absolute; inset-inline-start: var(--pad, var(--space-5)); inset-block-end: -22px; width: 48px; height: 48px; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(10, 30, 70, 0.14); }
.svc-card__media .svc-card__tag, .svc-card__media .svc-card__badge { position: absolute; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); background: rgba(255, 255, 255, 0.94); color: var(--color-ink); box-shadow: 0 2px 8px rgba(10, 30, 70, 0.12); }
.svc-card__media .svc-card__badge { color: var(--color-soon); }
.svc-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--space-2); margin-block: calc(var(--space-4) + 22px) 0; }
.svc-card__title { font-size: var(--text-md); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.svc-card__text { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.55; }
.svc-card__link, .svc-card .link-arrow { margin-block-start: auto; padding-block-start: var(--space-4); }
.svc-card__foot { margin-block-start: auto; margin-block-end: 0; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-line); }
.svc-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc-card__link:focus-visible { outline: none; }
.svc-card.is-soon { background: var(--color-surface-soft); border-style: dashed; box-shadow: none; }
.svc-card__unavailable { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-soon); font-size: var(--text-sm); font-weight: 600; }
.svc-card__unavailable .icon { margin-block-start: 0.15em; width: 1em; height: 1em; flex: none; }

.svc-helper { position: relative; display: flex; flex-direction: column; padding: var(--space-5); border-radius: var(--radius-lg); color: #fff; background: radial-gradient(ellipse 90% 80% at 100% 0%, #3b82ff 0%, transparent 60%), var(--color-blue); overflow: hidden; isolation: isolate; box-shadow: 0 24px 50px -24px rgba(10, 92, 255, 0.7); }
.svc-helper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../images/pattern-light.svg") center / 96px 96px; opacity: 0.8; }
.svc-helper__title { color: #fff; font-size: var(--text-xl); line-height: 1.1; margin-block-start: auto; }
.svc-helper__text { margin-block-start: var(--space-3); color: rgba(255, 255, 255, 0.85); font-size: var(--text-sm); line-height: 1.55; }
.svc-helper .btn { margin-block-start: var(--space-5); align-self: flex-start; }
.svc-helper__body { display: contents; }
@media (min-width: 761px) {
  .service-grid__cell--wide .svc-helper { flex-direction: row; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-7); }
  .service-grid__cell--wide .svc-helper__title { margin-block-start: 0; }
  .service-grid__cell--wide .svc-helper__body { display: block; flex: 1; min-width: 0; }
  .service-grid__cell--wide .svc-helper__text { max-width: 56ch; }
  .service-grid__cell--wide .svc-helper .btn { margin-block-start: 0; align-self: center; flex: none; }
}
.svc-helper .icon-ring { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; }
.svc-helper .icon-ring .icon { width: 1.7rem; height: 1.7rem; }

/* ============================ STEPS STRIP ============================ */
.strip { padding-block: var(--space-6); background: var(--color-surface-soft); border-block: 1px solid var(--color-line); }
.strip__list { display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.strip__item { display: flex; align-items: center; gap: var(--space-4); }
.strip__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-blue-100); color: var(--color-blue); flex: none; transition: transform 0.5s var(--ease-out), background var(--duration) var(--ease), color var(--duration) var(--ease); }
.strip__icon .icon { width: 1.5rem; height: 1.5rem; }
.strip__item:hover .strip__icon { background: var(--color-blue); color: #fff; transform: scale(1.1) rotate(-6deg); }
.strip__title { font-weight: 700; color: var(--color-ink); line-height: 1.25; }
.strip__title b { color: var(--color-blue); margin-inline-end: 0.4em; }
.strip__text { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; }
.strip__arrow { flex: 1; min-width: 40px; max-width: 150px; height: 2px; position: relative; background: linear-gradient(90deg, var(--color-line-strong), var(--color-line-strong)); transform-origin: left center; }
[dir="rtl"] .strip__arrow { transform-origin: right center; }
.strip__arrow::after { content: ""; position: absolute; inset-inline-end: 0; inset-block-start: -4px; width: 9px; height: 9px; border-block-start: 2px solid var(--color-line-strong); border-inline-end: 2px solid var(--color-line-strong); transform: rotate(45deg); }
[dir="rtl"] .strip__arrow::after { transform: rotate(-135deg); }
.fx .strip__arrow { transform: scaleX(0); transition: transform 0.9s var(--ease-out) 0.5s; }
.fx .strip.is-in .strip__arrow { transform: scaleX(1); }

/* ============================ ABOUT + FACTS ============================ */
.about { padding-block: var(--space-9) var(--space-8); }
.about__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr) minmax(0, 0.9fr); gap: var(--space-6) var(--space-7); align-items: start; }
.about__statement { font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; color: var(--color-ink); text-wrap: balance; }
.lang-ar .about__statement { letter-spacing: 0; line-height: 1.5; }
.about__text { margin-block-start: var(--space-4); color: var(--color-muted); max-width: 54ch; }
.about__cta { margin-block-start: var(--space-5); }
.about__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); background: #dfeafb; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.about__photo:hover img { transform: scale(1.05); }

/* ============================ SHOWCASE (blind slats) ============================ */
.show { position: relative; background: var(--navy-900); }
.show__sticky { display: none; }
.fx .show { height: 890vh; }
.fx .show::before { content: ""; position: absolute; inset: 0; background: url("../images/pattern-light.svg") center / 96px 96px; opacity: 0.9; }
.fx .show__sticky { position: sticky; inset-block-start: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-4); overflow: hidden; }
.show__title { position: relative; text-align: center; color: #fff; font-size: clamp(1.25rem, 0.95rem + 1.3vw, 2rem); }
.show__frame { position: relative; border: 8px solid #fff; border-radius: 34px; overflow: hidden; background: var(--navy-950); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); }
.show__layers { position: absolute; inset: 0; }
.show__layer { position: absolute; inset: 0; visibility: hidden; }
.show__layer.is-active { visibility: visible; z-index: 2; }
.show__layer.is-entering { visibility: visible; z-index: 3; }
.show__slats { display: flex; flex-direction: column; height: 100%; }
.show__slat { position: relative; flex: 1 1 0; overflow: hidden; }
.show__slat img { position: absolute; inset-inline-start: 0; top: calc(var(--i) * -100%); width: 100%; height: 1200%; object-fit: cover; }
.show__layer.is-entering .show__slat { animation: slatIn 0.65s var(--ease-out) both; animation-delay: calc(var(--i) * 42ms); }
.show__layer.is-entering .show__slat:nth-child(even) { animation-name: slatInUp; }
.show__shade { position: absolute; inset: 0; z-index: 4; background: linear-gradient(180deg, rgba(7, 23, 61, 0), rgba(7, 23, 61, 0.1)); pointer-events: none; }
.show__tag { position: absolute; inset-block-start: 50%; z-index: 6; color: var(--color-ink); font-size: clamp(0.9rem, 0.7rem + 0.6vw, 1.125rem); font-weight: 600; text-shadow: 0 1px 12px rgba(255, 255, 255, 0.9); }
.show__tag--start { inset-inline-start: var(--space-6); }
.show__tag--end { inset-inline-end: var(--space-6); }
.show__cards { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: var(--space-4) var(--space-4) 4.5rem; pointer-events: none; }
.show__card { grid-area: 1 / 1; width: min(430px, 100%); max-height: 100%; overflow: auto; padding: var(--space-5); border-radius: var(--radius-md); background: #fff; color: var(--color-ink); box-shadow: 0 30px 60px -20px rgba(7, 23, 61, 0.55); opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out), visibility 0s linear 0.4s; pointer-events: none; }
.show__card.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0.3s; pointer-events: auto; }
.show__count { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--color-muted); }
.show__count::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.show__head { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-3) var(--space-4); }
.show__head .svc-icon { width: 60px; height: 60px; }
.show__card h3 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.375rem); line-height: 1.1; }
.show__thumb { margin: 0 0 var(--space-4); aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #dfeafb; }
.show__thumb img { width: 100%; height: 100%; object-fit: cover; }
.show__card p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-muted); }
.show__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-4); }
.show__unavailable { display: flex; align-items: flex-start; gap: var(--space-2); margin-block-start: var(--space-3); font-weight: 700; font-size: var(--text-sm); color: var(--color-soon); }
.show__unavailable .icon { margin-block-start: 0.15em; width: 1em; height: 1em; }
.show__controls { position: absolute; inset-block-end: var(--space-4); inset-inline: 0; z-index: 7; display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.show__nav { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: #fff; color: var(--color-ink); transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.show__nav:hover { background: var(--color-blue); color: #fff; border-color: var(--color-blue); }
.show__nav:disabled { opacity: 0.4; cursor: not-allowed; background: #fff; color: var(--color-ink); border-color: var(--color-ink); }
.show__dots { display: flex; align-items: center; gap: var(--space-2); padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); background: #fff; }
.show__dot { position: relative; width: 12px; height: 12px; padding: 0; border: 1.5px solid var(--color-ink); border-radius: 50%; background: transparent; transition: width 0.3s var(--ease), background 0.3s var(--ease); }
.show__dot::before { content: ""; position: absolute; inset: -14px; }
.show__dot[aria-current="true"] { width: 34px; border-radius: 8px; background: var(--color-blue); border-color: var(--color-blue); }
.show__count-live { color: var(--color-ink); background: #fff; padding: 0.35rem 0.7rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4em; text-align: center; }

/* ============================ WHY START IN DUBAI ============================ */
.why { padding-block: var(--space-9); background: var(--color-surface-soft); border-block: 1px solid var(--color-line); }
.why__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.why__intro { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-5)); display: grid; gap: var(--space-4); justify-items: start; }
.why__intro h2 { font-size: var(--text-2xl); line-height: 1.02; }
.lang-ar .why__intro h2 { line-height: 1.3; }
.why__intro .lead { font-size: var(--text-md); }
.why__list { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.why__item { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) var(--space-6); transition: background var(--duration) var(--ease); }
.why__item + .why__item { border-block-start: 1px solid var(--color-line); }
.why__item:hover { background: var(--color-blue-50); }
.why__num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--color-blue-100); color: var(--color-blue); font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.why__item:hover .why__num { background: var(--color-blue); color: #fff; }
.why__item h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.02em; }
.why__item p { margin-block-start: var(--space-1); color: var(--color-muted); font-size: var(--text-sm); }

/* ============================ CONTACT ============================ */
.contact__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.contact-tile { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform 0.4s var(--ease-out); }
a.contact-tile { text-decoration: none; color: inherit; }
a.contact-tile:hover { border-color: var(--color-blue); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.contact-tile__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-blue-100); color: var(--color-blue); }
.contact-tile__icon .icon { width: 1.35rem; height: 1.35rem; }
.contact-tile__label { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lang-ar .contact-tile__label { letter-spacing: 0; text-transform: none; font-size: var(--text-sm); }
.contact-tile__value { color: var(--color-ink); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.contact-tile__value[dir="ltr"] { unicode-bidi: isolate; }
.contact-tile__value--plain { font-weight: 600; }

/* ============================ CLOSING PANEL ============================ */
.cta { padding-block: var(--space-8) var(--space-9); }
.cta-panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-7); align-items: center; padding: var(--space-8) var(--space-8); border-radius: 36px; color: #fff; background: radial-gradient(ellipse 70% 120% at 100% 0%, #3b82ff 0%, transparent 60%), linear-gradient(135deg, #0a5cff, #0a3bc4); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(10, 92, 255, 0.75); }
.cta-panel::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../images/pattern-light.svg") center / 96px 96px; opacity: 0.9; -webkit-mask-image: linear-gradient(100deg, #000, transparent 75%); mask-image: linear-gradient(100deg, #000, transparent 75%); }
[dir="rtl"] .cta-panel::before { -webkit-mask-image: linear-gradient(260deg, #000, transparent 75%); mask-image: linear-gradient(260deg, #000, transparent 75%); }
.cta-panel__sky { position: absolute; inset-inline-end: -4%; inset-block-end: 0; z-index: -1; width: min(760px, 70%); opacity: 0.16; filter: brightness(0) invert(1); pointer-events: none; }
[dir="rtl"] .cta-panel__sky { transform: scaleX(-1); }
.cta-panel__eyebrow { color: rgba(255, 255, 255, 0.78); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lang-ar .cta-panel__eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--text-sm); }
.cta-panel h2 { margin-block-start: var(--space-3); color: #fff; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.1; max-width: 18ch; }
.lang-ar .cta-panel h2 { line-height: 1.3; }
.cta-panel p { margin-block-start: var(--space-4); color: rgba(255, 255, 255, 0.86); font-size: var(--text-lg); max-width: 44ch; }
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
.cta-links { display: grid; gap: var(--space-3); }
.cta-link { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: #fff; border-radius: var(--radius-md); color: var(--color-ink); font-weight: 700; text-decoration: none; box-shadow: 0 18px 36px -20px rgba(4, 20, 80, 0.6); transition: transform 0.4s var(--ease-out), background var(--duration) var(--ease); }
.cta-link:hover { transform: translateX(6px); color: var(--color-ink); background: #f4f8ff; }
[dir="rtl"] .cta-link:hover { transform: translateX(-6px); }
.cta-link .svc-icon { width: 48px; height: 48px; }
.cta-link span:nth-child(2) { flex: 1; }
.cta-link .icon { color: var(--color-blue); }

/* ============================ reveal-on-scroll (fx only) ============================ */
.fx [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.fx [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================ responsive ============================ */
@media (max-width: 1180px) { .quick { margin-inline-start: 0; } .quick__chip { display: none; } }
@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .about__meta { grid-column: 1 / -1; }
  .why__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .why__intro { position: static; }
  .cta-panel { grid-template-columns: 1fr; padding: var(--space-7) var(--space-6); }
}
@media (max-width: 959px) {
  .hero { min-height: 0; display: block; padding-block-start: var(--space-6); padding-block-end: 280px; }
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .quick { display: none; }
  .hero__layer { width: max(100%, 960px); }
  .strip__list { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .strip__arrow { display: none; }
}
@media (max-width: 720px) {
  .service-grid { grid-template-columns: 1fr; }
  .svc-card { --pad: var(--space-4); padding: var(--space-4); }
  .hero__cta .btn { width: 100%; }
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { aspect-ratio: 16 / 10; }
  .why__item { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); }
  .contact__tiles { grid-template-columns: minmax(0, 1fr); }
  .cta-panel { padding: var(--space-6) var(--space-5); border-radius: 26px; }
  .cta-panel__actions .btn { width: 100%; }
  .show__tag { display: none; }
  .fx .show__sticky { padding-inline: var(--space-2); }
  .show__frame { border-width: 5px; border-radius: 24px; }
  .show__cards { padding-inline: var(--space-3); }
  .show__card { padding: var(--space-4); }
  .show__thumb { display: none; }
}


/* ============================ PHOTO MODE (supplied photography) ============================ */
.hero.has-photo { background: var(--navy-950); color: #fff; min-height: 600px; }
.hero.has-photo::before { display: none; }
.hero.has-photo .hero__poly, .hero.has-photo .hero__scene, .hero.has-photo .hero__fog { display: none; }
.hero.has-photo .hero__photo { opacity: 1; animation: kenBurns 28s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.hero.has-photo .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 18, 45, 0.88) 0%, rgba(5, 18, 45, 0.62) 42%, rgba(5, 18, 45, 0.18) 100%), linear-gradient(180deg, rgba(5, 18, 45, 0.5) 0%, transparent 28%, transparent 70%, rgba(5, 18, 45, 0.55) 100%); }
[dir="rtl"] .hero.has-photo .hero__bg::after { background: linear-gradient(270deg, rgba(5, 18, 45, 0.88) 0%, rgba(5, 18, 45, 0.62) 42%, rgba(5, 18, 45, 0.18) 100%), linear-gradient(180deg, rgba(5, 18, 45, 0.5) 0%, transparent 28%, transparent 70%, rgba(5, 18, 45, 0.55) 100%); }
.hero.has-photo .hero__title, .hero.has-photo .hero__sub { color: #fff; }
.hero.has-photo .hero__text { color: rgba(255, 255, 255, 0.86); }
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.08) translate3d(-1.5%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .hero.has-photo .hero__photo { animation: none; } }
html:not(.fx) .hero.has-photo .hero__photo { animation: none; }
.show__shade { background: linear-gradient(180deg, rgba(7, 23, 61, 0.25), rgba(7, 23, 61, 0.45)); }
.show__tag { color: #fff; text-shadow: 0 1px 14px rgba(5, 18, 45, 0.7); }
.about__photo img { object-position: 35% 50%; }
.cta-panel__sky { inset: 0; inset-inline-end: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.2; filter: none; mix-blend-mode: luminosity; }
[dir="rtl"] .cta-panel__sky { transform: none; }