:root {--navy:#091a2b;--ink:#17283a;--cream:#f8f4eb;--gold:#ffae66;--copper:#914615;--line:#d8d0c3;font-family:system-ui,sans-serif}
* {box-sizing:border-box}
body {margin:0;background:var(--cream);color:var(--ink);line-height:1.65}
a {color:inherit;text-underline-offset:.25em}
a:focus-visible {outline:3px solid #ca6c26;outline-offset:5px}
.skip {position:absolute;top:-6rem;left:1rem;background:white;padding:.7rem}
.skip:focus {top:1rem}
.wrap {width:min(1260px,calc(100% - 64px));margin-inline:auto}
header,footer {background:var(--navy);color:white}
header {border-bottom:1px solid #ffffff35}
.bar,nav {display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:1.1rem}
.bar {padding-block:1.25rem}
nav {justify-content:flex-start;gap:clamp(.75rem,2vw,1.65rem)}
nav a,.brand,.button,.tile {text-decoration:none}
nav a {font-size:.9rem;font-weight:650}
nav a:hover,nav [aria-current] {color:var(--gold)}
.brand {font-weight:850;letter-spacing:.13em;font-size:1.65rem;line-height:1}
.brand span {color:var(--gold)}
.brand small {display:block;font-size:.55rem;letter-spacing:.32em;margin-top:.45rem}
.hero {color:white;background:radial-gradient(ellipse at 85% 40%,#244259,var(--navy) 72%);border-bottom:3px solid #df8b46}
.split {display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(2rem,5vw,5rem)}
.section {padding-block:clamp(3rem,7vw,6.5rem)}
.kicker {font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--copper)}
.hero .kicker,h1 em {color:var(--gold)}
h1,h2,h3 {font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em;line-height:1.04;margin:.25em 0}
h1 {font-size:clamp(2.8rem,5.35vw,5.5rem)}
h2 {font-size:clamp(2.25rem,4vw,4rem)}
h3 {font-size:clamp(1.5rem,2.2vw,2.25rem)}
p {max-width:65ch}
.lead {font-size:1.1rem;color:#dfe8f0}
.button {display:inline-block;background:var(--gold);color:var(--navy);padding:.75rem 1.1rem;font-weight:750;margin-top:.7rem}
.button:hover {background:#ffcb9d}
img {display:block;width:100%;height:auto}
.identity {border:1px solid #ffcb9daa;padding:7px}
.feature,.tile img,.gallery img {aspect-ratio:4/3;object-fit:cover}
.tiles,.gallery,.markets {display:grid;gap:1rem;margin-top:2rem}
.tiles,.markets {grid-template-columns:repeat(3,1fr)}
.tile,article,.markets li {background:white;border:1px solid var(--line)}
.tile:hover {box-shadow:0 10px 32px #091a2b22}
.tile div,article,.markets li {padding:1.2rem 1.4rem}
.markets {list-style:none;padding:0}
.markets span {display:block;color:#47586a;font-size:.9rem}
.band {background:#ebe3d6}
.gallery {grid-template-columns:repeat(2,1fr)}
figure {margin:0}
figcaption {padding:.6rem 0}
footer p {color:#d6e1e9;font-size:.9rem}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.split,.tiles{grid-template-columns:1fr}.markets{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.gallery,.markets{grid-template-columns:1fr}}
.folio {background:#11263a;color:#fff;border-bottom:1px solid #c78651}
.folio .wrap {display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding-block:1.2rem}
.folio p {margin:0;font-family:Georgia,serif;font-size:1.35rem}
.folio strong {color:var(--gold);font:700 .73rem system-ui;margin-right:.6rem}
.folio small {display:block;color:#cfdbe6;font:400 .84rem system-ui;margin-top:.3rem}
.story {display:grid;grid-template-columns:1fr 2.6fr;gap:clamp(1rem,5vw,5rem)}
.story h2 {max-width:16ch}
.story p:not(.kicker) {font-size:1.1rem;color:#3d5062}
.text-link {font-weight:750;color:var(--copper)}
.tile img {transition:filter .2s ease}
.tile:hover img {filter:brightness(1.06)}
@media(max-width:620px){.story,.folio .wrap{grid-template-columns:1fr}.folio p{padding:.35rem 0}}

@media (max-width: 760px) {
  header .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
  header .bar > a { justify-self: start; }
  header .bar > a[lang] { display: grid; place-items: center; min-height: 44px; }
  header nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; width: 100%; }
  header nav a { display: flex; align-items: center; min-height: 44px; padding: .45rem .65rem; background: #ffffff0b; border-radius: .25rem; overflow-wrap: anywhere; }
  header nav a[aria-current="page"] { background: #ffae6624; }
  .section { padding-block: 2.75rem; }
  .hero h1 { font-size: clamp(2.15rem, 8vw, 3.55rem); overflow-wrap: anywhere; }
  h2 { font-size: clamp(1.85rem, 6.7vw, 2.75rem); overflow-wrap: anywhere; }
  .split > * { min-width: 0; }
  .button { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
  .tile div, article, .markets li { padding: 1rem; }
  footer .bar { display: grid; justify-items: start; }
  footer .bar p { margin: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero .section > * { animation: zonyaz-enter .65s ease-out both; }
  .hero .section > :nth-child(2) { animation-delay: .12s; }
  .button, .tile, .gallery img { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
  .button:active { transform: scale(.97); }
  @supports (animation-timeline: view()) {
    main .section:not(.hero .section) > :is(h2, .tiles, .gallery, .feature, .markets) {
      animation: zonyaz-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    @media (hover: hover) and (pointer: fine) {
      .hero :is(.feature, .identity) {
        animation: zonyaz-depth linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
      }
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .tile:hover, .tile:focus-visible { transform: perspective(850px) translateY(-6px) rotateX(3deg); }
    .button:hover { transform: translateY(-2px); box-shadow: 0 7px 20px #0002; }
    .gallery figure:hover img { transform: scale(1.018); }
  }
}
@keyframes zonyaz-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zonyaz-reveal {
  from { opacity: .55; transform: perspective(1000px) translateY(20px) rotateX(4deg); }
  to { opacity: 1; transform: perspective(1000px) translateY(0) rotateX(0); }
}
@keyframes zonyaz-depth {
  from { transform: perspective(1100px) translateY(0) rotateX(0); }
  to { transform: perspective(1100px) translateY(32px) rotateX(-7deg) scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .tile img { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enhanced main .section:not(.hero .section) > :is(h2, .tiles, .gallery, .feature, .markets),
  .motion-enhanced .hero :is(.feature, .identity) { animation: none; }
  .motion-enhanced .hero { overflow: hidden; }
  .motion-enhanced .hero :is(.feature, .identity) {
    transform-origin: center top;
    box-shadow: 0 22px 56px #0005;
  }
}

.reading-progress {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(90deg, #d38040, #ffe0a8);
  box-shadow: 0 0 16px #ffae6680;
  transform-origin: left;
  scale: 0 1;
}
[dir="rtl"] .reading-progress { transform-origin: right; }

@media (prefers-reduced-motion: no-preference) {
  .scroll-studio .hero {
    --travel: 110px;
    position: relative;
    isolation: isolate;
  }
  .scroll-studio .hero::before {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 72% 60%, #e398482b, transparent 50%),
      repeating-linear-gradient(120deg, transparent 0 54px, #ffbd7912 55px, transparent 56px);
    transform: translateY(calc(var(--hero-depth, 0) * -100px)) rotate(-6deg);
  }
  .scroll-studio .hero .scroll-artwork {
    transform: perspective(950px) translateY(calc(var(--hero-depth, 0) * var(--travel)))
      rotateX(calc(var(--hero-depth, 0) * -17deg)) rotateZ(calc(var(--hero-depth, 0) * -4deg))
      scale(calc(1 - var(--hero-depth, 0) * .13));
    box-shadow: 0 28px 70px #0007;
  }
  .scroll-studio .scroll-copy { translate: 0 calc(var(--hero-depth, 0) * -36px); }
  .scroll-studio .scroll-entry { opacity: calc(.58 + var(--entry-progress, 1) * .42); }
  .scroll-studio .scroll-entry:focus-within,
  .scroll-studio .scroll-entry:focus-visible { opacity: 1; translate: none !important; }
  .scroll-studio .scroll-entry:is(.feature, figure img) {
    clip-path: inset(calc((1 - var(--entry-progress, 1)) * 14%) 0 0 round 2px);
  }
  @media (max-width: 760px) {
    .scroll-studio .hero { --travel: 40px; }
    .scroll-studio .scroll-copy { translate: none; }
  }
}

/* Each card pins briefly while the next card moves over it. */
@media (min-width: 900px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) {
  .scroll-studio main .tiles:has(> :nth-child(3)) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16vh;
    padding-bottom: 14vh;
  }
  .scroll-studio main .tiles:has(> :nth-child(3)) > * {
    position: sticky;
    top: 13vh;
    display: block;
    min-height: 260px;
    border: 1px solid #c18c63;
    border-radius: 16px;
    background: #fffaf3;
    box-shadow: 0 18px 50px #091a2b26;
    opacity: 1;
    translate: none !important;
  }
  .scroll-studio main .tiles:has(> :nth-child(3)) > :nth-child(2n) { top: 16vh; }
  .scroll-studio main .tiles:has(> :nth-child(3)) > :nth-child(3n) { top: 19vh; }
  .scroll-studio main .tiles:has(> :nth-child(3)) > .tile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .scroll-studio main .tiles:has(> :nth-child(3)) > .tile img {
    height: clamp(260px, 40vh, 400px);
    border-radius: 15px 0 0 15px;
  }
  [dir="rtl"].scroll-studio main .tiles:has(> :nth-child(3)) > .tile img {
    border-radius: 0 15px 15px 0;
  }
  .scroll-studio main .tiles:has(> :nth-child(3)) > :focus-within,
  .scroll-studio main .tiles:has(> :nth-child(3)) > :focus-visible { z-index: 2; }
}


.service-paths {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-block:1.4rem .6rem}
.service-paths a {display:flex;align-items:center;gap:.5rem;min-height:48px;padding:.5rem .7rem;border:1px solid #ffae6670;border-radius:6px;background:#091a2b80;color:#fff;text-decoration:none;font-size:.88rem}
.service-paths a:hover,.service-paths a:focus-visible {background:#ffae66;color:#091a2b}
.service-paths span {color:inherit;opacity:.8;font-size:.68rem}
.service-paths b {margin-inline-start:auto}
.project-stories {display:grid;gap:1.5rem;margin-top:1.5rem}
.project-stories article {border-radius:12px}
.project-stories .gallery {margin-top:1rem}
@media(max-width:375px){.service-paths {grid-template-columns:1fr}}

/* Logo palette and homepage service guide */
:root { --cream: #f9f6ef; --gold: #ffad63; }
.hero .identity { border-radius: 18px; box-shadow: 0 24px 70px #0005; }
.hero h1 { text-wrap: balance; }
.help-section { background: #102539; color: #fff; border-block: 1px solid #c97a42; }
.help-section .kicker { color: var(--gold); }
.help-section p { color: #dce6ef; }
.service-faq { min-width: 0; }
.service-faq details { border-bottom: 1px solid #ffffff36; }
.service-faq summary { cursor: pointer; padding: 1rem .25rem; font-weight: 650; }
.service-faq summary::marker { color: var(--gold); }
.service-faq details[open] summary, .service-faq a { color: var(--gold); }
.service-faq details p { margin: 0 0 1rem; padding-inline-start: .25rem; }
@media (prefers-reduced-motion: no-preference) {
  .service-faq details[open] p { animation: zonyaz-enter .25s ease-out; }
}

.audience-grid article {padding:0;overflow:hidden;border-radius:14px;box-shadow:0 10px 35px #091a2b15}
.audience-grid img {width:100%;height:clamp(180px,25vw,310px);object-fit:cover;display:block}
.audience-grid article > div {padding:clamp(1.2rem,3vw,2.4rem)}
.audience-grid h3 {font-size:clamp(1.35rem,2.5vw,2rem)}
.audience-grid a {display:inline-block;color:#814014;font-weight:700;padding-block:.45rem}
@media (max-width: 650px) {.audience-grid {grid-template-columns:1fr}}

/* Classic brand treatment shared by the English and Arabic pages. */
:root { --navy:#081827; --cream:#faf6ee; --gold:#ffb26f; --copper:#874719; --line:#ddceba; }
body { background:var(--cream); }
header { background:#081827; border-bottom:1px solid #b67545; }
header .bar { padding-block:1.5rem; }
header nav a { font-weight:550; }
.hero { background:radial-gradient(ellipse at 85% 30%,#253f53 0%,#0e2538 44%,#081827 76%); }
.hero .section { padding-block:clamp(3rem,7vw,7rem); }
.hero h1 { text-wrap:balance; }
.hero .identity,.hero .feature { border:1px solid #c28958; border-radius:3px; }
.hero .identity { padding:6px; background:#fcf6ec; }
h2 { text-wrap:balance; }
main .section > h2::before { content:""; display:block; width:3rem; height:2px; margin-block-end:1.15rem; background:#a56333; }
.band { background:#eee5d6; border-block:1px solid #e0d0bd; }
.button { border:1px solid #e19556; border-radius:3px; background:linear-gradient(125deg,#ffd19e,#f2a05c); }
.button:hover { background:#ffd6ae; }
.tiles article,.tile,.markets li { border-color:var(--line); background:#fffcf6; }
main .tile:hover { box-shadow:0 15px 32px #0818272b; }
.gallery figure { border:1px solid var(--line); background:#fffcf6; }
.gallery figcaption { padding-inline:.8rem; }
footer { border-top:1px solid #b67545; }
footer .bar { padding-block:2rem; }
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3 { font-family:Tahoma,Arial,sans-serif; letter-spacing:normal; }
@media(max-width:760px) {
  header .bar { padding-block:.85rem; }
  .hero .section { padding-block:2.75rem; }
  .hero .identity { padding:3px; }
}