/* .ae additions on top of the shared concept styles. */
@font-face{font-family:Alexandria;src:url('assets/alexandria-arabic.woff2') format('woff2');font-style:normal;font-weight:300 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* Arabic set into an otherwise Latin page, e.g. the bilingual type card. */
[lang=ar]{font-family:Alexandria,Outfit,Arial,sans-serif;letter-spacing:0}
.lang-switch{font-size:15px;padding:10px 14px;border:1px solid var(--line);min-height:44px;display:inline-flex;align-items:center;transition:background var(--micro)}
.lang-switch:hover{background:#e1ebe5}
.site-header nav>a.lang-switch{padding-block:8px}

/* Typographic case visuals: used wherever client artwork is not yet cleared. */
.type-visual{background:var(--navy);color:var(--mint)}
.type-visual.type-mint{background:var(--mint);color:var(--navy)}
.type-visual.type-sky{background:#c6f1ff;color:var(--navy)}
.type-visual .visual-caption{color:inherit;background:transparent;opacity:.8}
.client-typesetting>strong{overflow-wrap:anywhere}
.case-facts{list-style:none;padding:0;margin:18px 0 0;font-size:15px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.case-gulf .case-ribbon{background:#e0f0e7}
.wider-visual{background:#e1e9ec;padding:52px 40px 66px;display:flex;flex-direction:column;gap:24px}
.wider-visual>img{position:static;height:auto;width:100%;max-height:325px;object-fit:contain;box-shadow:0 12px 36px #22314e18}
.wider-visual .portfolio-label{font:12px 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.06em;align-self:flex-start}
.wider-visual .visual-caption{background:transparent;bottom:18px;left:30px;font-size:12px}
.case-study:hover .wider-visual>img{transform:none}

/* The concept stacks three cases, each 54px below the last; this continues the pattern to five. */
@media(min-width:1000px) and (prefers-reduced-motion:no-preference){
  .case-stack.stack-5{padding-bottom:216px}
  .case-stack.stack-5 .case-study:nth-child(4){top:112px!important;transform:translateY(162px)}
  .case-stack.stack-5 .case-study:nth-child(5){top:112px!important;transform:translateY(216px)}
  .case-stack.stack-5:has(:focus-visible){padding-bottom:0}
  .case-stack.stack-5:has(:focus-visible) .case-study{transform:none}
}

/* The team photograph runs full width here; there is no second portrait. */
.people-grid.team-only{grid-template-columns:1fr}
.people-grid.team-only img{height:clamp(320px,42vw,520px)}
@media(max-width:760px){.wider-visual{padding:28px 24px 54px;gap:20px}.wider-visual>img{max-height:220px}.wider-visual .visual-caption{font-size:10px;left:14px;bottom:10px}.lang-switch{justify-content:center}}

/* Client case visuals */
.visual-rf{background:#e1e9ec}
.visual-care{background:var(--mint)}
.visual-care>img{box-shadow:none;max-height:360px}
.visual-vps{background:var(--navy);color:var(--mint)}
.visual-vps>img{box-shadow:none}
.visual-tlc{background:#003e70;color:#fff}
.visual-tlc>img{box-shadow:none;width:min(62%,324px);align-self:center;margin-block:auto}
.visual-vps .visual-caption,.visual-tlc .visual-caption{color:inherit}
@media(max-width:760px){.visual-care>img{max-height:240px}}
.case-links{display:flex;flex-wrap:wrap;gap:0 28px;align-items:center}.case-links .case-open{opacity:.75}

/* Three-line English hero headline */
.hero h1 .headline-line:nth-child(2){animation-delay:75ms}
@media(min-width:1250px){html:not([dir=rtl]) .hero h1{font-size:clamp(84px,7vw,108px)}}
@media(max-width:760px){html:not([dir=rtl]) .hero h1 .headline-line{max-width:none;margin-bottom:0}html:not([dir=rtl]) .hero h1{font-size:clamp(40px,10.4vw,70px)}}

/* Sticky WhatsApp button. The number lives in each page's href (wa.me/<number>). */
.wa-cta{position:fixed;inset-inline-end:clamp(16px,2.2vw,32px);bottom:clamp(16px,2.2vw,32px);z-index:40;display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 22px 0 16px;background:var(--navy);color:#fff;border-radius:999px;font-size:16px;font-weight:500;line-height:1;box-shadow:0 10px 30px #0a102040;transition:background var(--micro),transform var(--micro) var(--ease),box-shadow var(--micro)}
.wa-cta svg{width:28px;height:28px;flex:none;fill:#25d366}
.wa-cta:hover{background:#354b72;transform:translateY(-2px);box-shadow:0 14px 34px #0a102052}
.wa-cta:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.wa-cta{animation:wa-enter 650ms var(--ease) 900ms both}
@keyframes wa-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:760px){.wa-cta{width:56px;padding:0;justify-content:center}.wa-cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.site-footer{padding-bottom:96px}}
@media print{.wa-cta{display:none}}

/* Accreditation strip under the hero timeline. Logos sit in mono until hovered, so they read as one row. */
.creds{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.creds .eyebrow{color:var(--muted);flex:none;margin:0}
.creds-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(28px,4vw,56px);flex-wrap:wrap;margin-inline-start:auto}
.creds-list li{display:flex;align-items:center}
.creds-list img{width:auto;height:52px;filter:grayscale(1);opacity:.7;transition:filter var(--micro),opacity var(--micro)}
.creds-list li:first-child img{height:72px}
.creds-list li:hover img{filter:none;opacity:1}
@media(max-width:760px){.creds{margin-top:36px;flex-direction:column;align-items:flex-start;gap:18px}.creds-list{margin-inline-start:0;gap:22px 28px}.creds-list img{height:38px}.creds-list li:first-child img{height:54px}}
@media(prefers-reduced-motion:reduce){.creds-list img{transition:none}}

/* Footer legal links (launch prep, 22 Sept 2026) */
.footer-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}