/* The "Our work" page, built as a pinned poster.
   One idea: every site starts from the same blank page, then becomes somebody else. The page stays availo
   (white, ink, green) and each sample takes over the whole screen in its own colours while its name tears
   at the seam between its computer and phone views. Then the one system behind all five, the visitor's own
   name in those colours, and one word that opens the playground. */

.wk-page { --hdr: 72px; --stage: calc(100svh - var(--hdr)); --m: var(--gutter); background: var(--white); color: var(--ink); }
.wk-page main { overflow-x: clip; }
.wk-page .site-header.is-solid { box-shadow: none; }
/* this page runs full width, so the header lines up with its edges instead of the centred column */
.wk-page .site-header .wrap { width: auto; margin-inline: var(--m); }

/* ------------------------------------------------------------------ hero
   The title and what this is on one side; the five sites on the other, as five phones playing side by side,
   each with its name, so the page says "five" before a word is read. */
.wk-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 4vw, 80px); min-height: max(600px, var(--stage)); padding: 32px var(--m) 48px; }
.wk-hero h1 { margin: 0 0 28px; font-weight: 900; font-stretch: 112%; font-size: clamp(64px, 8.4vw, 168px); line-height: .86; letter-spacing: -.045em; }
.wk-hero-copy p { margin: 0 0 32px; max-width: 34ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.45; }
.wk-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.wk-textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 750; font-stretch: 94%; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-underline-offset .2s var(--ease-out); }
.wk-textlink:hover { text-underline-offset: 8px; }
.wk-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 22px); align-items: start; margin: 0; padding: 0; list-style: none; }
.wk-shelf li:nth-child(even) { margin-top: clamp(32px, 7svh, 72px); }
.wk-shelf a { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.wk-shelf figure { margin: 0 0 10px; aspect-ratio: 390 / 844; border-radius: 12px; overflow: hidden; background: #07090a; outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px; transition: translate .3s var(--ease-out); }
.wk-shelf video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wk-shelf b { font-weight: 800; font-size: 1.125rem; font-stretch: 100%; line-height: 1.1; }
.wk-shelf span { font-size: .9375rem; line-height: 1.3; color: var(--muted); }
.wk-shelf a:hover figure, .wk-shelf a:focus-visible figure { translate: 0 -8px; }
.wk-shelf a:focus-visible { outline: none; }
.wk-shelf a:focus-visible figure { outline: 3px solid var(--brand-ink); outline-offset: 3px; }

/* ------------------------------------------------------------------ the five
   Each sample: a wrapper 1.6 screens tall holding a stage that sticks for 0.6 of a screen. Left half its
   computer view, right half its phone view and what makes it different; its name on the seam, set twice
   and clipped to each half, so the halves can travel apart and meet when the stage is centred. */
.wk-five { position: relative; }
.wk-five-head { position: absolute; z-index: 3; inset-block-start: 28px; inset-inline-start: var(--m); margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.05; font-stretch: 100%; color: var(--white); }
.wk-p { --f1: #07090a; --f2: #111517; --t: #f3f6f5; --x: #8fe9ff; --on-x: #07090a; --ink: var(--t); position: relative; height: calc(var(--stage) * 1.6); color: var(--t); }
.wk-p[data-p="noor"] { --f1: #0B1C19; --f2: #12302B; --t: #F5EFE4; --x: #E2BA66; --on-x: #0B1C19; --title: #E2BA66; }
.wk-p[data-p="halo"] { --f1: #FBF8F5; --f2: #F2DCD3; --t: #2A2230; --x: #5E4A73; --on-x: #FBF8F5; --title: #5E4A73; }
.wk-p[data-p="sideb"] { --f1: #111012; --f2: #1C1B1F; --t: #F1EFE9; --x: #8FE3C6; --on-x: #111012; --title: #8FE3C6; }
.wk-p[data-p="rally"] { --f1: #071A2E; --f2: #0C2642; --t: #F4F8FF; --x: #D7F25C; --on-x: #071A2E; --title: #D7F25C; }
.wk-stage { position: sticky; top: var(--hdr); height: var(--stage); min-height: 560px; overflow: hidden; }
.wk-pane { position: absolute; inset-block: 0; width: 50%; display: flex; align-items: flex-start; padding-top: max(96px, 12svh); }
.wk-pane-a { inset-inline-start: 0; background: var(--f1); justify-content: flex-end; }
.wk-pane-b { inset-inline-end: 0; background: var(--f2); justify-content: flex-start; gap: clamp(24px, 3vw, 48px); padding-inline-end: var(--m); }
.wk-frame { --ph: calc(var(--stage) * .5); position: relative; margin: 0; overflow: hidden; background: #000; will-change: transform; }
.wk-frame video, .wk-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wk-desk { width: min(640px, 43vw, calc(var(--ph) * 1.6)); aspect-ratio: 16 / 10; }
.wk-phone { height: var(--ph); aspect-ratio: 390 / 844; flex: none; }
.wk-about { max-width: 34ch; padding-top: 4px; will-change: transform; }
.wk-what { margin: 0 0 18px; font-size: 1.0625rem; line-height: 1.5; }
.wk-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-weight: 750; font-stretch: 94%; color: var(--x); }
.wk-name { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: max(28px, 4.5svh); display: grid; justify-items: center; gap: 14px; text-align: center; }
.wk-title { position: relative; margin: 0; font-weight: 900; font-stretch: 118%; font-size: clamp(88px, 11vw, 168px); line-height: .8; letter-spacing: -.04em; text-transform: uppercase; color: var(--title, var(--t)); white-space: nowrap; }
.wk-t { display: block; will-change: transform; }
.wk-t-a { clip-path: inset(-10% 50% -10% -10%); }
.wk-t-b { position: absolute; inset: 0; clip-path: inset(-10% -10% -10% 50%); }
.wk-kind { margin: 0; font-size: 1rem; font-weight: 700; }
.wk-go { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--x); color: var(--on-x); font-weight: 800; font-stretch: 94%; text-decoration: none; transition: translate .2s var(--ease-out), background-color .2s; }
.wk-go:hover, .wk-go:focus-visible { translate: 0 -2px; background: var(--t); color: var(--f1); }
.wk-go:focus-visible { outline: 3px solid var(--x); outline-offset: 3px; }

/* ------------------------------------------------------------------ the system behind them
   Four cards from the owner's dashboard cross a plain grey screen as the page scrolls. */
.wk-sys { position: relative; height: calc(var(--stage) * 2.6); background: var(--mist); color: var(--ink); }
.wk-sys-stage { position: sticky; top: var(--hdr); height: var(--stage); min-height: 600px; overflow: hidden; }
.wk-sys-head { position: absolute; z-index: 1; inset-block-start: max(48px, 7svh); inset-inline: var(--m); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.wk-sys-head h2 { max-width: 13ch; margin: 0; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.25rem); line-height: .98; letter-spacing: -.03em; font-stretch: 108%; }
.wk-sys-head p { margin: 0; font-size: 1.125rem; line-height: 1.5; max-width: 36ch; }
.wk-track { position: absolute; z-index: 2; inset-block: 0; inset-inline-start: 0; display: flex; align-items: flex-end; gap: 40px; padding-inline-start: 100vw; padding-block-end: max(40px, 6svh); will-change: transform; margin: 0; list-style: none; }
.wk-card { flex: none; width: clamp(320px, min(44vw, (var(--stage) - 420px) * 1.9), 600px); display: grid; grid-template-rows: auto auto; background: var(--white); color: var(--ink); }
.wk-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 631; object-fit: cover; object-position: top left; }
.wk-card div { display: grid; gap: 8px; padding: 22px 26px 24px; }
.wk-card:nth-child(1) div { background: var(--brand); }
.wk-card:nth-child(2) div { background: var(--brand-tint); }
.wk-card:nth-child(3) div { background: #F6DA6E; }
.wk-card:nth-child(4) div { background: #DCE9F5; }
.wk-card h3 { margin: 0; font-size: 1.75rem; line-height: 1; letter-spacing: -.02em; }
.wk-card p { margin: 0; font-size: 1rem; line-height: 1.45; }

/* ------------------------------------------------------------------ yours
   The live thing: the playground's phone on this page. Controls on one side, the phone held beside them. */
.wk-yours { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: start; padding: clamp(96px, 11vw, 168px) var(--m); }
.wk-yours h2 { margin: 0 0 18px; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.25rem); line-height: .98; letter-spacing: -.03em; font-stretch: 108%; }
.wk-yours-lead { margin: 0 0 40px; font-size: 1.125rem; line-height: 1.5; max-width: 44ch; }
.wk-controls { display: grid; gap: 28px; max-width: 620px; }
.wk-controls .field { margin: 0; }
.wk-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wk-swatch { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .12); transition: translate .2s var(--ease-out); }
.wk-swatch:hover { translate: 0 -2px; }
.wk-swatch[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 3px; }
.wk-swatch:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 3px; }
.wk-colors .color-pick { margin-inline-start: 6px; }
.wk-phone-stage { position: sticky; top: calc(var(--hdr) + 32px); display: grid; justify-items: center; gap: 16px; text-align: center; }
.wk-phone-stage .phone { --pw: 312px; }
.wk-hint { margin: 4px 0 0; max-width: 34ch; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.wk-cta { margin: 8px 0 0; max-width: 36ch; font-size: 1rem; line-height: 1.45; }
.wk-cta .wk-textlink { min-height: 40px; }

/* ------------------------------------------------------------------ footer: the name first */
.wk-foot { padding: clamp(56px, 7vw, 96px) var(--m) 28px; background: var(--ink); color: var(--white); }
.wk-foot-mark { margin: 0; font-weight: 800; font-size: 25vw; line-height: .8; letter-spacing: -.02em; }
.wk-foot-mark .logo-dot { background: var(--brand); }
.wk-foot-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr); margin-top: 72px; }
.wk-places { grid-column: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.wk-places a { color: var(--brand); text-decoration: none; }
.wk-places a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.wk-links { grid-column: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; align-content: start; }
.wk-links a { display: inline-flex; min-height: 32px; align-items: center; color: var(--white); font-size: 1rem; text-decoration: none; }
.wk-links a:hover { color: var(--brand); }
.wk-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 96px; font-size: .875rem; color: var(--muted-on-ink); }
.wk-legal p { margin: 0; max-width: 80ch; }
.wk-legal a { color: inherit; }

/* ------------------------------------------------------------------ entrances */
.js .wk-rise { opacity: 0; translate: 0 24px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .wk-rise.is-in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------------ tablet and phone: no pins */
@media (max-width: 900px) {
  /* hero: the title and sentence, then the five phones as a strip you swipe */
  .wk-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; min-height: 0; padding: 24px var(--m) 40px; }
  .wk-hero h1 { font-size: 17vw; margin-bottom: 22px; }
  .wk-hero-copy p { margin-bottom: 24px; }
  .wk-shelf { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--m)); padding: 0 var(--m) 8px; scroll-padding-inline: var(--m); scrollbar-width: none; }
  .wk-shelf::-webkit-scrollbar { display: none; }
  .wk-shelf li { flex: 0 0 clamp(136px, 38vw, 200px); scroll-snap-align: start; }
  .wk-shelf li:nth-child(even) { margin-top: 0; }

  .wk-five-head { position: static; padding: 56px var(--m) 24px; color: var(--ink); }
  .wk-p { height: auto; }
  .wk-stage { position: relative; top: 0; height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--f1); padding: 40px var(--m) 48px; gap: 24px; }
  .wk-pane { position: static; width: auto; padding: 0; background: none; display: contents; }
  .wk-name { position: static; order: 1; justify-items: start; text-align: start; gap: 12px; }
  .wk-title { font-size: 16vw; }
  .wk-t-a { clip-path: none; }
  .wk-t-b { display: none; }
  .wk-desk { order: 2; width: 100%; }
  .wk-phone-row { order: 3; }
  .wk-pane-b { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; order: 3; align-items: start; }
  .wk-phone { height: auto; width: 100%; }
  .wk-about { max-width: none; }

  .wk-sys { height: auto; padding: 0 0 56px; }
  .wk-sys-stage { position: static; height: auto; min-height: 0; overflow: visible; }
  .wk-sys-head { position: static; display: block; padding: 56px var(--m) 32px; }
  .wk-sys-head h2 { margin-block-end: 20px; }
  .wk-track { position: static; display: grid; gap: 24px; padding: 0 var(--m); transform: none !important; }
  .wk-card { width: 100%; }
  .wk-card div { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px; }

  .wk-yours { grid-template-columns: minmax(0, 1fr); padding-block: 80px 64px; }
  .wk-phone-stage { position: static; }
  /* phones: the heading, then the phone, then the controls */
  .wk-yours-copy { display: contents; }
  .wk-yours h2, .wk-yours-lead { order: -2; margin-block-end: 0; }
  .wk-phone-stage { order: -1; }
  .wk-yours { gap: 24px; }
  .wk-controls { margin-block-start: 24px; }
  .wk-foot-row { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; }
  .wk-places { font-size: 1.625rem; }
  .wk-links { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-legal { margin-top: 56px; }
}
@media (max-width: 520px) {
  .wk-pane-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .wk-t, .wk-frame, .wk-about, .wk-sys-head { transform: none !important; }
  .js .wk-rise { opacity: 1; translate: 0 0; transition: none; }
  .wk-go, .wk-shelf figure, .wk-swatch, .wk-textlink { transition: none; }
}

/* Arabic: the display face for the big words */
html[lang="ar"] .wk-hero h1, html[lang="ar"] .wk-title, html[lang="ar"] .wk-sys-head h2, html[lang="ar"] .wk-yours h2, html[lang="ar"] .wk-card h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; font-stretch: 100%; }
html[lang="ar"] .wk-hero h1 { line-height: 1.05; }
/* the five keep their own Latin names, set like the English page */
html[lang="ar"] .wk-title[lang="en"] { font-family: "Anybody", sans-serif; font-weight: 900; font-stretch: 118%; letter-spacing: -.04em; line-height: .8; }
html[lang="ar"] .wk-foot-mark, html[lang="ar"] [lang="en"] { font-family: "Anybody", sans-serif; }
html[lang="ar"] .wk-sys-head h2, html[lang="ar"] .wk-yours h2 { line-height: 1.2; }