/* Donalep, option A ("Split"). One stylesheet for every page; the body class picks the world:
   .p-home (black, paper About), .p-ai (navy, neural layers), .p-creative and .p-case (warm dark).
   Everything lines up on .wrap: the header, every section and the footer share the same left and right edge.
   Media is never cropped to a new shape: 16:9 stays 16:9, 9:16 stays 9:16, images keep their own ratio. */
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans.ttf') format('truetype'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('/fonts/cormorant.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('/fonts/cormorant-italic.ttf') format('truetype'); font-style: italic; font-weight: 300 700; font-display: swap; }

:root { --ink: #f2efe9; --bg: #050505; --ai: #060b14; --ai-2: #0b1424; --ai-ink: #dce7f5; --ai-acc: #7fd6ff; --cr: #0e0907; --cr-2: #1a120d; --cr-ink: #f5ece1; --cr-acc: #ff6a3d;
        --paper: #eeeae3; --ease: cubic-bezier(.7,0,.2,1); --mono: ui-monospace, 'SF Mono', Menlo, monospace; --nav-h: 72px; --gutter: max(20px, calc((100vw - 1240px) / 2)); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; font-family: 'DM Sans', system-ui, sans-serif; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--ink); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
main { padding-top: var(--nav-h); }
.p-home main { padding-top: 0; }
.sec { padding: clamp(72px, 10vw, 128px) 0; }
.sec.tight { padding-top: 0; }
.eyebrow { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.eyebrow.gap { margin-bottom: 32px; }
.note { font-size: 13px; opacity: .65; margin-top: 20px; max-width: 64ch; }
.lead { font-size: clamp(17px, 1.4vw, 20px); max-width: 48ch; }
.num { font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }
.js [data-reveal] { opacity: 0; transition: opacity .8s ease; }
.js [data-reveal].in { opacity: 1; }
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Header: a solid black strip that stays visible, with the donalep.com logo */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); background: #000; border-bottom: 1px solid #ffffff17; color: #fff; transition: opacity .6s; }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav .logo { display: block; }
.nav .logo img { height: 40px; width: auto; }
.nav nav { display: flex; align-items: center; gap: 2px; margin-right: -14px; }
.nav nav a, .nav nav button { text-decoration: none; font-size: 14px; padding: 8px 14px; border-radius: 99px; background: none; border: 0; transition: background .3s, color .3s; white-space: nowrap; }
.nav nav a:hover, .nav nav button:hover { background: rgba(255,255,255,.12); }
.nav nav a[aria-current="page"] { background: #fff; color: #000; }
.nav .lang, .nav .motion { opacity: .75; }
.nav .motion { font-size: 13px; }
.nav .burger { display: none; background: none; border: 1px solid #ffffff40; border-radius: 99px; padding: 8px 16px; font-size: 14px; }
.intro-on .nav { opacity: 0; pointer-events: none; }
.nav .langs { position: relative; }
.nav .langs summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; font-size: 14px; padding: 8px 14px; border-radius: 99px; opacity: .75; transition: background .3s, opacity .3s; }
.nav .langs summary::-webkit-details-marker { display: none; }
.nav .langs summary::after { content: ''; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.nav .langs summary:hover, .nav .langs[open] summary { background: rgba(255,255,255,.12); opacity: 1; }
.nav .langs ul { position: absolute; top: calc(100% + 12px); inset-inline-end: 0; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: #0d0d0d; border: 1px solid #ffffff24; border-radius: 14px; box-shadow: 0 18px 40px #0009; }
.nav .langs ul a { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 9px; font-size: 14px; }
.nav .langs ul a b { width: 22px; font-size: 11px; font-weight: 500; letter-spacing: .08em; opacity: .55; }
.nav .langs ul a[aria-current] { background: #fff; color: #000; }
@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  .nav .logo img { height: 34px; }
  .nav .burger { display: block; position: relative; z-index: 2; }
  .nav nav { position: fixed; inset: var(--nav-h) 0 0; margin: 0; flex-direction: column; justify-content: center; gap: 10px; background: #000; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .nav nav a, .nav nav button { font-size: 24px; }
  body.menu-open .nav nav { opacity: 1; visibility: visible; }
  .nav .langs { display: flex; flex-direction: column; align-items: center; }
  .nav .langs summary { font-size: 24px; }
  .nav .langs ul { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 340px; min-width: 0; margin-top: 8px; background: none; border: 0; box-shadow: none; }
  .nav .langs ul a { font-size: 16px; padding: 8px 12px; border-radius: 99px; }
  .nav .langs ul a b { display: none; }
}

/* Home hero: the original logo animation, then the split into two worlds */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: flex; }
.panel { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; overflow: hidden; isolation: isolate; transition: flex-grow .9s var(--ease); }
.panel.to-ai { background: var(--ai); color: var(--ai-ink); }
.panel.to-creative { background: var(--cr); color: var(--cr-ink); }
.panel canvas { position: absolute; inset: 0 0 34%; width: 100%; height: 66%; z-index: -1; }
.to-ai::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, var(--ai) 72%); pointer-events: none; }
.panel-body { padding: 0 48px clamp(56px, 9vh, 96px); }
.to-ai .panel-body { padding-inline-start: var(--gutter); }
.to-creative .panel-body { padding-inline-end: var(--gutter); }  /* outer edges, mirrored in Arabic */
.js .panel-body, .js .reel { opacity: 0; transition: opacity 1s .2s; }
.js .hero.split .panel-body, .js .hero.split .reel { opacity: 1; transition-delay: var(--panel-delay, 1.1s); }
.panel-body .idx { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.panel-body h2 { --h2: clamp(34px, 3.9vw, 60px); font-size: var(--h2); line-height: 1.04; height: calc(var(--h2) * 2.1); font-weight: 500; letter-spacing: -.025em; margin: 16px 0 18px; max-width: 13ch; display: flex; align-items: flex-end; }
.to-creative h2 { font-family: 'Cormorant', serif; font-style: italic; letter-spacing: -.01em; font-size: calc(var(--h2) * 1.13); line-height: .92; }
.panel-body p { font-size: 16px; opacity: .85; max-width: 40ch; min-height: 3em; }
.enter { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 15px; padding: 14px 22px; border-radius: 99px; border: 1px solid currentColor; transition: background .3s, color .3s, border-color .3s; }
.to-ai:hover .enter, .to-ai:focus-visible .enter { background: var(--ai-acc); color: var(--ai); border-color: var(--ai-acc); }
.to-creative:hover .enter, .to-creative:focus-visible .enter { background: var(--cr-acc); color: #160a05; border-color: var(--cr-acc); }
.hero.go-ai .to-ai, .hero.go-creative .to-creative { flex-grow: 30 !important; }
.hero.go-ai .panel-body, .hero.go-creative .panel-body { opacity: 0 !important; transition: opacity .3s !important; }
.reel { display: flex; gap: 14px; padding: calc(var(--nav-h) + 32px) var(--gutter) 0 48px; margin-bottom: auto; }
.reel-item { flex: 1 1 0; min-width: 0; max-width: min(210px, calc((40vh) * 9 / 16)); }
.reel video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 8px; background: var(--cr-2); }

.intro { position: absolute; inset: 0; z-index: 5; }
.no-js .intro, .no-js .skip-intro, .hero.done .intro, .hero.done .skip-intro { display: none; }
.intro i { position: absolute; top: 0; bottom: 0; width: 50.2%; background: #000; transition: transform 1s var(--ease) .35s; }
.intro i.l { left: 0; } .intro i.r { right: 0; }
.intro video { position: absolute; left: 50%; top: 50%; width: min(1100px, 100vw); transform: translate(-50%, -50%); transition: opacity .5s, transform .6s var(--ease); }
.hero.split .intro video { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
.hero.split .intro i.l { transform: translateX(-101%); }
.hero.split .intro i.r { transform: translateX(101%); }
.skip-intro { position: absolute; right: var(--gutter); bottom: 24px; z-index: 6; background: none; border: 1px solid #ffffff40; color: #fff; border-radius: 99px; padding: 8px 16px; font-size: 13px; }
.hero.split .skip-intro { display: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 10px 16px; border-radius: 99px; background: #000a; white-space: nowrap; }
.js .scroll-cue { opacity: 0; transition: opacity .8s var(--panel-delay, 1.6s); }
.js .hero.split .scroll-cue { opacity: 1; }
@media (max-width: 960px) {
  .hero { flex-direction: column; height: auto; min-height: 100svh; }
  .panel { flex: 1 0 auto; min-height: 50svh; }
  .panel-body, .to-ai .panel-body, .to-creative .panel-body { padding: 0 20px 36px; }
  .to-ai .panel-body { padding-top: calc(var(--nav-h) + 40px); }
  .to-creative .panel-body { padding-bottom: 72px; }
  .panel-body h2, .to-creative h2 { --h2: clamp(30px, 8vw, 42px); height: auto; margin: 10px 0 10px; }
  .panel-body p { font-size: 15px; min-height: 0; }
  .enter { margin-top: 16px; padding: 11px 18px; }
  .reel { padding: 32px 20px 20px; gap: 10px; }
  .reel-item { max-width: 130px; }
}

/* Home: About on paper, Contact on black */
.about-sec { background: var(--paper); color: #141210; --acc: #141210; --on-acc: var(--paper); }
.about-sec .eyebrow, .contact-sec .eyebrow { margin-bottom: 40px; }
.contact-sec { --acc: var(--ink); --on-acc: #000; }
.about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.about figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 97% 40%; border-radius: 6px; }
.about figcaption { font-size: 13px; opacity: .65; margin-top: 10px; }
.about h2 { font-size: clamp(36px, 4.6vw, 68px); line-height: 1.04; font-weight: 500; letter-spacing: -.03em; margin-bottom: 24px; }
.about blockquote { margin: 32px 0; font-family: 'Cormorant', serif; font-size: clamp(24px, 2.4vw, 34px); font-style: italic; line-height: 1.2; max-width: 30ch; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.facts dt { font-size: 24px; font-weight: 500; }
.facts dd { font-size: 14px; opacity: .75; }
.clients-label { margin: clamp(56px, 7vw, 88px) 0 20px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about figure img { aspect-ratio: 1; } }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.contact h2 { font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; margin-bottom: 24px; }
.channels { margin-top: 32px; display: grid; gap: 10px; font-size: 20px; justify-items: start; }
.channels a { text-decoration: none; border-bottom: 1px solid #ffffff4d; }
.channels a:hover { border-color: currentColor; }
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 6px; font-size: 13px; letter-spacing: .04em; }
.form input:not([type=radio]), .form textarea { font: inherit; font-size: 16px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid #ffffff59; padding: 10px 0; resize: vertical; border-radius: 0; }
.form input:focus, .form textarea:focus { outline: none; border-color: currentColor; }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.form legend { font-size: 13px; margin-bottom: 8px; }
.form fieldset label { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #ffffff4d; border-radius: 99px; cursor: pointer; }
.form fieldset label:has(:checked) { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.form fieldset input { margin: 0; accent-color: #000; }
.form button { justify-self: start; padding: 16px 28px; border-radius: 99px; border: 0; font-size: 15px; background: var(--acc); color: var(--on-acc); }
.form button[disabled] { opacity: .6; }
.form .status { font-size: 14px; min-height: 1.5em; }
.form .trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* off-screen without a left offset, which would scroll in RTL */
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.foot { padding: 32px 0; font-size: 13px; border-top: 1px solid #ffffff1f; }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; opacity: .7; }
.foot a { text-decoration: none; }

/* Client logos: each on its own brand colour, never redrawn as text */
.clients { display: grid; grid-template-columns: repeat(11, 1fr); gap: 10px; }
@media (max-width: 1100px) { .clients { grid-template-columns: repeat(6, 1fr); } }
.clients.small { grid-template-columns: repeat(6, 1fr); }
.clients img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 6px; background: #fff; }
@media (max-width: 700px) { .clients, .clients.small { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* World hero, shared shape */
.w-hero { position: relative; overflow: hidden; isolation: isolate; }
.ai-hero { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: flex-end; }
.ai-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.w-hero .wrap { padding: clamp(56px, 9vh, 96px) 0; }
.w-hero h1 { font-size: clamp(44px, 7.4vw, 120px); line-height: 1; font-weight: 500; letter-spacing: -.035em; }
.w-hero h1 .ln { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; }
.js .w-hero h1 .ln > span { display: block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * .1s + .2s); }
.w-hero .lead { margin-top: 28px; }
.js .w-hero .lead { opacity: 0; animation: fade 1s .9s forwards; }
.w-hero .eyebrow { margin-bottom: 24px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; min-height: calc(86svh - var(--nav-h)); }
.split-hero h1 { font-size: clamp(42px, 5.6vw, 92px); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; min-height: 0; } }

.sec-head { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; margin-bottom: clamp(36px, 5vw, 64px); align-items: end; }
.sec-head h2 { font-size: clamp(32px, 4.2vw, 62px); line-height: 1.05; font-weight: 500; letter-spacing: -.03em; padding-bottom: .08em; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; gap: 14px; } }

/* Media frames keep the source ratio */
.frame { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--cr-2); }
.frame.v { aspect-ratio: 9 / 16; }
.frame > img, .frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.montage video { opacity: 0; transition: opacity 1.2s; }
.montage video.on { opacity: 1; }
.case-hero.is-tall .frame { width: min(100%, calc((86svh - var(--nav-h) - 48px) * 9 / 16)); justify-self: center; }

.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.chips li { padding: 22px; border: 1px solid #ffffff1f; border-radius: 12px; }
.chips svg { width: 28px; height: 28px; fill: none; stroke: var(--ai-acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.chips h3 { font-size: 18px; font-weight: 500; margin: 0 0 6px; }
.chips .num { display: block; margin-bottom: 18px; }
.chips p { font-size: 14px; opacity: .75; }
@media (max-width: 1000px) { .chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .chips { grid-template-columns: 1fr; } }

.switch { border-top: 1px solid #ffffff1f; }
.switch-in { display: grid; grid-template-columns: 1fr 1fr; }
.switch a { padding: clamp(40px, 6vw, 72px) 0; text-decoration: none; font-size: clamp(24px, 3vw, 44px); line-height: 1.1; }
.switch a + a { border-left: 1px solid #ffffff1f; padding-left: clamp(20px, 4vw, 48px); }
.switch a:hover { opacity: .8; }
.switch span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; opacity: .65; margin-bottom: 12px; }
@media (max-width: 700px) { .switch-in { grid-template-columns: 1fr; } .switch a + a { border-left: 0; border-top: 1px solid #ffffff1f; padding-left: 0; } }

/* AI world */
.p-ai { background: var(--ai); color: var(--ai-ink); }
.p-ai .eyebrow, .p-ai .num { font-family: var(--mono); color: var(--ai-acc); opacity: 1; }
.ai-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, var(--ai)); }
.systems { display: grid; gap: 20px; }
.system { display: grid; gap: clamp(20px, 3vw, 32px); padding: clamp(24px, 3vw, 40px); background: var(--ai-2); border: 1px solid #ffffff12; border-radius: 16px; }
.system-copy { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.system h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.02em; margin: 10px 0 8px; }
.system-copy p { opacity: .8; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-self: end; }
.steps li { display: grid; gap: 6px; align-content: start; font-size: 14px; line-height: 1.4; padding-top: 12px; opacity: .4; border-top: 2px solid #ffffff1a; transition: opacity .4s, color .4s, border-color .4s; }
.steps li span { font-family: var(--mono); font-size: 11px; }
.steps li.on { opacity: 1; color: #fff; border-color: var(--ai-acc); }
.steps li.on span { color: var(--ai-acc); }
.no-js .steps li { opacity: .85; }
.system-stage { border-top: 1px solid #ffffff10; padding-top: clamp(16px, 2vw, 28px); }
@media (max-width: 900px) { .system-copy { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: 0; } .steps li { grid-template-columns: 30px 1fr; padding: 8px 0; border-top-width: 1px; } }
.diagram { width: 100%; height: auto; overflow: visible; }
.diagram.m { display: none; }
@media (max-width: 760px) { .diagram.d { display: none; } .diagram.m { display: block; max-width: 420px; margin: 0 auto; } }
.diagram .edge { fill: none; stroke: #ffffff26; stroke-width: 1.5; stroke-dasharray: 4 5; transition: stroke .5s; }
.diagram .edge.lit { stroke: #7fd6ff99; stroke-dasharray: none; }
.diagram .packets circle { fill: var(--ai-acc); filter: drop-shadow(0 0 6px #7fd6ff); }
.diagram .node rect { fill: #0c1729; stroke: #ffffff2e; stroke-width: 1.2; transition: fill .5s, stroke .5s; }
.diagram .node .l { fill: #e8f1fb; font: 500 15px 'DM Sans', sans-serif; }
.diagram .node .s { fill: #9fb3c8; font: 400 12px 'DM Sans', sans-serif; }
.diagram .node { opacity: .7; transition: opacity .5s; }
.diagram .node.on { opacity: 1; }
.diagram .node.on rect { stroke: var(--ai-acc); fill: #0f2340; }
.diagram .k-agent.on rect { fill: #10305a; }
.diagram .k-tile rect { fill: #13233a; }
.diagram .k-tile .l { font-size: 14px; }
.diagram .k-tile .s { font: 600 14px var(--mono); fill: var(--ai-acc); }
.diagram .late { opacity: 0; transition: opacity .5s; }
.diagram .late.on { opacity: 1; }
.diagram .node.hit rect { stroke: #fff; stroke-width: 2.2; fill: #164a7a; }
.diagram .k-answer.on rect { fill: #0f2d4d; }
.diagram .spin { fill: none; stroke: var(--ai-acc); stroke-width: 2; stroke-dasharray: 30 20; transform-box: fill-box; transform-origin: center; opacity: 0; }
.diagram .k-agent.on .spin { opacity: 1; animation: spin 1.4s linear infinite; }
.diagram .tick { opacity: 0; transition: opacity .4s; }
.diagram .tick circle { fill: #3ddc97; }
.diagram .tick path { fill: none; stroke: #062014; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.diagram .node.done .tick { opacity: 1; }
.no-js .diagram .node, .still-done .diagram .node { opacity: 1; }
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product { display: flex; flex-direction: column; gap: 14px; padding: 32px; text-decoration: none; border-radius: 16px; background: var(--ai-2); border: 1px solid #ffffff12; transition: border-color .3s; }
.product:hover { border-color: #7fd6ff66; }
.product img { width: auto; height: auto; max-height: 44px; max-width: 100%; align-self: flex-start; margin-bottom: 10px; }
.product .status { align-self: flex-start; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ai-acc); border: 1px solid #7fd6ff55; border-radius: 99px; padding: 4px 10px; }
.product p { font-size: 15px; opacity: .85; }
.product .arrow { margin-top: auto; font-size: 14px; padding-top: 10px; }
@media (max-width: 900px) { .products { grid-template-columns: 1fr; } }
.p-ai .switch, .p-ai .switch a + a, .p-ai .foot { border-color: #ffffff14; }

/* Creative world and case pages */
.p-creative, .p-case { background: var(--cr); color: var(--cr-ink); }
.p-creative h1, .p-creative .sec-head h2, .p-case h1, .p-case .sec-head h2 { font-family: 'Cormorant', serif; font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.p-creative .eyebrow, .p-case .eyebrow { color: var(--cr-acc); opacity: 1; }
.p-creative .chips li, .p-case .chips li { border-color: #ffffff1c; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stats strong { display: block; font-family: 'Cormorant', serif; font-size: clamp(48px, 6vw, 88px); line-height: 1; font-weight: 500; color: var(--cr-acc); }
.stats span { display: block; margin-top: 12px; font-size: 14px; opacity: .8; max-width: 24ch; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.tabs button { padding: 11px 18px; border-radius: 99px; border: 1px solid #ffffff33; background: none; font-size: 14px; transition: background .3s, color .3s, border-color .3s; }
.tabs button:hover { border-color: #ffffff80; }
.tabs button[aria-selected="true"] { background: var(--cr-acc); border-color: var(--cr-acc); color: #160a05; }
.no-js .tabs { display: none; }
.cat + .cat { margin-top: 72px; }
.js .cat + .cat { margin-top: 0; }
.cat-head { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: baseline; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid #ffffff1c; }
.cat-head h3 { font-family: 'Cormorant', serif; font-style: italic; font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; }
.cat-head p { opacity: .8; }
.sub-title { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin: 8px 0 18px; font-weight: 500; }
.sub-title + .verticals + .sub-title { margin-top: 56px; }
@media (max-width: 860px) { .cat-head { grid-template-columns: 1fr; gap: 6px; } }

.rows { display: grid; gap: 20px; }
.row { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 56px); align-items: center; text-decoration: none; padding-bottom: 20px; border-bottom: 1px solid #ffffff14; }
.row-copy { display: grid; gap: 10px; align-content: center; }
.case-meta { display: flex; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.case-name { font-family: 'Cormorant', serif; font-style: italic; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; }
.case-hook { font-size: 15px; opacity: .8; }
.case-hook em { font-style: normal; }
.more { font-size: 14px; color: var(--cr-acc); margin-top: 6px; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; gap: 16px; } }

.masonry { columns: 3 260px; column-gap: 18px; }
.masonry.four { columns: 4 200px; }
.masonry figure { break-inside: avoid; margin-bottom: 22px; }
.masonry img { width: 100%; border-radius: 6px; background: var(--cr-2); }
.masonry figcaption, .verticals figcaption, .tall figcaption { font-size: 13px; opacity: .8; margin-top: 8px; display: grid; }
.masonry figcaption b, .tall b { font-weight: 500; font-size: 15px; opacity: 1; }
.media { position: relative; display: block; }
.media > img { width: 100%; border-radius: 6px; }
.verticals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.verticals .media > img { aspect-ratio: 9 / 16; object-fit: cover; }
.talls { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 20px; }
.tall { display: grid; gap: 6px; text-decoration: none; align-content: start; }
.tall > span:last-child { font-size: 13px; opacity: .8; }
.tall .frame { margin-bottom: 6px; }
@media (max-width: 700px) { .talls { grid-template-columns: repeat(2, 1fr); } .masonry, .masonry.four { columns: 2; column-gap: 10px; } .verticals { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

.play { position: absolute; inset: 0; display: grid; place-items: center; background: none; border: 0; padding: 0; }
.play::before { content: ''; width: 60px; height: 60px; border-radius: 50%; background: rgba(0,0,0,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/24px no-repeat; transition: background-color .3s; }
.play:hover::before { background-color: var(--cr-acc); }
.media > video { width: 100%; height: auto; border-radius: 6px; background: #000; }
.frame.media > video { position: absolute; inset: 0; height: 100%; object-fit: contain; }

/* Case page */
.case-hero .case-name { display: block; margin: 14px 0 10px; }
.p-case .w-hero h1 { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.04; max-width: 16ch; padding-bottom: .06em; }
.p-case .w-hero h1 em { color: var(--cr-acc); }
.back { display: inline-flex; gap: 10px; font-size: 14px; text-decoration: none; margin-bottom: 28px; opacity: .85; }
.back:hover { opacity: 1; }
.case-intro { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.case-intro .body p + p { margin-top: 18px; }
.case-intro .body p { font-size: clamp(17px, 1.4vw, 20px); }
.case-intro strong { color: var(--cr-acc); font-weight: 500; }
.context { border-left: 2px solid var(--cr-acc); padding: 4px 0 4px 20px; font-size: 15px; }
.context b { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cr-acc); margin-bottom: 6px; font-weight: 500; }
@media (max-width: 860px) { .case-intro { grid-template-columns: 1fr; } }
.feature video { width: auto; max-width: 100%; max-height: 82vh; margin-inline: auto; border-radius: 8px; background: #000; }
.gallery-title { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-bottom: 18px; font-weight: 500; }
.text-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.text-pair h2 { font-family: 'Cormorant', serif; font-weight: 500; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; margin-bottom: 20px; }
.text-pair h2 em { color: var(--cr-acc); }
.text-pair p + p { margin-top: 14px; }
.text-pair li { padding: 10px 0; border-top: 1px solid #ffffff1c; }
@media (max-width: 860px) { .text-pair { grid-template-columns: 1fr; } }
.next-case { display: block; border-top: 1px solid #ffffff1c; text-decoration: none; }
.next-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(40px, 6vw, 72px) 0; }
.next-case .lbl { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; opacity: .65; margin-bottom: 10px; }
.next-case strong { font-family: 'Cormorant', serif; font-style: italic; font-weight: 500; font-size: clamp(34px, 4.6vw, 66px); line-height: 1.05; }
.next-case .arr { font-size: 34px; }
.next-case:hover strong { color: var(--cr-acc); }
.p-creative .switch, .p-creative .switch a + a, .p-case .switch, .p-case .switch a + a { border-color: #ffffff1c; }

/* Plain pages: privacy, 404 */
.p-plain { background: var(--bg); }
.notfound { min-height: 70vh; }
.prose { max-width: 70ch; }
.prose h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; margin: 16px 0 24px; }
.prose h2 { font-size: 24px; font-weight: 500; margin: 40px 0 10px; }
.prose p + p { margin-top: 12px; }
.prose a { text-underline-offset: 3px; }
.choices-404 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.choices-404 a { padding: 14px 22px; border-radius: 99px; border: 1px solid #ffffff4d; text-decoration: none; }
.choices-404 a:hover { background: #fff; color: #000; }

/* Curtain: covers the cut between pages */
.curtain { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.curtain i { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--c, #050505); transition: transform .7s var(--ease); }
.curtain i:first-child { left: 0; transform: translateX(-101%); }
.curtain i:last-child { right: 0; transform: translateX(101%); }
.curtain.closed i { transform: none; }
.curtain-in .curtain i { transform: none !important; transition: none; }

/* Motion off: by system setting or the header switch */
.still-motion *, .still-motion *::before, .still-motion *::after { animation-play-state: paused !important; }
.still-motion [data-reveal] { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .js [data-reveal] { opacity: 1; }
}

/* Arabic: right to left. Letter spacing breaks joined Arabic letters, and the display serif has no Arabic,
   so headings fall back to the system Arabic face set upright. Latin brand names keep DM Sans. */
[dir="rtl"] body { font-family: 'DM Sans', 'SF Arabic', 'Geeza Pro', 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif; line-height: 1.7; }
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] .to-creative h2, [dir="rtl"] .about blockquote, [dir="rtl"] .p-creative h1, [dir="rtl"] .p-creative .sec-head h2, [dir="rtl"] .p-case h1, [dir="rtl"] .p-case .sec-head h2,
[dir="rtl"] .p-case h2, [dir="rtl"] .case-name { font-family: 'SF Arabic', 'Geeza Pro', 'Segoe UI', 'Noto Naskh Arabic', serif; font-style: normal; }
[dir="rtl"] .to-creative h2 { line-height: 1.15; }
[dir="rtl"] .nav nav { margin-right: 0; margin-left: -14px; }
[dir="rtl"] .stats strong { direction: ltr; unicode-bidi: isolate; text-align: right; }  /* keeps +170% and £48M in their written order */
[dir="rtl"] .skip-intro { right: auto; left: var(--gutter); }
[dir="rtl"] .switch a + a { border-left: 0; border-right: 1px solid #ffffff1f; padding-left: 0; padding-right: clamp(20px, 4vw, 48px); }
[dir="rtl"] .context { border-left: 0; border-right: 2px solid var(--cr-acc); padding: 4px 20px 4px 0; }
[dir="rtl"] .diagram .node .l, [dir="rtl"] .diagram .node .s { font-family: 'DM Sans', 'SF Arabic', 'Geeza Pro', 'Segoe UI', 'Noto Sans Arabic', sans-serif; }
@media (max-width: 700px) { [dir="rtl"] .switch a + a { border-right: 0; padding-right: 0; } }