/* ==========================================================================
   Code & Canvas homepage — page-specific styles (/)
   v3 "editorial canvas": solid panels, hairline rules, decision-first modules.
   Logical properties throughout, so one rule serves English (LTR) and Arabic (RTL).
   ========================================================================== */

/* ---------- Hero — "Business Development, By Design" ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(26px, 3.6vw, 60px); align-items: center; padding-top: calc(var(--nav-h) + 44px); padding-bottom: clamp(34px, 4vw, 56px); }
.hero__title { font-size: clamp(40px, 6.2vw, 88px); line-height: .98; letter-spacing: -.035em; margin-block: 22px 20px; }
html[lang='ar'] .hero__title { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.5; letter-spacing: 0; }
.hero__title .line { display: block; }
.hero .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
html[lang='ar'] .hero .eyebrow { font-size: 14px; }
.hero__discipline { display: inline-flex; align-items: center; gap: 11px; margin-block-end: 20px; padding-block: 7px; padding-inline: 9px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .045); color: var(--ink-2); font-size: 14.5px; }
.hero__bd { flex: none; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 9px; border: 1px solid rgba(63, 214, 196, .3); background: rgba(63, 214, 196, .1); color: var(--teal); font-family: var(--f-num); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.hero__lead { color: var(--ink-2); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.8; max-width: 58ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero__ctas--center { justify-content: center; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; }
.hero__chips li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.hero__chips .ico { color: var(--teal); font-size: 13px; }

/* ---------- Hero: engagement-flow window ---------- */
.hero__visual { position: relative; }
.hero__visual > .float-chip--1 { top: -46px; inset-inline-start: 5%; }
.hero__visual > .float-chip--2 { bottom: -30px; inset-inline-end: 3%; }
.hero__visual .float-chip small { display: block; font-family: var(--f-title); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--ink-3); }
html[lang='ar'] .hero__visual .float-chip small { letter-spacing: 0; font-size: 12px; }
.hero__visual .float-chip strong { display: block; font-family: var(--f-title); font-size: 13.5px; font-weight: 700; color: #fff; }
.flow { padding: 0; overflow: hidden; border-radius: var(--r-lg); }
.flow__bar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-block-end: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: var(--ink-3); font-family: var(--f-num); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; }
html[lang='ar'] .flow__bar { letter-spacing: 0; font-size: 12.5px; }
.flow__dots { flex: none; display: inline-flex; gap: 6px; }
.flow__dots i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--pink); }
.flow__dots i:nth-child(2) { background: var(--gold); }
.flow__dots i:nth-child(3) { background: var(--teal); }
.flow__path { white-space: nowrap; }
.flow__pill { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(63, 214, 196, .32); background: rgba(63, 214, 196, .1); color: var(--teal); font-size: 10.5px; white-space: nowrap; }
.flow__pill i { flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--teal); }
.flow__body { padding: clamp(20px, 2.2vw, 26px); }
.flow__kicker { font-family: var(--f-title); font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #b8a9ff; }
html[lang='ar'] .flow__kicker { letter-spacing: 0; font-size: 13px; }
.flow__title { margin-block: 10px; font-size: clamp(23px, 2.5vw, 33px); line-height: 1.18; }
.flow__title em { font-style: italic; }
html[lang='ar'] .flow__title em { font-style: normal; }
.flow__lead { color: var(--ink-3); font-size: 14px; line-height: 1.7; }
.flow__steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 16px; padding: 0; }
.flow-step { --acc: var(--teal); display: grid; gap: 5px; align-content: start; padding: 15px 14px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.flow-step--shape { --acc: #b8a9ff; }
.flow-step--deliver { --acc: var(--pink); }
.flow-step__no { font-family: var(--f-num); font-size: 12px; font-weight: 800; color: var(--acc); direction: ltr; }
.flow-step__label { font-family: var(--f-title); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--acc); }
html[lang='ar'] .flow-step__label { letter-spacing: 0; font-size: 12.5px; }
.flow-step__title { font-family: var(--f-title); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.flow-step__note { color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }
.flow__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.flow__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; }
.flow__chips i { flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--teal); }
.flow__chips li:nth-child(2) i { background: #b8a9ff; }
.flow__chips li:nth-child(3) i { background: var(--pink); }

/* ---------- Section rhythm ---------- */
body.is-home .section { padding-block: clamp(52px, 6.4vw, 88px); }
body.is-home .section--tight { padding-block: clamp(34px, 4vw, 56px); }

/* ---------- Selected work ---------- */
.work-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 22px); }
.work-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); transition: transform .4s var(--ease), border-color .3s; }
.work-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.work-card__art { aspect-ratio: 16 / 10; border-block-end: 1px solid var(--line); background: #0a0a24; }
.work-card__art img { width: 100%; height: 100%; object-fit: contain; }
.work-card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px; }
.work-card__meta { color: var(--ink-3); font-size: 12px; letter-spacing: .04em; }
.work-card h3 { font-family: var(--f-title); font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; line-height: 1.3; }
.work-card p { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.work-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-block-start: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.work-card__foot b { color: var(--teal); font-weight: 700; }

/* ---------- Studio ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 22px); }
.duo__card { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); }
.duo__role { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-num); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--teal); }
.duo__card--canvas .duo__role { color: var(--pink); }
.duo__card h3 { font-family: var(--f-title); font-size: clamp(21px, 2vw, 26px); font-weight: 700; }
.duo__tag { color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.duo__card > p:not(.duo__tag) { color: var(--ink-2); font-size: 14.5px; line-height: 1.75; }
.duo__creds { display: flex; flex-wrap: wrap; gap: 7px; }
.duo__creds li { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); font-size: 12px; color: var(--ink-2); }
.duo__link { margin-top: auto; padding-top: 16px; border-block-start: 1px solid var(--line); }

/* ---------- Service tracks ---------- */
.tracks { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.track { --acc: var(--teal); border-block-end: 1px solid var(--line); }
.track--tech { --acc: var(--teal); }
.track--creative { --acc: var(--pink); }
.track--health { --acc: #c9bdff; }
.track--combined { --acc: var(--gold); }
.track > a { display: grid; grid-template-columns: 58px minmax(0, 1fr) 220px 40px; align-items: center; gap: clamp(14px, 2.4vw, 36px); padding: clamp(20px, 2.4vw, 30px) 6px; transition: background .35s, padding .35s; border-radius: var(--r); }
.track > a:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .035), transparent 70%); padding-inline: 14px; }
[dir='rtl'] .track > a:hover { background: linear-gradient(270deg, rgba(255, 255, 255, .035), transparent 70%); }
.track__no { font-family: var(--f-num); font-size: clamp(20px, 2.1vw, 26px); font-weight: 800; line-height: 1; color: var(--acc); direction: ltr; }
.track__body h3 { font-family: var(--f-title); font-size: clamp(20px, 2.1vw, 27px); font-weight: 700; line-height: 1.2; margin-block-end: 8px; transition: color .3s; }
.track > a:hover .track__body h3 { color: var(--acc); }
.track__body p { color: var(--ink-3); font-size: 14.5px; line-height: 1.65; max-width: 64ch; }
.track__for { display: block; margin-bottom: 8px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
html[lang='ar'] .track__for { letter-spacing: 0; text-transform: none; font-size: 13px; }
.track__meta { display: grid; gap: 4px; text-align: end; }
.track__meta b { font-family: var(--f-num); font-size: 16.5px; font-weight: 800; color: #fff; }
.track__meta small { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.track .round-arrow { margin: 0; border-color: var(--line-2); }
.track > a:hover .round-arrow { background: var(--acc); border-color: transparent; color: #0b0b2a; transform: rotate(45deg); }
[dir='rtl'] .track > a:hover .round-arrow { transform: rotate(-45deg); }
.svc-note { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 26px; color: var(--ink-3); font-size: 14.5px; }

/* ---------- Insights & books ---------- */
.learn { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr); gap: clamp(16px, 2.2vw, 28px); align-items: start; }
.learn__posts { display: grid; gap: 12px; }
.learn__post { display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--r); transition: border-color .3s, transform .4s var(--ease); }
.learn__post:hover { border-color: var(--line-2); transform: translateX(5px); }
[dir='rtl'] .learn__post:hover { transform: translateX(-5px); }
.learn__meta { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; }
.learn__post h3 { font-family: var(--f-title); font-size: clamp(17px, 1.45vw, 19.5px); font-weight: 700; line-height: 1.4; }
.learn__post p { color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.learn__books { display: grid; gap: 12px; }
.learn__book { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 15px; align-items: center; padding: 16px; border-radius: var(--r); transition: border-color .3s; }
.learn__book:hover { border-color: var(--line-2); }
.learn__cover { display: grid; place-items: center; width: 60px; aspect-ratio: 3 / 4; border-radius: 9px; font-family: var(--f-num); font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(145deg, #241a5e, #0a0a26 60%, #0d1f33); border: 1px solid var(--line-2); }
.learn__cover--violet { background: linear-gradient(145deg, #1a1446, #0a0a26 60%, #0f2a3a); }
.learn__book-body { display: grid; gap: 3px; min-width: 0; }
.learn__book-body b { font-family: var(--f-title); font-size: 15.5px; font-weight: 700; color: #fff; }
.learn__book-body span { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.learn__book-body small { color: var(--ink-3); font-size: 12px; }
.learn__books > .text-link { justify-self: start; }

/* ---------- Platform band ---------- */
.platform-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(24px, 3.2vw, 40px); border-radius: var(--r-lg); }
.platform-band__copy > p:not(.note-quiet) { margin-top: 14px; color: var(--ink-2); font-size: 15.5px; line-height: 1.75; max-width: 68ch; }
.platform-band__list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.platform-band__list li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; }
.platform-band__list .ico { color: var(--teal); font-size: 13px; }
.platform-band__actions { display: grid; gap: 10px; min-width: 240px; }
.platform-band__actions .btn { justify-content: center; }

/* ---------- Closing extras ---------- */
.closing__title { font-size: clamp(28px, 3.8vw, 46px); }
.closing__text { max-width: 660px; margin: 16px auto 0; color: var(--ink-2); font-size: clamp(15.5px, 1.2vw, 17.5px); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .track > a { grid-template-columns: 46px minmax(0, 1fr) 40px; }
  .track__meta { grid-column: 2; grid-row: 2; text-align: start; grid-template-columns: auto auto; justify-content: start; gap: 4px 14px; align-items: baseline; }
  .track .round-arrow { grid-row: 1 / span 2; grid-column: 3; }
}
@media (max-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr); text-align: center; padding-top: calc(var(--nav-h) + 26px); }
  .hero__copy { max-width: 760px; margin-inline: auto; }
  .hero__lead { margin-inline: auto; }
  .hero__ctas, .hero__chips { justify-content: center; }
  .hero__visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 720px; margin: 30px auto 0; }
  .flow { grid-column: 1 / -1; }
  .hero__visual > .float-chip { position: static; inset: auto; animation: none; }
  .work-strip, .duo, .learn, .platform-band { grid-template-columns: minmax(0, 1fr); }
  .platform-band__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hero__ctas { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero__ctas .btn { width: 100%; }
  .hero__visual { grid-template-columns: minmax(0, 1fr); }
  .hero__visual > .float-chip { white-space: normal; }
  .flow__bar { flex-wrap: wrap; gap: 8px 10px; }
  .flow__path { white-space: normal; }
  .flow__pill { margin-inline-start: 0; }
  .flow__steps { grid-template-columns: minmax(0, 1fr); }
  .track > a { grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 12px; }
  .track__body h3 { font-size: 19px; }
  .platform-band__actions { grid-template-columns: 1fr; }
  .work-card__body, .learn__post { padding: 18px; }
}