* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

body {
  background-color: #f8f9fa;
  color: #121214;
  font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', sans-serif;
  overflow-x: hidden;
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}
html.dark body {
  background-color: #0d0d0f;
  color: #f4f4f6;
}

/* ---- Language switching (both languages are in the HTML) ---- */
body:not(.is-rtl) .t-ar { display: none !important; }
body.is-rtl .t-en { display: none !important; }

/* ---- Logged-in admin bar offset ---- */
body.admin-bar .hs-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .hs-header { top: 46px; } }

/* ---- Glass ---- */
.glass-panel {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.06);
}
html.dark .glass-panel {
  background: rgba(22, 22, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.45);
}
.glass-pill {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
}
html.dark .glass-pill {
  background: rgba(35, 35, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- Titles ---- */
.spencer-title {
  font-family: 'Anton', 'Oswald', 'IBM Plex Sans Arabic', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
.spencer-sub-title {
  font-family: 'Anton', 'Oswald', 'IBM Plex Sans Arabic', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
}
.contact-mega-title {
  font-family: 'Anton', 'Oswald', 'IBM Plex Sans Arabic', sans-serif;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.04em;
}

/* ---- Cards ---- */
.spencer-card {
  border-radius: 2.2rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  cursor: pointer;
  user-select: none;
}
.spencer-card:hover {
  box-shadow: 0 28px 55px -15px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}
html.dark .spencer-card:hover {
  box-shadow: 0 28px 55px -15px rgba(0, 0, 0, 0.6);
}

/* ---- Draggable hero cards ---- */
.spencer-fanned-card {
  position: absolute;
  width: 15rem;
  height: 20rem;
  border-radius: 2.2rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.16);
  will-change: transform, opacity;
  transition: box-shadow 0.2s ease;
}
@media (min-width: 640px) {
  .spencer-fanned-card { width: 19rem; height: 24.5rem; }
}
@media (min-width: 1024px) {
  .spencer-fanned-card { width: 21rem; height: 27rem; }
}
.spencer-fanned-card:hover {
  box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.22);
}
#heroCardsStage { touch-action: pan-y; outline: none; }
#heroCardsStage.is-dragging .spencer-fanned-card { cursor: grabbing; }
.spencer-fanned-card.is-front { box-shadow: 0 40px 80px -18px rgba(0, 0, 0, 0.3); }
.hs-arrow { position: absolute; top: 50%; margin-top: -19px; z-index: 300; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; }
.hs-arrow--l { left: 0; }
.hs-arrow--r { right: 0; }
.hs-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Scrollbar reset ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Marquee (list is rendered twice for a seamless loop) ---- */
@keyframes marqueeTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: max-content;
  direction: ltr;
  animation: marqueeTicker 40s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }
.marquee-item { direction: ltr; }
@media (prefers-reduced-motion: reduce) {
  .animate-marquee { animation: none; }
}

/* ---- Arabic typography ---- */
body.is-rtl { direction: rtl; }
body.is-rtl .contact-mega-title { white-space: nowrap; font-size: 15vw !important; }
body.is-rtl,
body.is-rtl * {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}
body.is-rtl .spencer-title,
body.is-rtl .spencer-sub-title,
body.is-rtl .contact-mega-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
/* Keep card artwork and modal chrome from flipping */
body.is-rtl .spencer-fanned-card,
body.is-rtl #featuredTrack,
body.is-rtl #modalSliderContainer { direction: ltr; }
body.is-rtl #modalSlideContent { direction: rtl; }
body.is-rtl .spencer-fanned-card .t-ar { direction: rtl; }

/* ---- Honeypot field: hidden without moving it off-screen.
   (An element at left:-9999px makes RTL pages ~10,000px wide and they open blank.) ---- */
.hs-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
}

/* ---- Never let anything push the page sideways ---- */
html { overflow-x: clip; }
body { overflow-x: clip; }
#clients .overflow-hidden { direction: ltr; }

/* ---- Form result: green when sent, red when something went wrong ---- */
.hs-form-msg {
  padding: .8rem 1rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.5;
  text-align: center;
  border: 1px solid transparent;
}
.hs-form-msg.is-ok  { background: #dcfce7; color: #14532d; border-color: #86efac; }
.hs-form-msg.is-err { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }
html.dark .hs-form-msg.is-ok  { background: #052e16; color: #bbf7d0; border-color: #166534; }
html.dark .hs-form-msg.is-err { background: #450a0a; color: #fecaca; border-color: #991b1b; }

#toast.is-ok  { background-color: #16a34a !important; color: #fff !important; }
#toast.is-err { background-color: #dc2626 !important; color: #fff !important; }
#toast { max-width: calc(100vw - 2rem); text-align: center; text-transform: none; letter-spacing: .02em; white-space: normal; }

/* ---------------------------------------------------------------
 * Motion-graphics animation layer
 * ------------------------------------------------------------- */
#hsProgress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, #84cc16, #3b82f6, #a855f7, #f59e0b);
  transform-origin: left center; transform: scaleX(0); pointer-events: none;
}
body.is-rtl #hsProgress { transform-origin: right center; }

/* Floating geometric shapes */
.hs-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hs-shape {
  position: absolute; opacity: .35;
  animation: hs-float var(--d, 9s) ease-in-out infinite;
  will-change: transform;
}
.hs-shape:nth-child(even) { animation-name: hs-float-2; }
.dark .hs-shape { opacity: .22; }
@keyframes hs-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1); }
  50%      { transform: translate3d(14px, -30px, 0) rotate(calc(var(--r, 0deg) + 70deg)) scale(1.12); }
}
@keyframes hs-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1); }
  50%      { transform: translate3d(-18px, 26px, 0) rotate(calc(var(--r, 0deg) - 90deg)) scale(.9); }
}

/* Title intro */
.hs-title-in { animation: hs-title-in 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.hs-title-in--2 { animation-delay: .18s; }
@keyframes hs-title-in {
  from { opacity: 0; transform: translateY(46px) scale(.96); filter: blur(14px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Scroll reveal (class added by main.js; only when JS runs) */
html.hs-js .hs-reveal {
  opacity: 0; translate: 0 44px;
  transition: opacity 1s cubic-bezier(.2, .7, .2, 1), translate 1s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--hs-d, 0ms);
}
html.hs-js .hs-reveal.is-in { opacity: 1; translate: 0 0; }

/* Ambient glow drifting */
.fixed.inset-0 > .absolute { animation: hs-drift 22s ease-in-out infinite alternate; }
.fixed.inset-0 > .absolute:nth-child(2) { animation-duration: 28s; animation-direction: alternate-reverse; }
.fixed.inset-0 > .absolute:nth-child(3) { animation-duration: 34s; }
@keyframes hs-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 40px, 0) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .hs-shape, .hs-title-in, .fixed.inset-0 > .absolute { animation: none !important; }
  html.hs-js .hs-reveal { opacity: 1 !important; translate: none !important; transition: none !important; }
  #hsProgress { display: none; }
}

/* Phones: smaller hero cards so there is always room to scroll past them */
@media (max-width: 639px) {
  .spencer-fanned-card { width: 14rem; height: 18.5rem; border-radius: 2rem; padding: 1rem !important; }
  .spencer-fanned-card > div:nth-child(2) { height: 8.25rem !important; padding: .65rem !important; margin-top: .25rem; margin-bottom: .25rem; }
  .spencer-fanned-card .font-headline { font-size: 1.9rem; line-height: 1.1; }
}

/* ---- Click-to-play video cover (the video loads only on press) ---- */
.hs-fac{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:0;padding:0;cursor:pointer;overflow:hidden;color:#fff;background:transparent}
.hs-fac__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-fac__shade{position:absolute;inset:0;background:rgba(0,0,0,.28);transition:background .25s}
.hs-fac:hover .hs-fac__shade{background:rgba(0,0,0,.1)}
.hs-play{position:relative;width:72px;height:72px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(0,0,0,.35);transition:transform .25s}
.hs-fac:hover .hs-play{transform:scale(1.1)}
.hs-fac__cap{position:absolute;left:16px;right:16px;bottom:44px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.5);pointer-events:none}
@media (max-width:639px){.hs-play{width:60px;height:60px}}

.hs-logo__img { display: block; height: 2.5rem; width: auto; max-width: 11rem; object-fit: contain; }
@media (min-width: 640px) { .hs-logo__img { height: 3rem; } }
#heroCardsStage { height: 22.5rem; }
@media (min-width: 640px) { #heroCardsStage { height: 30rem; } }
@media (min-width: 768px) { #heroCardsStage { height: 34rem; } }

/* ---- Case study inside the project modal ---- */
.hs-case { display: flex; flex-direction: column; gap: 1rem; margin-top: .25rem; }
.hs-case.hidden { display: none; }
.hs-case__eyebrow { font-family: "Oswald", "IBM Plex Sans Arabic", sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: #71717a; display: flex; align-items: center; gap: .75rem; }
.hs-case__eyebrow::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .25; }
.hs-case__pair { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .hs-case__pair { grid-template-columns: 1fr 1fr; } }
.hs-case__block { border-radius: 1.5rem; padding: 1.25rem 1.35rem; background: rgba(0,0,0,.045); }
.dark .hs-case__block { background: rgba(255,255,255,.06); }
.hs-case__block--problem { background: rgba(244,63,94,.09); }
.hs-case__block--solution { background: rgba(16,185,129,.1); }
.hs-case__block--result { background: #121214; color: #fff; }
.dark .hs-case__block--result { background: #fff; color: #121214; }
.hs-case__head { display: flex; align-items: center; gap: .65rem; margin-bottom: .7rem; }
.hs-case__num { font-family: ui-monospace, Menlo, monospace; font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; background: rgba(0,0,0,.1); }
.dark .hs-case__num { background: rgba(255,255,255,.14); }
.hs-case__block--result .hs-case__num { background: rgba(255,255,255,.18); }
.dark .hs-case__block--result .hs-case__num { background: rgba(0,0,0,.12); }
.hs-case__h { font-family: "Oswald", "IBM Plex Sans Arabic", sans-serif; font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.hs-case__p { font-size: .9rem; line-height: 1.75; margin: 0 0 .6rem; opacity: .92; }
.hs-case__p:last-child { margin-bottom: 0; }
.hs-case__steps { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 1rem; }
.hs-case__step { display: flex; gap: .85rem; position: relative; }
.hs-case__step:not(:last-child)::before { content: ""; position: absolute; top: 2rem; bottom: -1rem; left: .95rem; width: 2px; background: currentColor; opacity: .15; }
body.is-rtl .hs-case__step:not(:last-child)::before { left: auto; right: .95rem; }
.hs-case__dot { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #121214; color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, Menlo, monospace; }
.dark .hs-case__dot { background: #fff; color: #121214; }
.hs-case__steptxt { display: flex; flex-direction: column; gap: .2rem; padding-top: .2rem; min-width: 0; }
.hs-case__stitle { font-size: .95rem; font-weight: 700; }
.hs-case__sdesc { font-size: .88rem; line-height: 1.7; opacity: .85; }
.hs-case__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.hs-case__stat { border-radius: 1rem; padding: .8rem .9rem; background: rgba(255,255,255,.12); display: flex; flex-direction: column; gap: .15rem; }
.dark .hs-case__stat { background: rgba(0,0,0,.07); }
.hs-case__stat b { font-family: "Anton", "Oswald", sans-serif; font-weight: 400; font-size: 1.7rem; line-height: 1; letter-spacing: .01em; }
.hs-case__stat span { font-size: .72rem; opacity: .8; line-height: 1.4; }
body.is-rtl .hs-case { direction: rtl; }

#featuredTrack { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
#featuredTrack.is-gliding { user-select: none; -webkit-user-select: none; }
#featuredTrack > * { will-change: transform; }

/* ---- Contrast pass ---- */
.text-spencerGray { color: #52525b !important; }
html.dark .text-spencerGray { color: #b4b4bd !important; }
.glass-pill { color: #121214; }
html.dark .glass-pill { color: #f4f4f6; }
.spencer-sub-title { color: #8b8b97 !important; }
html.dark .spencer-sub-title { color: #6e6e7c !important; }
.spencer-fanned-card .opacity-70, .spencer-fanned-card .opacity-75, .spencer-fanned-card .opacity-80, .spencer-fanned-card .opacity-90,
.spencer-card .opacity-70, .spencer-card .opacity-75, .spencer-card .opacity-80, .spencer-card .opacity-90 { opacity: 1 !important; }
.spencer-fanned-card .t-en, .spencer-fanned-card .t-ar { text-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Header: a soft fade so the floating pills never sit on top of moving text */
.hs-header::before { content: ""; position: absolute; inset: 0 0 -1.25rem 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, #f8f9fa 35%, rgba(248,249,250,0)); }
html.dark .hs-header::before { background: linear-gradient(to bottom, #0d0d0f 35%, rgba(13,13,15,0)); }

/* Project popup: solid surface, strong text */
#galleryModal { background: rgba(8,8,10,.86) !important; }
#galleryModalBox { background: #ffffff !important; border: 1px solid rgba(0,0,0,.08); color: #121214 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.dark #galleryModalBox { background: #17171b !important; border-color: rgba(255,255,255,.1); color: #f4f4f6 !important; }
#galleryModalBox #modalDesc { opacity: 1 !important; color: inherit; font-size: .95rem; line-height: 1.8; }
.hs-case__block { background: #f1f1f4; }
html.dark .hs-case__block { background: #232329; }
.hs-case__block--problem { background: #fde7ec; }
html.dark .hs-case__block--problem { background: #3b1f27; }
.hs-case__block--solution { background: #dff5ea; }
html.dark .hs-case__block--solution { background: #16352a; }
.hs-case__block--result { background: #121214; color: #fff; }
html.dark .hs-case__block--result { background: #f4f4f6; color: #121214; }
.hs-case__p, .hs-case__sdesc { opacity: 1; }
.hs-case__sdesc { color: inherit; }
.hs-case__eyebrow { color: #52525b; }
html.dark .hs-case__eyebrow { color: #b4b4bd; }
.hs-case__stat span { opacity: 1; }
.hs-case__stat { background: rgba(255,255,255,.14); }
html.dark .hs-case__stat { background: rgba(0,0,0,.08); }

/* ---- Contact: readable giant title, placeholders and footer text ---- */
.contact-mega-title { color: #3a3a41 !important; }
html.dark .contact-mega-title { color: #6b6b76 !important; }
html:not(.dark) #contact .text-black\/50 { color: rgba(0, 0, 0, .78) !important; }
html.dark #contact .dark\:text-white\/50 { color: rgba(255, 255, 255, .78) !important; }
html:not(.dark) #contact .text-black\/80 { color: #121214 !important; }
html.dark #contact .dark\:text-white\/80 { color: #f4f4f6 !important; }
input::placeholder, textarea::placeholder { color: #666672; opacity: 1; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #a1a1aa; opacity: 1; }

/* Hero arrows sit under the cards so they never cover card text */
.hs-arrow { top: auto; bottom: 0; margin-top: 0; }
.hs-arrow--l { left: calc(50% - 3.4rem); }
.hs-arrow--r { right: calc(50% - 3.4rem); }
@media (max-width: 639px) { #heroCardsStage { height: 25rem; } }

/* Hero wheel: GPU-friendly cards (no blur, no shadow repaint, no text-shadow while moving) */
.spencer-fanned-card { left: 50%; top: 50%; transition: none !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: layout style; box-shadow: 0 30px 60px -20px rgba(0,0,0,.28) !important; }
.spencer-fanned-card .backdrop-blur-sm, .spencer-fanned-card [class*="backdrop-blur"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.spencer-fanned-card .t-en, .spencer-fanned-card .t-ar { text-shadow: none !important; }
.spencer-fanned-card:hover { box-shadow: 0 30px 60px -20px rgba(0,0,0,.28) !important; }
#heroCardsStage.is-dragging { cursor: grabbing; }
.hs-arrow { transition: transform .15s ease; }
.hs-arrow:active { transform: scale(.92); }

/* ---- Video player (custom controls) ---- */
.hs-pl { position: relative; width: 100%; height: 100%; background: #000; display: flex; flex-direction: column; color: #fff; overflow: hidden; }
.hs-pl__stage { position: relative; flex: 1; min-height: 0; background: #000; cursor: pointer; }
.hs-pl__stage video, .hs-pl__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.hs-pl--basic .hs-pl__stage { cursor: default; }
.hs-pl--basic .hs-pl__bar > :not(.hs-pl__btn--stop) { display: none; }
.hs-pl--basic .hs-pl__bar { justify-content: flex-end; background: transparent; position: absolute; top: .5rem; right: .5rem; left: auto; padding: 0; z-index: 5; }
.hs-pl__bar { display: flex; align-items: center; gap: .35rem; padding: .35rem .6rem; background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.72)); z-index: 4; }
.hs-pl__btn { flex: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.hs-pl__btn:hover { background: rgba(255,255,255,.18); }
.hs-pl__btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hs-pl__btn--stop { margin-inline-start: .1rem; }
.hs-pl__time { flex: none; font: 600 .72rem/1 ui-monospace, Menlo, monospace; color: #fff; min-width: 5.4rem; text-align: center; letter-spacing: .02em; }
.hs-pl__seek { position: relative; flex: 1; height: 1.5rem; min-width: 3rem; cursor: pointer; touch-action: none; }
.hs-pl__seek::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; background: rgba(255,255,255,.28); }
.hs-pl__buf, .hs-pl__played { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; width: 0; }
.hs-pl__buf { background: rgba(255,255,255,.45); }
.hs-pl__played { background: #ff2d2d; }
.hs-pl__knob { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #ff2d2d; box-shadow: 0 0 0 3px rgba(255,45,45,.25); transform: scale(0); transition: transform .12s; }
.hs-pl__seek:hover .hs-pl__knob, .hs-pl.is-paused .hs-pl__knob { transform: scale(1); }
.hs-pl__spin { position: absolute; left: 50%; top: calc(50% - 1.2rem); width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; display: none; z-index: 3; pointer-events: none; }
.hs-pl__spin.is-on { display: block; }
.hs-pl__spin i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; animation: hsSpin .8s linear infinite; }
@keyframes hsSpin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .hs-pl__time { min-width: 4.4rem; font-size: .66rem; } .hs-pl__btn { width: 2rem; height: 2rem; } }

.hs-req { color: #e11d48; font-weight: 700; }
html.dark .hs-req { color: #fb7185; }

/* ---- Last Work page ---- */
.lw-grid { column-count: 1; column-gap: 1.1rem; }
@media (min-width: 560px) { .lw-grid { column-count: 2; } }
@media (min-width: 900px) { .lw-grid { column-count: 3; column-gap: 1.4rem; } }
@media (min-width: 1250px) { .lw-grid { column-count: 4; } }
.lw-tile { display: block; width: 100%; margin: 0 0 1.1rem; padding: 0; border: 0; background: none; break-inside: avoid; cursor: pointer; perspective: 900px; text-align: start; color: #fff; opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .6s ease var(--lw-d,0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--lw-d,0ms); -webkit-tap-highlight-color: transparent; }
@media (min-width: 900px) { .lw-tile { margin-bottom: 1.4rem; } }
.lw-tile.is-in { opacity: 1; transform: none; }
.lw-tile__in { position: relative; display: block; overflow: hidden; border-radius: 1.6rem; background: #1d1d22; box-shadow: 0 18px 40px -18px rgba(0,0,0,.4); transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1)); transition: transform .25s ease-out, box-shadow .3s; will-change: transform; transform-style: preserve-3d; }
.lw-tile:hover .lw-tile__in, .lw-tile:focus-visible .lw-tile__in { --sc: 1.025; box-shadow: 0 32px 60px -20px rgba(0,0,0,.55); }
.lw-tile:focus-visible { outline: 3px solid #3b82f6; outline-offset: 3px; border-radius: 1.6rem; }
.lw-tile img { display: block; width: 100%; height: auto; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.lw-tile:hover img { transform: scale(1.06); }
.lw-tile__art { display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.lw-tile__big { font-family: "Anton","Oswald","IBM Plex Sans Arabic",sans-serif; font-size: 1.9rem; line-height: 1.05; text-transform: uppercase; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.lw-tile__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 55%); opacity: 0; transition: opacity .3s; }
.lw-tile:hover .lw-tile__shade, .lw-tile:focus-visible .lw-tile__shade { opacity: 1; }
.lw-tile__cap { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; font: 700 .8rem/1.2 "Oswald","IBM Plex Sans Arabic",sans-serif; letter-spacing: .08em; text-transform: uppercase; transform: translateY(10px); opacity: 0; transition: .3s; }
.lw-tile:hover .lw-tile__cap, .lw-tile:focus-visible .lw-tile__cap { transform: none; opacity: 1; }
.lw-tile__play { position: absolute; top: .8rem; right: .8rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
.lw-tile__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.28), rgba(255,255,255,0) 55%); opacity: 0; transition: opacity .25s; }
.lw-tile:hover .lw-tile__glare { opacity: 1; }
@media (hover: none) { .lw-tile__shade { opacity: 1; } .lw-tile__cap { opacity: 1; transform: none; } .lw-tile__glare { display: none; } }
.lw-random:hover { transform: scale(1.06) rotate(-1.5deg); }
.lw-random:active { transform: scale(.96); }
.lw-cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; padding: .55rem .95rem; border-radius: 99px; background: #fff; color: #121214; font: 700 .7rem/1 "Oswald","IBM Plex Sans Arabic",sans-serif; letter-spacing: .14em; box-shadow: 0 8px 24px rgba(0,0,0,.3); opacity: 0; transform: translate3d(-100px,-100px,0) scale(.6); transition: opacity .2s, scale .2s; }
.lw-cursor.is-on { opacity: 1; }
@media (hover: none) { .lw-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .lw-tile { opacity: 1; transform: none; transition: none; } .lw-tile__in, .lw-tile img { transition: none; } }
@media (max-width: 520px) { .hs-nav-pill { padding-left: .7rem !important; padding-right: .7rem !important; font-size: .68rem !important; } }
#modalSliderContainer:has(.hs-pl) #slideIndexLabel { display: none; }
#modalSliderContainer:has(.hs-pl) #modalPrev, #modalSliderContainer:has(.hs-pl) #modalNext { top: 40%; }
.hs-nav-pill { white-space: nowrap; }
.lw-grid { column-count: 2; column-gap: .7rem; }
.lw-tile { margin-bottom: .7rem; }
.lw-tile__in { border-radius: 1.1rem; }
.lw-tile__big { font-size: 1.2rem; }
@media (min-width: 700px) { .lw-grid { column-gap: 1.1rem; } .lw-tile { margin-bottom: 1.1rem; } .lw-tile__in { border-radius: 1.5rem; } .lw-tile__big { font-size: 1.9rem; } }
@media (min-width: 1000px) { .lw-grid { column-count: 3; column-gap: 1.4rem; } .lw-tile { margin-bottom: 1.4rem; } }
@media (min-width: 1300px) { .lw-grid { column-count: 4; } }

/* ---- Hero entrance: cards stay hidden until JS has placed them, then fan out ---- */
.spencer-fanned-card { will-change: transform, opacity; transform: translate3d(0,0,0) translate(-50%,-50%); }
/* Phone: one rounded box, country code on the left, number on the right */
.hs-phone { display: flex; align-items: stretch; direction: ltr; border: 1px solid rgba(0,0,0,.15); border-radius: 1rem; background: rgba(255,255,255,.8); overflow: hidden; transition: border-color .2s; }
.hs-phone:focus-within { border-color: #000; }
.hs-phone select { flex: 0 0 auto; width: 6.6rem; padding: .75rem .4rem .75rem .9rem; border: 0; border-right: 1px solid rgba(0,0,0,.12); border-radius: 0; background-color: transparent; font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: inherit; cursor: pointer; outline: none; }
.hs-phone input#hsPhone { flex: 1 1 auto; min-width: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; outline: none; box-shadow: none; }
html.dark .hs-phone { border-color: rgba(255,255,255,.15); background: rgba(24,24,27,.8); }
html.dark .hs-phone:focus-within { border-color: #fff; }
html.dark .hs-phone select { border-right-color: rgba(255,255,255,.15); color: #fff; }
html.dark .hs-phone select option { color: #000; }
.hs-theme-ic { display: inline-flex; align-items: center; justify-content: center; }
.hs-theme-ic .hs-ic-sun, .hs-theme-ic[data-mode="dark"] .hs-ic-moon { display: none; }
.hs-theme-ic[data-mode="dark"] .hs-ic-sun { display: block; }

/* ---- Bigger, clearer card content on tablet / desktop (same feel as the phone) ---- */
@media (min-width: 640px) {
  .spencer-fanned-card { padding: 1.5rem !important; }
  .spencer-fanned-card > div:nth-child(2) { height: 11.5rem !important; padding: 1rem !important; border-radius: 1.5rem; }
  .spencer-fanned-card .font-headline { font-size: 2.7rem; line-height: 1.05; }
  .spencer-fanned-card .text-\[9px\] { font-size: 12px; }
  .spencer-fanned-card .text-\[10px\] { font-size: 13px; padding: .3rem .8rem; }
  .spencer-fanned-card .text-xs { font-size: 14px; }
  .spencer-fanned-card .text-\[11px\] { font-size: 15px; letter-spacing: .06em; }
  .spencer-fanned-card > div:nth-child(2) .h-1 { height: .3rem; }
}
@media (min-width: 1024px) {
  .spencer-fanned-card .font-headline { font-size: 3.2rem; }
  .spencer-fanned-card > div:nth-child(2) { height: 13rem !important; }
}

/* ---- Smoothness: no animated blur behind the page (it re-blurred a huge area every frame) ---- */
.fixed.inset-0 > .absolute { animation: none !important; filter: none !important; -webkit-filter: none !important; }
.fixed.inset-0 > .absolute.bg-lime-300 { background: radial-gradient(closest-side, rgba(190,242,100,.9), rgba(190,242,100,0)) !important; }
.fixed.inset-0 > .absolute.bg-blue-300 { background: radial-gradient(closest-side, rgba(147,197,253,.9), rgba(147,197,253,0)) !important; }
.fixed.inset-0 > .absolute.bg-purple-300 { background: radial-gradient(closest-side, rgba(216,180,254,.9), rgba(216,180,254,0)) !important; }
.fixed.inset-0 > .absolute { width: 34rem !important; height: 34rem !important; border-radius: 50%; }
.spencer-fanned-card.is-front { box-shadow: 0 30px 60px -20px rgba(0,0,0,.28) !important; }
.glass-pill, .glass-panel { will-change: auto; }

/* ---- Inner panel: even bigger on tablet / desktop ---- */
@media (min-width: 640px) {
  .spencer-fanned-card { padding: 1.1rem !important; }
  .spencer-fanned-card > div:nth-child(2) { height: 14rem !important; padding: 1.15rem !important; margin-top: .3rem; margin-bottom: .3rem; }
  .spencer-fanned-card .font-headline { font-size: 3.2rem; }
  .spencer-fanned-card .text-\[9px\] { font-size: 13px; }
}
@media (min-width: 1024px) {
  .spencer-fanned-card > div:nth-child(2) { height: 17rem !important; }
  .spencer-fanned-card .font-headline { font-size: 4rem; }
  .spencer-fanned-card .text-\[9px\] { font-size: 14px; }
}

/* slide change: soft cross-fade */
#modalSlideContent > * { animation: hsSlideIn .6s ease both; }
@keyframes hsSlideIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ---- Last Work: even grid (no gaps), show-more ---- */
.lw-grid { display: grid !important; column-count: auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (min-width: 700px) { .lw-grid { gap: 1.1rem; } }
@media (min-width: 1000px) { .lw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }
@media (min-width: 1300px) { .lw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lw-grid .lw-tile { margin: 0 !important; }
.lw-grid .lw-tile.lw-off { display: none; }
.lw-grid .lw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lw-grid .lw-tile__art { position: absolute; inset: 0; aspect-ratio: auto !important; }

/* ---- Last Work: real ratios (1:1, 3:4, 9:16, 16:9). Row spans are measured in JS, so nothing leaves gaps. ---- */
.lw-grid { grid-auto-rows: 2px !important; row-gap: 0 !important; grid-auto-flow: row dense; --lwg: .7rem; }
@media (min-width: 700px) { .lw-grid { --lwg: 1.1rem; } }
@media (min-width: 1000px) { .lw-grid { --lwg: 1.4rem; } }
.lw-grid { column-gap: var(--lwg) !important; }
.lw-grid .lw-tile { height: auto !important; padding-bottom: var(--lwg) !important; }
.lw-grid .lw-tile__in { height: auto !important; }
.lw-grid .lw-tile.r11 .lw-tile__in { aspect-ratio: 1 / 1 !important; }
.lw-grid .lw-tile.r34 .lw-tile__in { aspect-ratio: 3 / 4 !important; }
.lw-grid .lw-tile.r916 .lw-tile__in { aspect-ratio: 9 / 16 !important; }
.lw-grid .lw-tile.r169 .lw-tile__in { aspect-ratio: 16 / 9 !important; }
.lw-grid .lw-tile .lw-tile__big { font-size: 1.5rem !important; }

#clients .overflow-hidden { cursor: grab; user-select: none; -webkit-user-select: none; }

/* ---- Client logo cards: a fixed-size card, the logo fits inside it ---- */
.hs-logo-card { width: 11rem; height: 5rem; padding: .9rem 1.4rem; border-radius: 1.25rem; background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.07); box-shadow: 0 8px 24px -14px rgba(0,0,0,.25); direction: ltr; }
html.dark .hs-logo-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.hs-logo-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; opacity: .9; transition: opacity .3s, transform .3s; }
html.dark .hs-logo-card img { filter: none; }
.hs-logo-card:hover img { opacity: 1; transform: scale(1.05); }
.hs-logo-card__ph { white-space: nowrap; }
@media (max-width: 639px) { .hs-logo-card { width: 9rem; height: 4.2rem; } }

/* "More works" button sits in the middle of the space under the featured cards */
.hs-more-wrap { margin-top: 4.5rem; }
@media (min-width: 640px) { .hs-more-wrap { margin-top: 6.5rem; } }

/* The cards' shadows were cut off by the scrolling strip: give the strip room, and take the room back with negative margins so the layout stays the same */
#featuredTrack { padding-top: 2.5rem !important; padding-bottom: 5.5rem !important; margin-top: -1rem; margin-bottom: -4rem; }

/* case study image gallery (any number of images) */
.hs-case__imgs { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 1.25rem 0; }
@media (min-width: 640px) { .hs-case__imgs { grid-template-columns: repeat(2, 1fr); } }
.hs-case__img { width: 100%; height: auto; display: block; border-radius: 1rem; background: rgba(128,128,128,.12); }
.hs-case__imgs .hs-case__img:only-child { grid-column: 1 / -1; }
.hs-case__imgs .hs-case__img:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* half the space above the Services heading */
.hs-services { padding-top: 3rem !important; }
@media (min-width: 640px) { .hs-services { padding-top: 4rem !important; } }

/* ---- "See more" card (7th card in Featured Work) + page transition ---- */
.hs-seemore{background:linear-gradient(145deg,#16161a,#25252d);box-shadow:0 20px 50px -20px rgba(0,0,0,.55);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;text-decoration:none;isolation:isolate}
@media (hover:hover){.hs-seemore:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 30px 60px -20px rgba(0,0,0,.65)}}
.hs-seemore__glow{position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from 0deg,#b4ec74,#2d82fe,#a855f7,#fb7185,#b4ec74);opacity:.35;filter:blur(60px);animation:hsSpin 9s linear infinite}
.hs-seemore__arrow{width:84px;height:84px;border-radius:50%;background:#fff;color:#121214;display:flex;align-items:center;justify-content:center;animation:hsNudge 1.8s ease-in-out infinite}
body.is-rtl .hs-seemore__arrow svg{transform:scaleX(-1)}
@keyframes hsSpin{to{transform:rotate(360deg)}}
@keyframes hsNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
body.is-rtl .hs-seemore__arrow{animation-name:hsNudgeR}
@keyframes hsNudgeR{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
@media (prefers-reduced-motion:reduce){.hs-seemore__glow,.hs-seemore__arrow{animation:none}.hs-pt{transition:none}}

/* Client logos keep their real colours in dark mode too: the card turns light so dark logos stay readable */
html.dark .hs-logo-card { background: rgba(255,255,255,.93); border-color: rgba(255,255,255,.4); }
html.dark .hs-logo-card img { opacity: 1; }
.hs-logo-card img { max-height: 3rem; }

/* Hasan's mark in the header (black in light mode, white in dark mode) */
.hs-mark { display: block; color: #121214; transition: transform .3s, opacity .3s; }
.hs-mark svg { display: block; height: 2.4rem; width: auto; }
@media (min-width: 640px) { .hs-mark svg { height: 3rem; } }
.hs-mark:hover { transform: scale(1.08); }
html.dark .hs-mark { color: #fff; }

/* Contact mega title: give Anton's tall letters enough room so the top and bottom are not cut. */
.contact-mega-title { line-height: 1.18 !important; padding-block: .02em; }
body.is-rtl .contact-mega-title { line-height: 1.5 !important; }

/* Floating back-to-top button */
.hs-totop{position:fixed;bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));inset-inline-end:1.5rem;z-index:45;width:3rem;height:3rem;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#121214;color:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);opacity:0;transform:translateY(1rem) scale(.85);pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1),background-color .2s}
.hs-totop.is-on{opacity:1;transform:none;pointer-events:auto}
.hs-totop:hover{transform:translateY(-3px)}
.hs-totop:focus-visible{outline:2px solid #2d82fe;outline-offset:3px}
html.dark .hs-totop{background:#fff;color:#121214}
@media (max-width:640px){.hs-totop{width:2.75rem;height:2.75rem;inset-inline-end:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px))}}
body.modal-open .hs-totop,body.hs-modal-open .hs-totop{opacity:0;pointer-events:none}

/* Mobile header: everything fits inside the screen */
@media (max-width: 480px) {
  .hs-header { padding-left: max(.9rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(.9rem, env(safe-area-inset-right, 0px)) !important; gap: .5rem; }
  .hs-header > div:last-child { gap: .3rem !important; min-width: 0; }
  .hs-header > div:last-child > :is(a,button):not(#themeToggleBtn):not([aria-label="Contact"]) { padding: .4rem .55rem !important; font-size: .62rem !important; letter-spacing: .03em !important; white-space: nowrap; }
  .hs-header #themeToggleBtn, .hs-header a[aria-label="Contact"] { width: 2.15rem !important; height: 2.15rem !important; flex: none; }
  .hs-header #themeToggleBtn svg { width: 17px; height: 17px; }
  .hs-mark svg { height: 2rem; }
}
@media (max-width: 360px) {
  .hs-header > div:last-child > :is(a,button):not(#themeToggleBtn):not([aria-label="Contact"]) { padding: .38rem .45rem !important; font-size: .58rem !important; letter-spacing: 0 !important; }
  .hs-header #themeToggleBtn, .hs-header a[aria-label="Contact"] { width: 2rem !important; height: 2rem !important; }
}

/* ---- Page transition to Last Work: a light splash with Hasan's mark (no black screen) ---- */
.hs-pt{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#f8f9fa;opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.4,0,.2,1)}
html.dark .hs-pt{background:#0d0d0f}
.hs-pt svg{height:4.2rem;width:auto;color:#121214;opacity:0;transform:scale(.82);transition:opacity .2s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
html.dark .hs-pt svg{color:#fff}
.hs-pt__bar{position:absolute;left:50%;top:calc(50% + 3.6rem);width:4.5rem;height:3px;margin-left:-2.25rem;border-radius:3px;background:rgba(0,0,0,.08);overflow:hidden;opacity:0;transition:opacity .1s ease}
html.dark .hs-pt__bar{background:rgba(255,255,255,.12)}
.hs-pt__bar::after{content:"";position:absolute;inset:0;width:40%;border-radius:3px;background:linear-gradient(90deg,#b4ec74,#2d82fe,#a855f7);animation:hsPtBar .9s ease-in-out infinite}
@keyframes hsPtBar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.hs-pt.is-on{opacity:1;pointer-events:all}
.hs-pt.is-on svg{opacity:1;transform:none}
.hs-pt.is-on .hs-pt__bar{opacity:1}
html.hs-leaving main,html.hs-leaving section{transition:transform .4s cubic-bezier(.4,0,.2,1),filter .4s ease;transform:scale(.985);filter:blur(2px)}
/* featured strip: soft edges hint there are more cards */
#featuredTrack{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5rem,#000 calc(100% - 4rem),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 2.5rem,#000 calc(100% - 4rem),transparent 100%)}


/* logo pieces build up one after another */
.hs-pt.is-on svg path{animation:hsPiece .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 30ms + 20ms);transform-box:fill-box;transform-origin:center}
@keyframes hsPiece{from{opacity:0;transform:translateY(35%) scale(.6)}to{opacity:1;transform:none}}
/* arriving page: the splash is there before the first paint */
.hs-pt--arrive{display:none}
html.hs-arriving .hs-pt--arrive{display:flex;opacity:1;pointer-events:all}
html.hs-arriving .hs-pt--arrive svg{opacity:1;transform:none;transition:none}
/* zoom in through the logo: the mark becomes a window onto the new page and grows until it fills the screen */
.hs-pt.is-zoom{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20848%201536%22%3E%3Cpath%20d%3D%22M521%20930%20330%20930%20330%201354%200%201354%200%201536%20521%201536ZM0%200%200%201280%20189%201280%20189%20862%20656%20862%20656%201536%20848%201536%20848%20237%20656%20237%20656%20677%20189%20677%20189%200ZM848%200%20330%200%20330%20603%20521%20603%20521%20180%20848%20180Z%22/%3E%3C/svg%3E"),linear-gradient(#000,#000);mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20848%201536%22%3E%3Cpath%20d%3D%22M521%20930%20330%20930%20330%201354%200%201354%200%201536%20521%201536ZM0%200%200%201280%20189%201280%20189%20862%20656%20862%20656%201536%20848%201536%20848%20237%20656%20237%20656%20677%20189%20677%20189%200ZM848%200%20330%200%20330%20603%20521%20603%20521%20180%20848%20180Z%22/%3E%3C/svg%3E"),linear-gradient(#000,#000);-webkit-mask-position:center,0 0;mask-position:center,0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto 4.2rem,100% 100%;mask-size:auto 4.2rem,100% 100%;-webkit-mask-composite:xor;mask-composite:exclude;animation:hsZoom .65s cubic-bezier(.65,0,.25,1) forwards}
.hs-pt.is-zoom > *{visibility:hidden}
@keyframes hsZoom{0%{-webkit-mask-size:auto 4.2rem,100% 100%;mask-size:auto 4.2rem,100% 100%}100%{-webkit-mask-size:auto 4000vh,100% 100%;mask-size:auto 4000vh,100% 100%}}
@media (prefers-reduced-motion:reduce){.hs-pt,.hs-pt svg{transition:none}.hs-pt.is-on svg path{animation:none}.hs-pt.is-zoom{animation-duration:.01s}}

/* Hasan's animated logo (from his logo animation) plays in the splash */
.hs-pt__logo{position:absolute;width:8.83rem;height:10.03rem;left:calc(50% - 4.32rem);top:calc(50% - 4.31rem);background:url("../img/splash-logo.webp") 100% 0/1700% 100% no-repeat}
.hs-pt__logo.is-play{animation:hsSprite .5s steps(16) both}
@keyframes hsSprite{from{background-position:0 0}to{background-position:100% 0}}
html.dark .hs-pt__logo{filter:invert(1)}
.hs-pt.is-zoom{-webkit-mask-size:auto 8rem,100% 100%;mask-size:auto 8rem,100% 100%}
@keyframes hsZoom{0%{-webkit-mask-size:auto 8rem,100% 100%;mask-size:auto 8rem,100% 100%}100%{-webkit-mask-size:auto 4000vh,100% 100%;mask-size:auto 4000vh,100% 100%}}
@media (prefers-reduced-motion:reduce){.hs-pt__logo.is-play{animation:none}}

/* Header logo: Hasan's logo animation, looping like the GIF (the still mark is kept for reduced motion) */
.hs-mark__anim{display:block;width:3.021rem;height:2.541rem;margin:-.032rem -.845rem -.109rem;background:url("../img/header-logo.webp") 0 0/8800% 100% no-repeat;animation:hsHeadLogo 5.28s steps(87) infinite}
@media (min-width:640px){.hs-mark__anim{width:3.776rem;height:3.176rem;margin:-.04rem -1.056rem -.136rem}}
@keyframes hsHeadLogo{from{background-position:0 0}to{background-position:100% 0}}
html.dark .hs-mark__anim{filter:invert(1)}
.hs-mark .hs-mark__anim + svg{display:none}
@media (max-width:480px){.hs-mark__anim{width:2.518rem;height:2.118rem;margin:-.027rem -.704rem -.091rem}}
@media (prefers-reduced-motion:reduce){.hs-mark__anim{display:none}.hs-mark .hs-mark__anim + svg{display:block}}

/* Phone: header centred in one row, the logo next to the menu */
@media (max-width: 640px) {
  .hs-header { justify-content: center; gap: .4rem; }
  .hs-header > div:last-child { margin-inline-start: 0 !important; }
  .hs-header > div:first-child { margin-inline-end: 1.1rem; }
  #hero { padding-top: 5.5rem; min-height: auto; justify-content: flex-start; }
  #hero > div.my-auto { margin-top: 0; margin-bottom: 0; padding-top: .5rem; padding-bottom: .5rem; }
  #heroCardsStage { margin-top: .75rem; margin-bottom: .75rem; }
  #lastwork, #about { padding-top: 6.5rem; }
}

/* ---- About page: CV sections and contact card ---- */
.hs-ab-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:3.5rem}
@media (min-width:768px){.hs-ab-grid{grid-template-columns:1.25fr 1fr}}
.hs-ab-col{display:grid;gap:1.5rem;align-content:start}
.hs-ab-card{border-radius:1.5rem;padding:1.6rem 1.7rem;text-align:start;min-width:0}
@media (min-width:640px){.hs-ab-card{padding:2rem 2.2rem}}
.hs-ab-h{font-family:"Oswald","IBM Plex Sans Arabic",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#71717a;margin:0 0 1.1rem}
.hs-ab-item+.hs-ab-item{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(0,0,0,.08)}
html.dark .hs-ab-item+.hs-ab-item{border-color:rgba(255,255,255,.1)}
.hs-ab-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.hs-ab-row+.hs-ab-row{margin-top:.6rem}
.hs-ab-role{font-size:1.05rem;font-weight:700}
.hs-ab-when{font-family:ui-monospace,Menlo,monospace;font-size:.75rem;color:#71717a;white-space:nowrap}
.hs-ab-org{font-size:.9rem;color:#52525b;margin-top:.2rem}
html.dark .hs-ab-org{color:#a1a1aa}
.hs-ab-pts{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.4rem}
.hs-ab-pts li{position:relative;padding-inline-start:1.1rem;font-size:.92rem;font-weight:500}
.hs-ab-pts li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:.4rem;height:.4rem;border-radius:50%;background:linear-gradient(135deg,#b4ec74,#2d82fe)}
.hs-ab-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.hs-ab-chip{padding:.45rem .85rem;border-radius:99px;font-size:.8rem;font-weight:600;background:rgba(0,0,0,.05)}
html.dark .hs-ab-chip{background:rgba(255,255,255,.08)}
.hs-ab-contact{margin-top:1.5rem;border-radius:1.5rem;padding:1.8rem 1.7rem;text-align:start}
@media (min-width:640px){.hs-ab-contact{padding:2.2rem 2.4rem}}
.hs-ab-cgrid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media (min-width:768px){.hs-ab-cgrid{grid-template-columns:repeat(2,1fr)}}
.hs-ab-cbox{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.hs-ab-cbox a,.hs-ab-handle{font-size:.92rem;font-weight:600;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.hs-ab-cbox a:hover{text-decoration:underline}
body.is-rtl .hs-ab-cbox a[dir="ltr"],body.is-rtl .hs-ab-handle{text-align:right}
.hs-ab-lbl{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#71717a}
.hs-ab-icons{display:flex;gap:.5rem;margin-top:.3rem}
.hs-ab-icons a{width:2.3rem;height:2.3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.06);transition:transform .2s}
.hs-ab-icons a:hover{transform:scale(1.1);text-decoration:none}
html.dark .hs-ab-icons a{background:rgba(255,255,255,.1)}
.hs-ab-cta{display:inline-block;margin-top:1.6rem;padding:.95rem 2rem;border-radius:99px;background:#121214;color:#fff;font-family:"Oswald","IBM Plex Sans Arabic",sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:transform .2s}
.hs-ab-cta:hover{transform:scale(1.04)}
html.dark .hs-ab-cta{background:#fff;color:#121214}

/* Arabic: letters must stay joined, so no letter-spacing anywhere in Arabic mode, and always IBM Plex Sans Arabic */
body.is-rtl *:not([dir="ltr"]):not([dir="ltr"] *):not(.font-mono):not(code) { letter-spacing: 0 !important; }
body.is-rtl .t-ar, .t-ar { letter-spacing: 0 !important; }
body.is-rtl .hs-ab-h, body.is-rtl .hs-ab-lbl, body.is-rtl .hs-ab-cta { font-family: 'IBM Plex Sans Arabic', sans-serif !important; font-size: .9rem; text-transform: none; }
body.is-rtl .hs-ab-lbl { font-size: .8rem; }

/* About page: each block and its lines come in one after another while scrolling */
html.hs-js .hs-ab-anim{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--hs-d,0ms)}
html.hs-js .hs-ab-anim.hs-in{opacity:1;transform:none}
html.hs-js .hs-ab-anim :is(.hs-ab-h,.hs-ab-item,.hs-ab-row,.hs-ab-org,.hs-ab-pts li,.hs-ab-chip,.hs-ab-cbox,.hs-ab-cta){opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 70ms + 180ms)}
html.hs-js .hs-ab-anim.hs-in :is(.hs-ab-h,.hs-ab-item,.hs-ab-row,.hs-ab-org,.hs-ab-pts li,.hs-ab-chip,.hs-ab-cbox,.hs-ab-cta){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.hs-js .hs-ab-anim,html.hs-js .hs-ab-anim *{opacity:1!important;transform:none!important;transition:none!important}}
/* footer logo under the copyright line */
.hs-foot-mark{display:block;margin:1.1rem auto 0;color:#121214;opacity:.85;transition:opacity .25s,transform .25s}
.hs-foot-mark svg{display:block;height:2.6rem;width:auto}
.hs-foot-mark:hover{opacity:1;transform:scale(1.06)}
html.dark .hs-foot-mark{color:#fff}
/* first paint: only the front hero card shows until the wheel script takes over (no flash of the wrong card) */
html.hs-js #heroCardsStage:not(.is-ready) .spencer-fanned-card:not(#fannedCard1){opacity:0}
/* project popup scrolls by finger on phones (the smooth-scroll script leaves it alone) */
#galleryModalBox{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}

/* More Works card: a moving wall of the Last Work pieces, columns going up and down */
.hs-seemore__shot{position:absolute;inset:-12% -14%;z-index:-2;contain:strict;display:flex;gap:.5rem;padding:0 .5rem;background:#16161a;transform:rotate(-8deg);overflow:hidden}
.hs-wall__col{flex:1;min-width:0;overflow:hidden}
.hs-wall__track{display:flex;flex-direction:column;animation:hsWallUp 34s linear infinite;animation-play-state:paused;will-change:transform}
/* the wall only moves while the card is on screen and the page is not being scrolled (keeps scrolling smooth) */
.hs-seemore.is-live:not(.is-scrolling) .hs-wall__track{animation-play-state:running}
.hs-wall__col:nth-child(2) .hs-wall__track{animation-name:hsWallDown;animation-duration:28s}
.hs-wall__col:nth-child(3) .hs-wall__track{animation-duration:40s}
.hs-wall__track img{display:block;width:100%;height:auto}
@keyframes hsWallUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes hsWallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.hs-seemore__dim{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 70% at 50% 52%,rgba(10,10,14,.7),rgba(10,10,14,.3) 72%),linear-gradient(180deg,rgba(10,10,14,.1),rgba(10,10,14,.5))}
.hs-seemore .font-headline{text-shadow:0 4px 24px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.hs-wall__track{animation:none}}