/* ================================================================
   Home page: the service cards are a gallery that opens with the work
   ================================================================ */

/* ---------- Service cards: a gallery that opens with the work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.wk { position: relative; grid-column: span 12; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card, 22px); background: #111215; border: 1px solid rgba(255,255,255,.09); transition: border-color .3s var(--ease); }
.wk-lg { grid-column: span 7; }
.wk-sm { grid-column: span 5; }
.wk-full { grid-column: span 12; }
.wk-media { order: -1; position: relative; flex: none; height: clamp(250px, 29vw, 370px); overflow: hidden; display: flex; flex-direction: column; background: #0b0c0f; }
.wk-media img { flex: 1 1 0; min-height: 0; width: 100%; display: block; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .9s var(--ease); }
.wk-media img.wk-crop { flex: none; height: calc((100% - 34px) * 1.14); } /* hides the white strip at the bottom of the Marsa capture */
.wk-copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 28px 20px; }
.wk-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; width: 100%; margin-bottom: 14px; }
.wk-num { font-family: var(--display); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: #a7adb8; }
.wk-tag { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding-block: 5px; padding-inline: 9px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-size: 12.5px; font-weight: 500; line-height: 1.25; color: #d5d8de; }
.wk-tag .ico { flex: none; width: 14px; height: 14px; }
.wk h3 { margin: 0 0 10px; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
html[data-lang="ar"] .wk h3 { letter-spacing: 0; line-height: 1.3; }
.wk p { margin: 0; max-width: 56ch; font-size: 16.5px; line-height: 1.55; color: #c2c7d0; }
.wk .text-link { margin-top: auto; padding-top: 14px; }
.wk .text-link::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.wk .text-link:focus-visible { outline: none; }
.wk .text-link:focus-visible::after { outline: 2px solid currentColor; outline-offset: -4px; }
.wk.is-blue { background: #1a1c21; }
.wk-full .wk-media { height: clamp(190px, 21vw, 270px); }
@media (min-width: 901px) {
  .wk-full .wk-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; column-gap: 48px; align-items: start; }
  .wk-full .wk-meta { grid-column: 1; grid-row: 1; }
  .wk-full h3 { grid-column: 1; grid-row: 2; margin: 0; }
  .wk-full p { grid-column: 2; grid-row: 1 / span 2; }
  .wk-full .text-link { grid-column: 3; grid-row: 1 / span 2; align-self: end; margin: 0; padding: 0; }
}
@media (hover: hover) {
  .wk:hover { border-color: rgba(255,255,255,.26); }
  .wk:hover .wk-media img { transform: scale(1.03); }
  .wk:hover .text-link span { background-size: 100% 1.5px; }
  .wk:hover .text-link .ico { transform: translateX(4px); }
  html[dir="rtl"] .wk:hover .text-link .ico { transform: scaleX(-1) translateX(4px); }
}
@media (max-width: 900px) {
  .wk-lg, .wk-sm { grid-column: span 12; }
  .wk-pair { grid-column: span 6; }
  .wk-media { height: clamp(220px, 42vw, 340px); }
  .wk-pair .wk-media { height: clamp(190px, 30vw, 260px); }
  .wk-full .wk-media { height: clamp(180px, 30vw, 260px); }
  .wk-copy { padding: 20px 22px 16px; }
}
@media (max-width: 640px) {
  .work-grid { gap: 14px; }
  .wk-pair { grid-column: span 12; }
  .wk-media, .wk-pair .wk-media, .wk-full .wk-media { height: auto; aspect-ratio: 16/10.5; }
  .wk-copy { padding: 18px 18px 12px; }
  .wk p { font-size: 16px; }
}

/* in light mode the cards stay dark, navy with one blue */
html:not(#_):not(#_)[data-mode="light"] .wk { background: linear-gradient(160deg, #101a36 0%, #0a1022 100%); border-color: rgba(148,163,184,.18); box-shadow: 0 30px 60px -44px rgba(30,58,138,.8); }
html:not(#_):not(#_)[data-mode="light"] .wk.is-blue { background: #1d4ed8; border-color: #1d4ed8; }
html:not(#_):not(#_)[data-mode="light"] .wk h3 { color: #fff; }
html:not(#_):not(#_)[data-mode="light"] .wk p { color: #b9c3d6; }
html:not(#_):not(#_)[data-mode="light"] .wk .wk-num { color: #93c5fd; }
html:not(#_):not(#_)[data-mode="light"] .wk .wk-tag { color: #d6def0; border-color: rgba(148,163,184,.34); }
html:not(#_):not(#_)[data-mode="light"] .wk .text-link, html:not(#_):not(#_)[data-mode="light"] .wk .text-link span { color: #93c5fd; }
html:not(#_):not(#_)[data-mode="light"] .wk.is-blue p { color: rgba(255,255,255,.9); }
html:not(#_):not(#_)[data-mode="light"] .wk.is-blue .wk-num, html:not(#_):not(#_)[data-mode="light"] .wk.is-blue .text-link, html:not(#_):not(#_)[data-mode="light"] .wk.is-blue .text-link span { color: #fff; }
html:not(#_):not(#_)[data-mode="light"] .wk.is-blue .wk-tag { color: #fff; border-color: rgba(255,255,255,.5); }
html:not(#_):not(#_)[data-mode="light"] .wk:hover { border-color: rgba(147,197,253,.5); }
html:not(#_):not(#_)[data-mode="light"] .wk .cb-bar { background: #18202f; }
html:not(#_):not(#_)[data-mode="light"] .wk .cb-bar > span { background: rgba(255,255,255,.28); }
html:not(#_):not(#_)[data-mode="light"] .wk .cb-url { background: rgba(255,255,255,.08); color: #c7d0e0; }

/* the card and its parts are moved on every scroll frame */
.wk { will-change: transform, opacity; }
.wk-media img { will-change: transform, scale, translate; }

/* the cards swing in from the sides: keep that from widening the page */
#services { overflow-x: clip; }

/* ---------- Hero: one focal point, the emblem with one light behind it ---------- */
#top .hero-fx .hero-light, #top .hero-fx .hero-fx-dots { display: none; }
html:not(#_):not(#_):not(#_)[data-mode="light"] #top.light-top { background: linear-gradient(160deg, #071330 0%, #0a1c52 55%, #060f28 100%); }
html:not(#_):not(#_):not(#_)[data-mode="light"] #top.light-top .hero-art::before { inset: -22%; background: radial-gradient(closest-side, rgba(84,146,255,.58), rgba(84,146,255,.14) 58%, transparent 76%); }
html:not(#_):not(#_):not(#_):not([data-mode="light"]) #top.light-top .hero-art::before { inset: -22%; background: radial-gradient(closest-side, rgba(226,231,240,.24), rgba(226,231,240,.06) 58%, transparent 76%); }

/* an aurora: wide soft bands of colour drifting across the panel */
#top .hero-flow { position: absolute; border-radius: 50%; will-change: transform; animation: 18s ease-in-out infinite alternate; }
#top .hero-flow.f1 { left: -22vmax; top: -18vmax; width: 88vmax; height: 40vmax; rotate: -18deg; background: radial-gradient(closest-side, rgba(37,99,235,.8), rgba(37,99,235,.28) 55%, transparent 74%); animation-name: heroFlowA; animation-duration: 15s; animation-delay: -4s; }
#top .hero-flow.f2 { right: -24vmax; bottom: -20vmax; width: 84vmax; height: 38vmax; rotate: 14deg; background: radial-gradient(closest-side, rgba(34,211,238,.48), rgba(34,211,238,.14) 55%, transparent 74%); animation-name: heroFlowB; animation-duration: 19s; animation-delay: -9s; }
#top .hero-flow.f3 { left: 26%; top: -14vmax; width: 62vmax; height: 34vmax; rotate: 28deg; background: radial-gradient(closest-side, rgba(124,92,255,.56), rgba(124,92,255,.16) 55%, transparent 74%); animation-name: heroFlowC; animation-duration: 23s; animation-delay: -13s; }
html:not([data-mode="light"]) #top .hero-flow.f1 { background: radial-gradient(closest-side, rgba(226,231,240,.2), rgba(226,231,240,.06) 55%, transparent 74%); }
html:not([data-mode="light"]) #top .hero-flow.f2 { background: radial-gradient(closest-side, rgba(170,176,188,.2), rgba(170,176,188,.05) 55%, transparent 74%); }
html:not([data-mode="light"]) #top .hero-flow.f3 { background: radial-gradient(closest-side, rgba(255,255,255,.13), rgba(255,255,255,.03) 55%, transparent 74%); }
@keyframes heroFlowA { from { transform: translate3d(-8vw, -6vh, 0) scale(.92); } to { transform: translate3d(42vw, 26vh, 0) scale(1.22); } }
@keyframes heroFlowB { from { transform: translate3d(10vw, 8vh, 0) scale(1.1); } to { transform: translate3d(-46vw, -30vh, 0) scale(.9); } }
@keyframes heroFlowC { from { transform: translate3d(-34vw, -4vh, 0) scale(.95); } to { transform: translate3d(22vw, 44vh, 0) scale(1.25); } }
html.is-scrolling #top .hero-flow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { #top .hero-flow.f1, #top .hero-flow.f2, #top .hero-flow.f3 { animation: none; } }

/* flowing silk in the home hero; the aurora bands remain only as the fallback without WebGL */
.hero-silk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#top .hero-fx.has-silk .hero-flow { display: none; }

/* a sheen crosses each service card once as it lands */
.wk-sheen { position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transform: translate3d(-130%, 0, 0) skewX(-16deg); }
.wk.is-landed .wk-sheen { animation: wkSheen 1.15s cubic-bezier(.3,.1,.3,1) both; }
@keyframes wkSheen { 0% { opacity: 1; transform: translate3d(-130%, 0, 0) skewX(-16deg); } 100% { opacity: 1; transform: translate3d(330%, 0, 0) skewX(-16deg); } }
html[dir="rtl"] .wk-sheen { display: none; }

/* the hero emblem: a shield on a glass tile, a glass diamond behind it, and lit arcs in orbit */
.hero-emblem {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  --tile-a: rgba(30,34,42,.92); --tile-b: rgba(6,8,12,.97); --back-a: rgba(255,255,255,.1); --back-b: rgba(255,255,255,.015);
  --edge-a: rgba(255,255,255,.34); --edge-c: rgba(255,255,255,.05); --edge-b: rgba(255,255,255,.2);
  --rim-a: rgba(255,255,255,.95); --rim-c: rgba(255,255,255,.2); --rim-b: rgba(255,255,255,.8);
  --gloss-a: rgba(255,255,255,.34); --gloss-b: rgba(255,255,255,.02);
  --metal-a: #f4f6f9; --metal-b: #aeb3bc; --metal-c: #e4e7ec; --line: rgba(255,255,255,.13); --light: #ffffff;
}
html[data-mode="light"] .hero-emblem {
  --tile-a: rgba(28,66,178,.9); --tile-b: rgba(5,14,50,.97); --back-a: rgba(170,205,255,.2); --back-b: rgba(120,165,255,.03);
  --edge-a: rgba(205,226,255,.5); --edge-c: rgba(205,226,255,.08); --edge-b: rgba(205,226,255,.3);
  --gloss-a: rgba(205,226,255,.36); --metal-a: #ffffff; --metal-b: #b4d0ff; --metal-c: #e9f2ff; --line: rgba(205,226,255,.2);
}
.he-tile-a { stop-color: var(--tile-a); } .he-tile-b { stop-color: var(--tile-b); }
.he-back-a { stop-color: var(--back-a); } .he-back-b { stop-color: var(--back-b); }
.he-edge-a { stop-color: var(--edge-a); } .he-edge-b { stop-color: var(--edge-b); } .he-edge-c { stop-color: var(--edge-c); }
.he-rim-a { stop-color: var(--rim-a); } .he-rim-b { stop-color: var(--rim-b); } .he-rim-c { stop-color: var(--rim-c); }
.he-gloss-a { stop-color: var(--gloss-a); } .he-gloss-b { stop-color: var(--gloss-b); }
.he-metal-a { stop-color: var(--metal-a); } .he-metal-b { stop-color: var(--metal-b); } .he-metal-c { stop-color: var(--metal-c); }
.he-arc-0 { stop-color: var(--light); stop-opacity: 0; } .he-arc-1 { stop-color: var(--light); stop-opacity: 1; }
.he-spark-a { stop-color: var(--light); stop-opacity: .6; } .he-spark-b { stop-color: var(--light); stop-opacity: 0; }

.he-orbit-line { stroke: var(--line); stroke-width: 1; }
.he-arc { stroke-width: 2; stroke-linecap: round; }
.he-arc-glow { stroke-width: 7; stroke-linecap: round; opacity: .2; }
.he-tile-shadow { fill: rgba(0,0,0,.42); }
.he-inner-rim { stroke: rgba(255,255,255,.09); }
.he-trace { stroke: var(--light); stroke-dasharray: 7 93; animation: heTrace 7s linear infinite; }
.he-glint { fill: rgba(255,255,255,.2); }

/* motion: every part is moved around the emblem's own centre */
.he-orbit, .he-rock { transform-origin: 200px 200px; }
.he-orbit.cw { animation: heSpin 16s linear infinite; }
.he-orbit.ccw { animation: heSpin 23s linear infinite reverse; }
.he-rock { animation: heRock 9s ease-in-out infinite alternate; }
.he-float { animation: heFloat 5s ease-in-out infinite alternate; }
.he-glint { animation: heGlint 5.5s cubic-bezier(.5,0,.25,1) infinite; }
.he-spark.pulse { animation: hePulse 3.6s ease-in-out infinite alternate; }
.he-spark.pulse.late { animation-delay: -1.8s; }
.he-layer { transition: translate .5s cubic-bezier(.2,.7,.2,1); }
.he-layer.back { translate: calc(var(--px, 0) * -11px) calc(var(--py, 0) * -11px); }
.he-layer.front { translate: calc(var(--px, 0) * 9px) calc(var(--py, 0) * 9px); }
@keyframes heSpin { to { transform: rotate(360deg); } }
@keyframes heRock { from { transform: rotate(-9deg) scale(.98); } to { transform: rotate(9deg) scale(1.03); } }
@keyframes heFloat { from { transform: translateY(5px); } to { transform: translateY(-7px); } }
@keyframes heGlint { 0%, 45% { transform: translateX(0) skewX(-24deg); } 100% { transform: translateX(340px) skewX(-24deg); } }
@keyframes heTrace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hePulse { from { opacity: .25; } to { opacity: 1; } }
/* the emblem keeps moving while the page scrolls, and rests once the hero is off screen */
html.is-scrolling #top .float-chip, html.is-scrolling #top .hero-art::before { animation-play-state: running !important; }
#top.is-away :is(.he-orbit, .he-rock, .he-float, .he-glint, .he-spark, .he-trace, .float-chip, .hero-edge) { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .he-orbit.cw, .he-orbit.ccw, .he-rock, .he-float, .he-glint, .he-trace, .he-spark.pulse { animation: none; }
  .he-glint, .he-trace { opacity: 0; }
}

/* the labels sit clear of the shield */
#top .chip-a { top: 1%; left: -7%; right: auto; bottom: auto; }
#top .chip-b { top: auto; bottom: 17%; right: -9%; left: auto; }
#top .chip-c { top: auto; bottom: -3%; left: -3%; right: auto; }
/* on narrower screens the labels sit in a row under the emblem, so they can never cover it */
@media (max-width: 1200px) {
  #top .hero-art { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 8px; aspect-ratio: auto; }
  #top .hero-emblem { position: relative; inset: auto; flex: 0 0 100%; height: auto; aspect-ratio: 1; }
  #top .float-chip { position: static; animation: none; translate: none !important; transform: none !important; }
}

/* a focused link is always fully visible, wherever its card has got to */
.wk .text-link:focus-visible > * { opacity: 1 !important; }

/* the scroll animation never leaves cards hidden on paper */
@media print {
  .wk, .wk-meta, .wk h3, .wk p, .wk .text-link > *, .wk-media, .wk-media img {
    opacity: 1 !important; transform: none !important; clip-path: none !important; scale: none !important; translate: none !important;
  }
}

/* a light travels along the hero's bottom edge, where it meets the honeycomb */
.hero-edge {
  position: absolute; left: 0; bottom: 0; width: 34%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  box-shadow: 0 -6px 20px rgba(255,255,255,.3);
  animation: heroEdge 4.2s cubic-bezier(.45,0,.55,1) infinite;
}
html[data-mode="light"] .hero-edge { background: linear-gradient(90deg, transparent, #bcd7ff, transparent); box-shadow: 0 -6px 20px rgba(140,190,255,.55); }
@keyframes heroEdge { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .hero-edge { animation: none; opacity: 0; } }

/* a light runs once round a card's border as it lands, and a glare follows the cursor */
@property --wkAngle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.wk-trace {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--wkAngle), transparent 0 68%, rgba(255,255,255,.25) 82%, #fff 99%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.wk.is-landed .wk-trace { animation: wkTrace 1.6s cubic-bezier(.4,.1,.3,1) both; }
@keyframes wkTrace { 0% { --wkAngle: 0deg; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { --wkAngle: 360deg; opacity: 0; } }
.wk-glare { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; border-radius: inherit; transition: opacity .35s; background: radial-gradient(440px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.17), transparent 62%); }
@media (hover: hover) { .wk:hover .wk-glare { opacity: 1; } }
@media print { .wk-glare, .wk-trace, .wk-sheen { display: none !important; } }

/* the pinned card rail: the scroll carries the cards sideways through a held screen */
.wk-pin.is-rail { position: relative; }
.wk-pin.is-rail .wk-stage {
  position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: clip; padding-top: 70px;
  margin-inline: calc(50% - 50vw); width: 100vw; perspective: 1600px;
}
.wk-pin.is-rail .work-grid {
  position: relative; display: flex; width: max-content; gap: 34px; align-items: stretch; height: min(calc(100vh - 150px), 660px);
  padding-inline: calc(50vw - min(23vw, 320px)); will-change: transform;
}
.wk-pin.is-rail .wk, .wk-pin.is-rail .wk-lg, .wk-pin.is-rail .wk-sm, .wk-pin.is-rail .wk-pair, .wk-pin.is-rail .wk-full {
  flex: none; width: min(46vw, 640px); height: 100%; grid-column: auto; transform-origin: 50% 50% !important;
}
.wk-pin.is-rail .wk-media, .wk-pin.is-rail .wk-pair .wk-media, .wk-pin.is-rail .wk-full .wk-media { flex: 1 1 0; height: auto; min-height: 0; aspect-ratio: auto; }
.wk-pin.is-rail .wk-copy { flex: none; display: flex; padding: 20px 26px 16px; }
.wk-pin.is-rail .wk-full .wk-copy { display: flex; flex-direction: column; align-items: flex-start; }
.wk-pin.is-rail .wk-full h3 { margin: 0 0 10px; }
.wk-pin.is-rail .wk-full .text-link { margin-top: auto; padding-top: 14px; align-self: flex-start; }
.wk-pin.is-rail .wk p { font-size: 15.5px; line-height: 1.5; }
.wk-rail-bar { display: none; }
.wk-pin.is-rail .wk-rail-bar {
  display: block; position: absolute; left: 50%; bottom: 20px; width: 180px; height: 2px; margin-left: -90px; border-radius: 2px;
  background: currentColor; opacity: .55; transform-origin: 0 50%; transform: scaleX(0);
}
@media print {
  .wk-pin.is-rail { height: auto !important; }
  .wk-pin.is-rail .wk-stage { position: static; height: auto; margin: 0; width: auto; }
  .wk-pin.is-rail .work-grid { flex-wrap: wrap; width: auto; height: auto; padding: 0; transform: none !important; }
  .wk-rail-bar { display: none !important; }
}

/* inside the rail the cards move constantly, so the costly one-off effects stay out */
.wk-pin.is-rail .wk-trace { display: none; }
.wk-pin.is-rail .wk-media img { transition: none; }