/* Site branding — white, midnight, blue and orange for everything shared across pages
   (header, footer, labels, tags, strips, shared sections). Project colours (--a1…--a5)
   picked from each product are left alone. Loaded last on every page. */
:root {
  --brand-white: #ffffff; --brand-ink: #0b0e1a; --brand-blue: #3150f5; --brand-orange: #ff4b0d;
  --paper: #ffffff; --ink: #0b0e1a; --night: #0b0e1a; --grey: #3a3c48; --mute: #6c6e7a; --line: rgba(11,14,26,.14);
  --star: #ff4b0d; --star-deep: #ff4b0d; --orange: #ff4b0d; --blue: #3150f5;
}
body { background: #fff; color: var(--ink); }
::selection { background: var(--brand-blue); color: #fff; }

/* header: plain on the page, a white bar once you scroll (and on dark-topped pages) */
.nav { pointer-events: auto; transition: background .35s, box-shadow .35s, padding .35s; }
.logo, .nav nav { background: none !important; box-shadow: none; border: 0; }
.logo { color: var(--ink); }
.nav nav a { color: var(--ink); }
.nav nav a:hover, .nav nav a.is-active { color: var(--brand-blue); background: none; }
.nav.is-scrolled, .ct-page .nav, body:has(.fold) .nav { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 1px 0 rgba(11,14,26,.08); }
.nav.is-scrolled { padding-top: 8px; padding-bottom: 8px; }

/* footer */
.footer { background: var(--brand-ink) !important; color: #fff !important; }
.footer__hello h2 em { color: var(--brand-orange); }
.footer a:hover { color: var(--brand-orange); }
.footer__cols { border-top-color: rgba(255,255,255,.18); }
.footer__mail button { border-color: rgba(255,255,255,.5); color: #fff; }
.footer__mail button.is-copied { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.footer__base { color: rgba(255,255,255,.55); }
.footer__base .wordmark { color: #fff; }

/* shared bits */
.tags { color: var(--brand-blue); }
.list__top h2 .icon, .pager .label .icon { color: var(--brand-orange); }
.pager a:hover { background: var(--brand-ink); color: #fff; }
.h-strip { background: var(--brand-ink); color: #fff; }
.h-strip .icon { color: var(--brand-orange); }
.h-strip a:hover { color: var(--brand-orange); }

/* homepage */
.pills span { color: #fff; }
.pills span[style*="#ffffff"] { color: var(--brand-ink); box-shadow: inset 0 0 0 1px rgba(11,14,26,.2); }
.soon { background: rgba(255,255,255,.94); color: var(--brand-ink); }
.h-play { background: var(--brand-blue); color: #fff; }
.h-play .label { color: rgba(255,255,255,.7); }
.h-play p { color: rgba(255,255,255,.85); }
.h-play h2 .arr { color: var(--brand-orange); }

/* about */
.hB h1 { color: var(--brand-orange); }
.hB__strip { background: var(--brand-ink); }
.awards { background: var(--brand-blue); color: #fff; }
.awards .list__top { border-color: rgba(255,255,255,.4); }
.awards .list__top h2 .icon { color: var(--brand-orange); }
.awards .label { color: rgba(255,255,255,.7); }
.aw { background: #fff; color: var(--brand-ink); }
.aw__org, .aw__more:hover { color: var(--brand-blue); }
.aw--ink { background: var(--brand-ink); color: #fff; }
.aw--ink .aw__org { color: var(--brand-orange); }
.list--dark { background: var(--brand-ink); }

/* contact */
.ct-page { background: var(--brand-ink); }
.ct-label, .ct-cv { color: var(--brand-orange); }
.ct-btn--fill { background: var(--brand-orange); color: #fff; }
.ct-btn--fill:hover { background: var(--brand-blue); color: #fff; }
.ct-btn--line.is-copied { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
a.ct-val:hover { color: var(--brand-orange); }

/* lightbox buttons, award badge, misc */
.badge__n { color: var(--brand-ink); }

/* ── hover cursor: a plain brand-orange circle ── */
:root { --zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23ff4b0d'/%3E%3C/svg%3E") 20 20, zoom-in !important; }
.cursor { width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--brand-orange); color: #fff; font: 500 13px/1 var(--display);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .2s; will-change: transform; }
.cursor svg { display: none; }

/* ── header: same type on every page ── */
body .nav nav { font-family: var(--sans); font-size: 15px; font-weight: 400; gap: 2px; }
body .nav nav a { font-size: 15px !important; padding: 7px 13px; }
body .nav .logo { width: 38px; height: 38px; }

/* ── footer: dark card, details on top, giant wordmark below ── */
.footer { background: transparent !important; color: #fff !important; padding: 0 12px 12px !important; display: block !important; }
.ft { background: var(--brand-ink); border-radius: 18px; padding: clamp(28px, 3.4vw, 48px) clamp(22px, 3vw, 44px) 0; overflow: hidden; }
.ft__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px 40px; }
.ft__kick { font-family: var(--display); font-weight: 500; font-size: 16px; margin-bottom: 18px; }
.ft .footer__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ft .footer__mail a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-size: 14px; color: rgba(255,255,255,.85); border-bottom-width: 1px; }
.ft .footer__mail button { height: 40px; padding: 0 16px; border-radius: 8px; border: 0; background: var(--brand-orange); color: #fff; font: 500 13px var(--display); cursor: pointer; }
.ft .footer__mail button.is-copied { background: var(--brand-blue); }
.ft__social { display: flex; gap: 10px; margin-top: 18px; }
.ft__social a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font: 600 12px var(--display); color: #fff; }
.ft__social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ft__social a:hover { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.ft__col { display: grid; align-content: start; justify-items: start; text-align: left; gap: 12px; font-size: 14px; color: rgba(255,255,255,.75); }
.ft__col h3 { font-family: var(--display); font-weight: 600; font-size: 15px; color: #fff; margin-bottom: 6px; }
.ft__col a:hover { color: var(--brand-orange); }
.ft__mark { display: block; width: max-content; margin: clamp(30px, 5vw, 70px) auto 0; font-family: var(--display); font-weight: 500; font-size: 18vw; line-height: 1; letter-spacing: -.055em; color: #fff; white-space: nowrap; padding-bottom: .05em; }
.ft__mark:hover { color: var(--brand-orange); }
@media (max-width: 860px) {
  .ft__top { grid-template-columns: 1fr 1fr; }
  .ft__hello { grid-column: 1 / -1; }
}
.cursor, .cursor.is-on { transform: none; translate: var(--cx, -200px) var(--cy, -200px); transition: scale .3s cubic-bezier(.22, 1, .36, 1); }
.cursor { scale: 0; }
.cursor.is-on { scale: 1; }

/* about: section headings without the small numbered labels */
.list__top--big { border-bottom: 0; align-items: flex-end; }
.sec-head { font-family: var(--display) !important; font-weight: 600 !important; font-size: clamp(38px, 5vw, 80px) !important; line-height: .9; letter-spacing: -.05em !important; text-transform: none !important; }

/* case studies: impact as a compact row of figures instead of big tiles */
.impact__grid, .impact__grid.three { gap: 0; }
.tile { background: none !important; color: var(--ink) !important; padding: 16px 18px 6px 0; border-right: 1px solid var(--line); margin-right: 18px; }
.impact__grid .tile:last-child { border-right: 0; margin-right: 0; }
.tile { box-shadow: inset 0 3px 0 var(--c); padding-top: 18px !important; }
.tile b { height: auto; font-size: clamp(30px, 2.8vw, 44px); color: var(--ink); }
.tile b.small { font-size: clamp(18px, 1.5vw, 22px); }
.tile p { margin-top: 8px; font-size: 13.5px; color: var(--grey); }
@media (max-width: 860px) { .tile { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; } }
.footer .ft__col { justify-items: start !important; text-align: left !important; }
.footer .ft__mark { padding-bottom: .2em; }

/* footer: full-width midnight band, no wordmark, back-to-top */
.footer { padding: 0 !important; }
.ft { border-radius: 0; padding: clamp(40px, 5vw, 70px) var(--pad) 0; }
.ft__base { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: clamp(40px, 5vw, 70px); padding: 20px 0 24px; border-top: 1px solid rgba(255,255,255,.16); font-size: 13px; color: rgba(255,255,255,.6); }
.ft__up { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); color: #fff; font: 500 13px var(--display); transition: background .3s, border-color .3s; }
.ft__up svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.ft__up:hover { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff !important; }
.ft__up:hover svg { transform: translateY(-3px); }

/* a compact collage inside colour sections (e.g. the Deep website shots) */
.video--media .gallery { margin-top: clamp(10px, 2vw, 24px); }
.gallery + .gallery:not(.spaced) { margin-top: var(--gap); }
.video--media .gallery--bleed { margin-inline: calc(-1 * var(--pad)); }


/* videos: autoplay muted on a loop, no controls — they read like moving images */
.player--auto { aspect-ratio: var(--ar, 16 / 9); cursor: default; }
.player--auto::after { display: none; }
.player--auto iframe { pointer-events: none; }
.row .player--auto { flex: var(--ar) 1 0; width: auto; margin: 0; min-width: 0; }
.gallery > .player--auto { width: 100%; margin: 0; }
.row figure.is-video { cursor: default; }
.row figure.is-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .row .player--auto { flex-basis: calc(50% - var(--gap)); }
  .row .player--auto:only-child, .row .player--auto[style*="--ar:1.7"] { flex-basis: 100%; }
  .row figure.is-video { flex-basis: 100%; }
}

/* covers drifting slowly across the screen in two staggered rows */
.covers { --cv: clamp(128px, 13vw, 232px); --cg: clamp(10px, 1.1vw, 18px); display: grid; gap: var(--cg); overflow: hidden; margin-top: var(--gap); padding: clamp(28px, 3.4vw, 52px) 0; background: linear-gradient(180deg, #e6eefb, #ece8fb); }
.covers__track { display: flex; width: max-content; animation: covers-drift 110s linear infinite; }
.covers__row--b { margin-left: calc(-.5 * (var(--cv) + var(--cg))); }
.covers__row--b .covers__track { animation-duration: 100s; }
.covers img { width: var(--cv); aspect-ratio: 1; margin-right: var(--cg); border-radius: clamp(12px, 1.2vw, 20px); object-fit: cover; box-shadow: 0 10px 26px rgba(11, 31, 107, .14); }
@keyframes covers-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .covers__track { animation: none; } }

/* homepage playground band: one big question as the heading */
.h-play h2 { font-size: clamp(44px, 5.4vw, 88px); line-height: .95; margin: 0 0 14px; }

/* homepage hero on phones: no pronunciation line, a slightly larger rotating line */
@media (max-width: 860px) {
  .hC5__right { display: none; }
  .hC5__mid { font-size: clamp(28px, 7.6vw, 36px); }
}

/* the footer doubles as the contact section (nav "Contact" scrolls here) */
.footer#contact { scroll-margin-top: 0; }
.ft { display: flex; flex-direction: column; min-height: clamp(460px, 72vh, 760px); padding-top: clamp(48px, 6vw, 96px); }
.ft__top { grid-template-columns: 3fr 1fr 1fr; flex: 1; align-content: start; }
.ft .ft__kick { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0 0 clamp(14px, 1.6vw, 22px); }
.ft .footer__mail { gap: 14px 18px; }
.ft .footer__mail a { height: auto; padding: 0; border: 0; border-radius: 0; font-family: var(--display); font-weight: 500; font-size: clamp(28px, 4.2vw, 68px); line-height: 1.05; letter-spacing: -.035em; color: #fff; overflow-wrap: anywhere; transition: color .25s; }
.ft .footer__mail a:hover { color: var(--brand-orange); }
.ft .footer__mail button { height: 44px; padding: 0 20px; font-size: 14px; }
.ft__social { margin-top: clamp(20px, 2.4vw, 32px); }
.ft__base { margin-top: clamp(40px, 6vw, 90px); }
@media (max-width: 860px) { .ft__top { grid-template-columns: 1fr 1fr; } .ft { min-height: 0; } }


/* click any video to pause / play: a small control shows on hover, a big play button while paused */
.player--auto { cursor: pointer; }
.player__toggle { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(11,14,26,.55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .25s, transform .4s var(--ease), background .25s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.player__toggle svg { width: 14px; height: 14px; fill: currentColor; }
.player--auto:hover .player__toggle, .player__toggle:focus-visible { opacity: 1; }
.player--auto.is-paused .player__toggle { opacity: 1; left: 50%; bottom: 50%; width: clamp(56px, 6vw, 84px); height: clamp(56px, 6vw, 84px); transform: translate(-50%, 50%); background: var(--brand-orange); }
.player--auto.is-paused .player__toggle svg { width: 34%; height: 34%; margin-left: 8%; }
@media (hover: none) { .player__toggle { opacity: .85; } }
.row figure.is-video video { cursor: pointer; }

/* video sizes */
.gallery > .player--mid { width: min(72%, 1120px); justify-self: center; }
.player--95 { width: 83.6%; }
@media (max-width: 900px) { .gallery > .player--mid { width: 100%; } }

/* Omvana covers: top row drifts left → right, bottom row right → left */
.covers__row:not(.covers__row--b) .covers__track { animation-direction: reverse; }

/* a single row of larger screenshots that scrolls sideways (drag, swipe or trackpad) */
.gallery--strip .row { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; cursor: grab; padding-bottom: 10px; }
.gallery--strip .row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery--strip .row figure { flex: 0 0 auto; height: clamp(220px, 22vw, 440px); aspect-ratio: var(--ar); scroll-snap-align: start; }
.gallery--strip .row img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
@media (max-width: 900px) { .gallery--strip .row { flex-wrap: nowrap; } .gallery--strip .row figure { flex-basis: auto; height: 58vw; } }
.h-play h2 { display: block; }
.h-play h2 .arr { display: inline-block; vertical-align: -.02em; margin-left: .12em; }

/* reserve each grid image's space before it loads, so the page doesn't jump around */
.row figure img { aspect-ratio: var(--ar); object-fit: cover; }
.ft .footer__mail a { font-size: clamp(22px, 3.5vw, 64px); white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 860px) { .ft .footer__mail a { font-size: 6.1vw; } }

/* ── footer v3: big "Contact", email + copy on one line, page links on the right,
      fading from ink into the top-fold blue ── */
.ft { background: linear-gradient(180deg, var(--brand-ink) 0%, var(--brand-ink) 40%, #16247a 74%, #4865ff 100%); border-radius: 0; padding: clamp(56px, 7vw, 110px) var(--pad, clamp(20px, 3vw, 44px)) 0; min-height: clamp(520px, 80vh, 820px); }
.ft__top { grid-template-columns: minmax(0, 1fr) auto auto; gap: 40px clamp(56px, 8vw, 140px); align-items: start; }
.ft .ft__kick { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 7.6vw, 132px); line-height: .88; letter-spacing: -.045em; text-transform: none; color: #fff; margin: 0 0 clamp(20px, 2.4vw, 36px); }
.ft .footer__mail { flex-wrap: nowrap; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.ft .footer__mail a { font-size: clamp(24px, 3.3vw, 58px); line-height: 1; }
.ft .footer__mail button { flex: 0 0 auto; }
.ft__social { margin-top: clamp(24px, 2.8vw, 40px); }
.ft__col { padding-top: clamp(6px, .9vw, 16px); font-size: 15px; gap: 14px; }
.ft__col h3 { font-size: 16px; margin-bottom: 4px; }
.ft__col a { color: rgba(255,255,255,.8); }
.ft__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(48px, 7vw, 110px); padding: 22px 0 clamp(22px, 2.4vw, 32px); border-top: 1px solid rgba(255,255,255,.4); color: rgba(255,255,255,.92); font-size: 14px; }
.ft__base .ft__up { color: #fff; border-color: rgba(255,255,255,.75); }
@media (max-width: 860px) {
  .ft { min-height: 0; padding-top: 56px; }
  .ft__top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .ft__hello { grid-column: 1 / -1; }
  .ft .footer__mail { flex-wrap: wrap; }
  .ft .footer__mail a { font-size: 6.1vw; }
}

/* ── type & button standards (the homepage top fold keeps its own look) ──
   Big headings: Inter Tight 500, -0.05em.  Small titles: Inter Tight 400, -0.03em.
   Buttons: pill-shaped, 44px tall, Inter Tight 500 14px, sentence case. */
h1:not(.hC5 h1), h2:not(.list__top h2), .list__top h2.sec-head, .ft .ft__kick { font-weight: 500; letter-spacing: -.05em; }
h3:not(.hC5 h3) { font-weight: 400; letter-spacing: -.03em; }
.ft .ft__col h3 { letter-spacing: 0; }
.ft .footer__mail button, .ft__up, a.cv { height: 44px; padding: 0 20px; border-radius: 999px; font: 500 14px var(--display); letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; gap: 10px; }

/* footer: page links sit further in from the right edge */
@media (min-width: 861px) { .ft__top { padding-right: clamp(0px, 7vw, 150px); } }

/* States: breathing room between the launch film and the photos below it */
.gallery > .player--mid { margin-bottom: clamp(24px, 3.4vw, 56px); }
.h-play h2 .nowrap { white-space: nowrap; }

/* sections with 3+ paragraphs: text flows down two columns instead of sitting in a grid
   (which left big gaps under short paragraphs) */
.cols:not(.cols--one):has(> p:nth-of-type(3)) { display: block; column-count: 2; column-gap: clamp(24px, 3vw, 48px); }
.cols:not(.cols--one):has(> p:nth-of-type(3)) > p { break-inside: avoid; margin: 0 0 1.2em; }
@media (max-width: 900px) { .cols:not(.cols--one):has(> p:nth-of-type(3)) { column-count: 1; } }

/* playground: a small label on each piece, styled like the homepage tags */
.pg-wall .row figure { position: relative; }
.pg-tag { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 5px 11px; border-radius: 999px; background: var(--pc); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; pointer-events: none; }
.pg-tag[style*="#ffffff"], .pg-tag[style*="#c9bcff"] { color: var(--brand-ink); box-shadow: inset 0 0 0 1px rgba(11,14,26,.12); }