/* Arabic craft is the detail; precise engineering is the structure. */
.header { isolation: isolate; }
.header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('./illustrations/arabesque.svg') center/240px 100px repeat-x; opacity: .12; mask-image: linear-gradient(90deg, #000, transparent 35%, transparent 70%, #000); }
.brand { display: flex; flex-direction: column; align-items: flex-start; min-width: 134px; gap: 4px; }
.brand-art { display: block; line-height: 0; mix-blend-mode: screen; }
.wordmark { display: block; width: 125px; height: 48px; overflow: hidden; filter: grayscale(1) invert(1) contrast(1.6) sepia(.35); }
.wordmark-ar { display: none; width: 94px; height: 58px; }
.brand .brand-sub { font-size: 6px; margin: 0; letter-spacing: .16em; }
html[dir='rtl'] .wordmark-en { display: none; }
html[dir='rtl'] .wordmark-ar { display: block; }
html[dir='rtl'] .brand { min-width: 110px; align-items: center; }
.footer .brand { align-items: flex-start; }
.vm, .service, .why, .proof-note, .contact-card, .do-row { position: relative; isolation: isolate; overflow: hidden; }
.vm::after, .service::after, .why::after, .proof-note::after, .contact-card::after, .do-row::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 140px;
  height: 175px;
  bottom: -20px;
  inset-inline-end: -10px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .18;
  transform: rotate(-10deg) scale(.95);
  transition: opacity .45s cubic-bezier(0.16, 1, 0.3, 1), transform .65s cubic-bezier(0.16, 1, 0.3, 1), filter .45s ease;
}

/* Cultural Glyphs for About & Details Sections */
.vm:nth-child(1)::after { background-image: url("./glyphs/hiero-djed.svg"); } /* Djed: Vision & Architectural Backbone */
.vm:nth-child(2)::after { background-image: url("./glyphs/arabic-zakaa.svg"); } /* Dhal: Mission & Wisdom */
.why:nth-child(1)::after { background-image: url("./glyphs/hiero-wadjet.svg"); } /* Wadjet: Insight & Custom Solutions */
.why:nth-child(2)::after { background-image: url("./glyphs/ai-astrolabe.svg"); } /* Astrolabe: Speed & Adaptability */
.why:nth-child(3)::after { background-image: url("./glyphs/ai-neural.svg"); } /* Neural: Smart Integration */
.service:nth-child(odd)::after { background-image: url("./glyphs/arabic-khatam.svg"); }
.service:nth-child(even)::after { background-image: url("./glyphs/ai-quantum.svg"); }
.contact-card::after { background-image: url("./glyphs/hiero-ankh.svg"); }
.proof-note::after { background-image: url("./glyphs/arabic-noon.svg"); }
.do-row:nth-child(1)::after { background-image: url("./glyphs/hiero-djed.svg"); }
.do-row:nth-child(2)::after { background-image: url("./glyphs/ai-neural.svg"); }
.do-row:nth-child(3)::after { background-image: url("./glyphs/arabic-khatam.svg"); }
.do-row:nth-child(4)::after { background-image: url("./glyphs/ai-astrolabe.svg"); }
.do-row:nth-child(5)::after { background-image: url("./glyphs/hiero-wadjet.svg"); }

.vm:hover::after, .service:hover::after, .why:hover::after, .do-row:hover::after, .contact-card:hover::after {
  opacity: .38;
  transform: rotate(-3deg) scale(1.12);
  filter: drop-shadow(0 0 16px rgba(229, 178, 93, 0.45));
}
.profile-sub { margin: 64px 0 27px; }
.do-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; counter-reset: capability; }
.do-row { display: flex; flex-direction: column; grid-column: span 2; gap: 0; padding: 0 25px 28px; border: 1px solid #ffffff21; border-radius: 18px; background: linear-gradient(150deg, #1b1d20, #111518); transition: border-color .3s, transform .3s; }
.do-row:nth-child(-n+2) { grid-column: span 3; }
.do-row:hover { transform: translateY(-5px); border-color: #efad7866; }
.capability-art { width: calc(100% + 50px); height: 210px; object-fit: cover; margin-inline: -25px; margin-bottom: 18px; border-bottom: 1px solid #ffffff12; }
.do-row:nth-child(-n+2) .capability-art { height: 250px; object-fit: contain; background: #10151a; }
.do-row .num { position: absolute; top: 19px; inset-inline-start: 20px; background: #0c1116c9; border: 1px solid #efad7840; border-radius: 30px; padding: 7px 12px; font-size: 11px; color: var(--copper); }
.do-row h4 { font: 500 23px/1.3 'Space Grotesk', 'Tajawal', sans-serif; letter-spacing: -.025em; margin: 2px 0 14px; }
.do-row p { font-size: 13px; line-height: 1.85; max-width: 450px; }
.why-grid { gap: 22px; }
.why { border: 1px solid #ffffff1c; border-radius: 48% 48% 18px 18px / 100px 100px 18px 18px; padding: 24px 30px 32px; background: #111519; text-align: center; transition: transform .35s, border-color .35s; }
.why:nth-child(2) { margin-top: 32px; margin-bottom: -32px; }
.why:hover { transform: translateY(-6px); border-color: #efad7855; }
.value-art { width: 100%; height: 190px; object-fit: contain; mix-blend-mode: normal; }
.value-index { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 0 0 17px; border: 1px solid #efad7850; border-radius: 50%; color: var(--copper); font: 10px 'Space Grotesk', sans-serif; }
.why h4 { font: 500 24px 'Space Grotesk', 'Tajawal', sans-serif; letter-spacing: -.025em; margin-bottom: 14px; }
.why p { font-size: 13px; line-height: 1.85; }
.services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.service { display: grid; grid-template-columns: 1fr 1.05fr; grid-template-rows: auto auto 1fr; column-gap: 22px; min-height: 290px; padding: 30px 26px; }
.service-num { grid-column: 1; margin-bottom: 28px; }
.service-icon { grid-column: 2; grid-row: 1 / 4; margin: 0 -26px 0 0; align-self: center; font-size: initial; }
.service-icon img { display: block; width: 100%; height: 210px; object-fit: cover; mix-blend-mode: normal; }
.service h3 { grid-column: 1; font-size: 24px; margin-bottom: 14px; }
.service p { grid-column: 1; font-size: 13px; }
.service-tail { display: none; }
.service::before { top: auto; bottom: -60px; }
.portfolio-media { aspect-ratio: 1.6; background: #10151a; border-bottom: 1px solid #ffffff12; }
.portfolio-media img { object-fit: contain; }
.portfolio-card:hover .portfolio-media img { transform: scale(1.045); }
.portfolio-card p { font-size: 13px; line-height: 1.85; }
.portfolio-card h4 { margin-top: 12px; }
.project-status { align-self: flex-start; font-size: 10px; color: var(--ice); border: 1px solid #9ed8d22e; border-radius: 20px; padding: 4px 9px; margin: 0 0 14px; }
html[dir='rtl'] .service-icon { margin: 0 0 0 -26px; }
html[dir='rtl'] .do-row h4, html[dir='rtl'] .why h4 { font-family: 'Tajawal', sans-serif; font-size: 23px; font-weight: 500; }
@media(max-width: 1050px) {
  .service { grid-template-columns: 1fr; }
  .service-icon { grid-column: 1; grid-row: 2; margin: 0 -26px 14px; }
  .service h3 { grid-row: 3; }
  .service p { grid-row: 4; }
  .service-num { margin-bottom: 0; }
  .service-icon img { height: 215px; object-fit: contain; }
  .do-row { grid-column: span 3; }
  .do-row:last-child { grid-column: span 6; }
  .do-row:last-child .capability-art { object-fit: contain; background: #10151a; }
  .why { padding-inline: 20px; }
  .why h4 { font-size: 21px; }
}
@media(max-width: 720px) {
  .nav { gap: 18px; }
  .brand { min-width: 125px; }
  .wordmark { width: 110px; height: 42px; }
  .wordmark-ar { width: 77px; height: 48px; }
  html[dir='rtl'] .brand { min-width: 90px; }
  .do-list { grid-template-columns: 1fr; }
  .do-row, .do-row:nth-child(-n+2), .do-row:last-child { grid-column: 1; }
  .capability-art, .do-row:nth-child(-n+2) .capability-art { height: 205px; object-fit: contain; background: #10151a; }
  .why-grid { grid-template-columns: 1fr; gap: 22px; }
  .why:nth-child(2) { margin: 0; }
  .why { border-radius: 18px; padding: 22px 26px 30px; }
  .value-art { height: 175px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-icon img { height: 200px; }
  .profile-sub { margin-top: 42px; }
}
/* Consulting, learning and two clear software paths. */
.offering-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-bottom:32px; }
.offering-card,.route-card,.product-card { border:1px solid #ffffff24; border-radius:20px; background:linear-gradient(145deg,#1a2026,#101418); overflow:hidden; }
.offering-card { padding:0 26px 30px; }
.offering-card>img { width:100%; height:190px; object-fit:contain; }
.offering-card h3,.route-card h3,.product-card h3 { font:500 27px/1.35 'Space Grotesk','Tajawal',sans-serif; margin:12px 0 18px; }
.offering-card p,.route-card p,.product-card p { color:var(--muted,#afb7bb); font-size:14px; line-height:1.9; }
.solution-routes,.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:32px 0; }
.route-card { display:block; padding:34px; text-decoration:none; transition:border-color .25s,transform .25s; }
.route-card:hover { border-color:#efad78; transform:translateY(-4px); }
.route-index { color:var(--copper); font-size:12px; letter-spacing:.13em; }
.offer-subtitle { font-size:22px; margin:54px 0 25px; }
.product-card { display:flex; flex-direction:column; }
.product-card>img { width:100%; height:250px; object-fit:contain; background:#10151a; }
.product-copy { padding:30px; display:flex; flex:1; flex-direction:column; align-items:flex-start; }
.product-copy h3 { font-size:36px; }
.product-copy .btn { margin-top:auto; }
.product-copy p { margin-bottom:24px; }
.product-copy .product-note { border-inline-start:2px solid var(--copper); padding:12px 18px; background:#efad780a; color:#e8d6c5; }
.do-row:nth-child(n) { grid-column:span 2; }
.do-row:nth-child(n) .capability-art { height:210px; object-fit:contain; }
@media(max-width:1050px){.offering-grid{grid-template-columns:1fr}.offering-card>img{height:160px}.do-row:nth-child(n){grid-column:span 3}}
@media(max-width:720px){.solution-routes,.product-grid{grid-template-columns:1fr}.do-row:nth-child(n){grid-column:1}.route-card,.product-copy{padding:25px}.product-card>img{height:210px}}
@media(prefers-reduced-motion:reduce){.route-card{transition:none}.route-card:hover{transform:none}}