/* ==========================================================================
   SARD — Creative Agency
   Calm, editorial, dark. Colour comes from Sard's own light: the prism in
   the hero, the faint arc of the company profile behind the page, and small
   accents (service disciplines, price tiers). Controls are Apple-style
   liquid glass (see js/liquid-glass.js).
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Groteska"; src: url("../fonts/groteska-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Groteska"; src: url("../fonts/groteska-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Groteska"; src: url("../fonts/groteska-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Groteska"; src: url("../fonts/groteska-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Tajawal (Arabic). Only downloaded when Arabic text is on the page. */
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --bg: #060607;
  --bg-1: #0b0b0d;
  --surface: #111114;
  --fg: #f4f4f5;
  --fg-2: #a6a6ad;
  --fg-3: #6d6d74;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);

  /* Sard's palette */
  --red: #C31418;
  --orange: #F76A0E;
  --yellow: #EACD1E;
  --green: #66AB09;
  --blue: #137DE0;
  --violet: #8809B5;

  --font: "Groteska", "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --w-head: 500;
  --w-light: 300;

  --fs-hero: clamp(3rem, 6.4vw + .6rem, 7.25rem);
  --fs-title: clamp(2.1rem, 3vw + .7rem, 3.5rem);
  --fs-statement: clamp(1.55rem, 1.9vw + .9rem, 2.75rem);
  --fs-lead: clamp(1.02rem, .3vw + .94rem, 1.2rem);
  --lh-head: 1.04;
  --lh-body: 1.65;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.3, 1.45, .55, 1);

  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(96px, 11vw, 160px);
  --nav-h: 76px;
  --r: 16px;
  --r-lg: 24px;
}
html[lang="ar"] {
  --font: "Tajawal", "Groteska", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-head: 500;
  --w-light: 300;
  --lh-head: 1.3;
  --lh-body: 1.8;
  --fs-hero: clamp(3rem, 6.6vw + .6rem, 7.4rem);
  --fs-title: clamp(2.2rem, 3.1vw + .7rem, 3.6rem);
  --fs-statement: clamp(1.6rem, 2vw + .95rem, 2.8rem);
}
html[lang="ar"] body * { letter-spacing: 0 !important; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: transparent;           /* the live background (canvas.ambient) shows through */
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.i18n-pending body { visibility: hidden; }
html.is-switching main, html.is-switching .footer, html.is-switching .nav { opacity: 0; transition: opacity .16s var(--ease); }
main, .footer, .nav { transition: opacity .3s var(--ease); }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 500; color: var(--fg); }
[hidden] { display: none !important; }
::selection { background: rgba(255, 255, 255, .9); color: #000; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }

.skip-link { position: fixed; inset-inline-start: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #fff; color: #000; transform: translateY(-160%); transition: transform .3s var(--ease-out); }
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.i { width: 18px; height: 18px; flex: none; }
.i-flip { transform: scaleX(-1); }
[dir="rtl"] .i-dir { transform: scaleX(-1); }
[dir="rtl"] .i-dir.i-flip { transform: none; }

/* ---------- Splash (about 1.5 s on each load) ----------
   The four pieces of the mark fly in and lock together, a thin line of Sard's
   spectrum draws beneath, and the dark squashes down onto that line like a
   shutter, revealing the hero. Only transform and opacity are animated, so it
   all runs on the GPU and stays smooth while the page is still loading. */
.splash { display: none; }
.splashing .splash { position: fixed; inset: 0; z-index: 300; display: block; visibility: visible; pointer-events: none; }
.splash__bg {
  position: absolute; inset: 0; background: #050506; transform-origin: 50% 50%; will-change: transform;
  animation: splash-shut .55s cubic-bezier(.76, 0, .24, 1) 1.02s forwards;
}
.splash__mark {
  position: absolute; left: 50%; top: 50%; width: clamp(78px, 8vw, 116px); aspect-ratio: 281.87 / 202.04;
  translate: -50% -50%; will-change: transform, opacity;
  animation: splash-leave .42s cubic-bezier(.4, 0, .2, 1) .98s forwards;
}
.splash__mark svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #fff;
  opacity: 0; will-change: transform, opacity;
  animation: splash-piece .74s cubic-bezier(.16, 1, .3, 1) forwards;
}
.splash__mark .p1 { transform-origin: 16% 80%; --tx: -30px; --ty: 34px; --r: -28deg; animation-delay: .06s; }
.splash__mark .p2 { transform-origin: 26% 38%; --tx: -38px; --ty: -26px; --r: 20deg; animation-delay: .13s; }
.splash__mark .p3 { transform-origin: 83% 15%; --tx: 38px; --ty: -32px; --r: -20deg; animation-delay: .2s; }
.splash__mark .p4 { transform-origin: 74% 62%; --tx: 34px; --ty: 30px; --r: 26deg; animation-delay: .27s; }
/* a soft bloom behind the mark as it locks together */
.splash__glow {
  position: absolute; inset: -70%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 55%, transparent);
  animation: splash-bloom .9s ease .5s forwards;
}
@keyframes splash-piece {
  from { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(.82); }
  45% { opacity: .75; }
  to { opacity: 1; transform: none; }
}
@keyframes splash-bloom { 40% { opacity: 1; } to { opacity: .35; } }
@keyframes splash-leave { to { opacity: 0; transform: scale(.94); } }
@keyframes splash-shut { to { transform: scaleY(0); } }
/* the hero waits for the splash */
html.splashing .hero__title, html.splashing .hero__side, html.splashing .hero__foot, html.splashing .hero__eyebrow { opacity: 0 !important; transform: translateY(20px) !important; }
html.splashing body { overflow: hidden; }

/* live background (js/ambient.js). Sized to the large viewport so a phone's
   toolbar showing or hiding never resizes (and re-allocates) it mid-scroll. */
.ambient { position: fixed; inset: 0 0 auto; z-index: -1; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
.ambient.is-on { opacity: 1; }

/* ---------- Type ---------- */
.label { font-size: .875rem; font-weight: 500; color: var(--fg-2); padding-top: .7em; line-height: 1.4; }
html[lang="ar"] .label { font-size: 1rem; padding-top: .5em; }
.title { font-size: var(--fs-title); font-weight: var(--w-head); line-height: var(--lh-head); letter-spacing: -.032em; max-width: 18ch; text-wrap: balance; }
.light { font-weight: var(--w-light); }
.sublead { margin-top: 20px; font-size: var(--fs-lead); color: var(--fg-2); max-width: 46ch; }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .45s var(--ease-out); }
[dir="rtl"] .link { background-position: 100% 100%; }
.link:hover { background-size: 100% 1px; }
.link .i { width: 16px; height: 16px; }

/* ---------- Layout ---------- */
.section { position: relative; padding-block: var(--section); border-top: 1px solid var(--line); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px 40px; }

/* ==========================================================================
   LIQUID GLASS
   Dark Apple glass (iOS 26). Three materials: .lg (clear), .lg--bar (the
   navigation: a darker, lightly frosted body keeps labels readable over
   anything), .lg--tint (primary actions: more light in the body).
   Chromium: js/liquid-glass.js draws each control through an SVG filter made
   for its shape. The convex bezel bends what lies at and just beyond the
   edge into the rim, the centre stays clear, and a light from the upper
   left catches the rim (sharp at the upper left, softer at the lower
   right). The filter runs on ::after, a layer --lg-m larger than the
   control; controls that fade with opacity or scroll their content use
   --lg-lens: inset and refract inside their own box.
   Other browsers: the same look from CSS (frosted body, conic rim, glow).
   ========================================================================== */
@property --lg-glow { syntax: "<number>"; inherits: true; initial-value: 0; }
.lg {
  position: relative;
  isolation: isolate;
  background-color: rgba(16, 16, 19, .3);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  backdrop-filter: blur(6px) saturate(160%);
  box-shadow:
    inset 0 1px 7px -1px rgba(255, 255, 255, .08),
    inset -1px -1px 6px -2px rgba(255, 255, 255, .05),
    0 0 0 .5px rgba(0, 0, 0, .35),
    0 2px 5px -1px rgba(0, 0, 0, .3),
    0 16px 34px -14px rgba(0, 0, 0, .7);
  transition: transform .6s var(--spring), --lg-glow .5s var(--ease-out), background-color .3s var(--ease);
}
.lg--bar { background-color: rgba(22, 22, 25, .6); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); }
.lg--tint { background-color: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px) saturate(170%); backdrop-filter: blur(8px) saturate(170%); }
/* the rim (CSS version): a thin ring lit from the upper left, softer at the lower right */
.lg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .08)),
    conic-gradient(rgba(255, 255, 255, .49), rgba(255, 255, 255, .18) 30deg, rgba(255, 255, 255, .07) 55deg, rgba(255, 255, 255, .17) 90deg, rgba(255, 255, 255, .38) 145deg, rgba(255, 255, 255, .28) 180deg, rgba(255, 255, 255, .07) 235deg, rgba(255, 255, 255, .28) 270deg, rgba(255, 255, 255, .6) 300deg, rgba(255, 255, 255, .7) 325deg, rgba(255, 255, 255, .49));
  -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);
}
/* light that follows the pointer and blooms from where the glass is pressed (+ in Chromium the rim light, --lg-light) */
.lg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(calc(52px + var(--lg-glow) * 64px) circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, calc(var(--lg-glow) * .16)), rgba(255, 255, 255, 0) 72%), var(--lg-light, none);
  background-origin: content-box; background-clip: content-box;
  background-size: auto, 100% 100%; background-repeat: no-repeat;
}
/* Chromium: the whole glass is drawn by the filter (id, margin and radius set by js/liquid-glass.js) */
.lg--refract { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
/* the shadow moves to ::before, painted above the refracting layer, so the lens does not see it */
.lg--refract::before {
  padding: 0; background: none; -webkit-mask: none; mask: none;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .28), 0 2px 5px -1px rgba(0, 0, 0, .3), 0 16px 34px -14px rgba(0, 0, 0, .7);
}
.lg--refract::after {
  inset: calc(var(--lg-m, 0px) * -1); padding: var(--lg-m, 0px); border-radius: 0;
  clip-path: inset(var(--lg-m, 0px) round var(--lg-r, 0px));
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
}
.lg--refract.lg--inset { -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); }
.lg--refract.lg--inset::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* an opacity below 1 on the control hides the page from its ::after, so glass that fades refracts inside its own box */
.wa, .card__pill { --lg-lens: inset; }
/* a subtle lift on hover; a springy press with light blooming from the touch point */
a.lg:hover, button.lg:hover { transform: scale(1.03); --lg-glow: .45; }
a.lg:active, button.lg:active { transform: scale(.97); --lg-glow: 1; transition-duration: .18s, .25s, .3s; }
a.lg:not(.lg--refract):hover, button.lg:not(.lg--refract):hover { background-color: rgba(30, 30, 34, .38); }
a.lg--bar:not(.lg--refract):hover, button.lg--bar:not(.lg--refract):hover { background-color: rgba(36, 36, 40, .66); }
a.lg--tint:not(.lg--refract):hover, button.lg--tint:not(.lg--refract):hover { background-color: rgba(255, 255, 255, .2); }
@media (prefers-reduced-transparency: reduce) {
  .lg { background-color: rgba(30, 30, 34, .95); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lg--tint { background-color: rgb(62, 62, 68); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 52px; padding: 0 24px;
  border-radius: 999px;
  font-size: .95rem; font-weight: 500; white-space: nowrap;
  color: var(--fg);
}
.btn .i { transition: translate .4s var(--ease-out); }
.btn:hover .i-dir { translate: 3px 0; }
[dir="rtl"] .btn:hover .i-dir { translate: -3px 0; }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--fg); }
.icon-btn svg { width: 20px; height: 20px; }

/* segmented control with a sliding knob (nav, language, filters) */
.seg { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.seg > button, .nav__tabs > a {
  position: relative; z-index: 1;
  height: 38px; padding: 0 15px; border-radius: 999px;
  display: inline-flex; align-items: center;
  font-size: .9rem; color: rgba(244, 244, 245, .74); /* on glass the backdrop varies: a lighter label than --fg-2 stays readable over photos and light */
  white-space: nowrap; flex: none;
  transition: color .3s var(--ease);
}
.seg > button:hover, .nav__tabs > a:hover { color: var(--fg); }
.seg > button[aria-pressed="true"], .nav__tabs > a.is-active { color: var(--fg); transition-delay: .1s; } /* lights up as the bead arrives */
/* the selected bead: dark and glossy, set into the glass. It slides like a drop
   (js/main.js placeKnob): stretched along its travel, thinner, then it settles. */
.knob {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
  width: var(--kw, 0); transform: translateX(var(--kx, 0)) scaleY(var(--ks, 1));
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, .045),
    0 0 0 .5px rgba(0, 0, 0, .25);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
/* its rim: a faint gloss, brightest at the upper left and lower right */
.knob::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: .75px; pointer-events: none;
  background: conic-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .07) 40deg, rgba(255, 255, 255, .03) 70deg, rgba(255, 255, 255, .1) 145deg, rgba(255, 255, 255, .06) 200deg, rgba(255, 255, 255, .03) 240deg, rgba(255, 255, 255, .16) 300deg, rgba(255, 255, 255, .24) 325deg, rgba(255, 255, 255, .2));
  -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);
}
.knob.is-on { opacity: 1; }
.knob.no-anim { transition: none; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--gutter);
}
.nav::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 6, 7, .72), rgba(6, 6, 7, .35) 55%, rgba(6, 6, 7, 0));
  opacity: 0; transition: opacity .4s var(--ease);
}
.nav.is-scrolled::before { opacity: 1; }
.nav__logo { justify-self: start; display: block; color: var(--fg); }
.nav__logo svg { height: 26px; width: auto; aspect-ratio: 800.45 / 202.04; fill: currentColor; }
.nav__tabs { justify-self: center; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.nav__tabs > a { padding: 0 16px; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.lang > button { min-width: 44px; justify-content: center; padding: 0 12px; font-size: .85rem; }
.lang > button[lang="ar"] { font-family: "Tajawal", var(--font); font-size: .95rem; }
.nav__cta { height: 46px; padding: 0 20px; }
.nav__signin { height: 46px; padding: 0 18px 0 16px; gap: .5em; }
[dir="rtl"] .nav__signin { padding: 0 16px 0 18px; }
/* "coming soon" note under Sign in, until the Sard system is live (js/config.js) */
.soon-tip {
  position: fixed; z-index: 60; translate: -50% 0;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(22, 22, 25, .92); border: 1px solid var(--line);
  color: var(--fg); font-size: .85rem; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--ease), transform .35s var(--ease-out);
}
.soon-tip.is-above { translate: -50% -100%; transform: translateY(4px); }
.soon-tip.is-on { opacity: 1; transform: none; }
.nav__menu { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
  background: rgba(6, 6, 7, .97);
  opacity: 0; transition: opacity .35s var(--ease);
  overflow-y: auto;
}
.menu.is-open { opacity: 1; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.7rem, 6vw, 2.4rem); font-weight: var(--w-head); letter-spacing: -.03em; line-height: 1.2; }
.menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 32px; }
.menu__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.menu__contact { display: flex; flex-direction: column; gap: 4px; color: var(--fg-2); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
/* the canvas fades out at the bottom, into the page's own light */
.hero__gl, .hero__fallback {
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__gl.is-ready { opacity: 1; }
.hero__fallback { position: absolute; inset: 0; z-index: -3; display: none; background: #040405 url("../assets/brand/hero-still.webp") center 40% / cover no-repeat; }
.no-webgl .hero__fallback { display: block; }
.no-webgl .hero__gl { display: none; }
.hero__stage { position: absolute; left: 50%; top: calc(var(--nav-h) + 6vh); translate: -50% 0; width: min(46vw, 700px); height: 43vh; pointer-events: none; }
.hero__content {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end; gap: 28px 64px;
  padding-top: 55vh;
  padding-bottom: clamp(28px, 5vh, 56px);
}
.hero__title { font-size: var(--fs-hero); font-weight: var(--w-head); line-height: .96; letter-spacing: -.045em; }
html[lang="ar"] .hero__title { line-height: 1.18; }
.hero__lead { max-width: 36ch; font-size: var(--fs-lead); color: var(--fg-2); margin-bottom: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* a small glass tag opens the headline */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 13px; margin-bottom: 22px;
  border-radius: 999px; font-size: .82rem; font-weight: 500; color: var(--fg-2);
}
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: dot 3.2s var(--ease) infinite; }
@keyframes dot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* the foot: who trusts Sard, as a slow endless strip of their logos */
.hero__foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px;
  padding-top: 18px; padding-bottom: 22px;
  font-size: .8rem; color: var(--fg-3);
}
.hero__trust { white-space: nowrap; }
.hero__logos {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hero__track { display: flex; align-items: center; gap: 56px; width: max-content; animation: marquee 60s linear infinite; }
[dir="rtl"] .hero__track { animation-name: marquee-rtl; }
.hero__logos:hover .hero__track { animation-play-state: paused; }
.hero__track img { width: calc(var(--w, 50) * 1.5px); max-height: 30px; height: auto; object-fit: contain; opacity: .42; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .hero__track { animation: none; } }
@media (max-width: 640px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero__trust { display: none; }
  .hero__track { gap: 40px; }
  .hero__track img { width: calc(var(--w, 50) * 1.2px); max-height: 24px; }
}
.hero__scroll { position: relative; display: block; width: 1px; height: 42px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.hero__scroll::after { content: ""; position: absolute; inset-inline: -8px; inset-block: -4px; }
.hero__scroll span { position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-14px); } 70%, 100% { transform: translateY(42px); } }
.js .hero__title, .js .hero__side, .js .hero__foot, .js .hero__eyebrow { opacity: 0; transform: translateY(20px); transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); }
.js .is-loaded .hero__eyebrow { opacity: 1; transform: none; transition-delay: .35s; }
.js .is-loaded .hero__title { opacity: 1; transform: none; transition-delay: .5s; }
.js .is-loaded .hero__side { opacity: 1; transform: none; transition-delay: .75s; }
.js .is-loaded .hero__foot { opacity: 1; transform: none; transition-delay: 1.1s; }
/* after the splash, the text follows straight on */
.splash-done .is-loaded .hero__eyebrow { transition-delay: 0s; }
.splash-done .is-loaded .hero__title { transition-delay: .05s; }
.splash-done .is-loaded .hero__side { transition-delay: .22s; }
.splash-done .is-loaded .hero__foot { transition-delay: .5s; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.statement { font-size: var(--fs-statement); line-height: 1.24; letter-spacing: -.024em; max-width: 30ch; text-wrap: pretty; }
html[lang="ar"] .statement { line-height: 1.6; }
.statement .dim { color: var(--fg-3); }
/* words light up as the statement is read (set by js) */
.statement.is-lit .w { color: rgba(255, 255, 255, .13); transition: color .45s var(--ease); }
.statement.is-lit .w.on { color: var(--fg); }
.statement.is-lit .dim .w.on { color: #8c8c93; }

.about__more { margin-top: clamp(64px, 7vw, 104px); align-items: end; }
.about__name { display: flex; flex-direction: column; gap: 14px; }
.about__word {
  font-family: "Tajawal", sans-serif; font-weight: 300;
  font-size: clamp(4.5rem, 8vw, 8rem); line-height: .85;
  color: var(--fg);
  letter-spacing: 0;
}
.about__meaning { font-size: .92rem; line-height: 1.55; color: var(--fg-3); max-width: 25ch; }
.about__meaning em { font-style: normal; color: var(--fg); }
.about__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; max-width: 860px; }
.about__cols p { color: var(--fg-2); }
.mini { font-size: 1rem; font-weight: 500; margin-bottom: 10px; }

/* Sard in numbers */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(64px, 7vw, 104px); border-top: 1px solid var(--line); }
.stat { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px clamp(16px, 2.4vw, 32px) 6px; }
.stat:first-child { padding-inline-start: 0; }
.stat + .stat { border-inline-start: 1px solid var(--line); }
/* a short line of the brand colour on the rule, like a bookmark */
.stat::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 36px; height: 2px; background: var(--c); box-shadow: 0 0 14px var(--c); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-out) .2s; }
.stat + .stat::before { inset-inline-start: clamp(16px, 2.4vw, 32px); }
[dir="rtl"] .stat::before { transform-origin: 100% 50%; }
.stat.is-in::before, .no-js .stat::before { transform: none; }
.stat__n { display: flex; align-items: flex-start; font-family: "Groteska", sans-serif; font-size: clamp(3.4rem, 5.4vw, 5.6rem); font-weight: 300; line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
[dir="rtl"] .stat__n { justify-content: flex-end; }
.stat__s { font-size: .5em; margin-top: .08em; margin-inline-start: .06em; color: var(--c); letter-spacing: 0; }
.stat__l { max-width: 20ch; font-size: .95rem; line-height: 1.45; color: var(--fg-2); }
@media (max-width: 960px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .stat:nth-child(3)::before { inset-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 22px; }
}

.film { margin-top: clamp(72px, 9vw, 120px); --p: 1; }
.film__frame {
  position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: #000;
  border-radius: calc(var(--r-lg) + (1 - var(--p)) * 16px);
  transform: scale(calc(.9 + var(--p) * .1));
  transform-origin: 50% 0;
  box-shadow: 0 0 0 1px var(--line);
}
.film__video { width: 100%; height: 100%; object-fit: cover; }
.film__toggle { position: absolute; inset-inline-end: 18px; bottom: 18px; width: 44px; height: 44px; }
.film__toggle .i-play { display: none; }
.film.is-paused .film__toggle .i-play { display: block; }
.film.is-paused .film__toggle .i-pause { display: none; }
.film__cap { display: flex; justify-content: space-between; margin-top: 14px; font-size: .85rem; color: var(--fg-3); }

/* ==========================================================================
   WHY
   ========================================================================== */
.rows { margin-top: 56px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px 32px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--line); }
.row__n { font-size: .85rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.row__t { font-size: clamp(1.25rem, .6vw + 1.05rem, 1.55rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.row__d { color: var(--fg-2); max-width: 46ch; }

/* ==========================================================================
   SERVICES
   A sticky picture on one side, the nine services on the other. The picture
   follows the service being read (or hovered).
   ========================================================================== */
/* --svc-c follows --c (set by js/main.js to the active discipline) and eases between colours */
@property --svc-c { syntax: "<color>"; inherits: true; initial-value: #F76A0E; }
.svc {
  --c: var(--orange); --svc-c: var(--c); --p: .111;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 96px); margin-top: 72px; align-items: start;
  transition: --svc-c .9s var(--ease);
}
.svc__media { align-self: stretch; }
.svc__sticky { position: sticky; top: calc(var(--nav-h) + 36px); }
/* A small lit stage. The renders sit on black and are screened onto it, so
   their black becomes the stage: a pool of the discipline's light behind the
   object, a faint floor catching it, a thin reflection of the colour along the
   top edge, and a soft vignette. */
.svc__frame {
  position: relative; z-index: 1; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(38% 52% at 58% 44%, color-mix(in srgb, var(--svc-c) 16%, transparent), transparent 70%),
    linear-gradient(to top, color-mix(in srgb, var(--svc-c) 9%, transparent), transparent 34%),
    radial-gradient(120% 90% at 50% 0%, #111116, #050507 70%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -48px rgba(0, 0, 0, .9);
}
.svc__frame::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: 3; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 10%, color-mix(in srgb, var(--svc-c) 75%, #fff) 55%, transparent 92%);
  opacity: .6;
}
.svc__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 100% at 58% 42%, transparent 55%, rgba(0, 0, 0, .38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
/* the service's number, large and quiet, in the top corner */
.svc__num {
  position: absolute; top: 14px; inset-inline-start: 22px; z-index: 2;
  font-family: "Groteska", sans-serif; font-size: clamp(3rem, 4.6vw, 4.6rem); font-weight: 300; line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .16);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
/* a soft light that follows the pointer across the stage */
.svc__sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .06), transparent 70%);
}
.svc__frame:hover .svc__sheen { opacity: 1; }
/* discipline-tinted light spilling from under the frame, under the object */
.svc__glow {
  position: absolute; inset-inline: 0; top: 0; z-index: 0; aspect-ratio: 16 / 10; pointer-events: none;
  background: radial-gradient(40% 30% at 58% 100%, color-mix(in srgb, var(--svc-c) 55%, transparent), transparent);
  filter: blur(40px); transform: translateY(13%);
}
/* Crossfade: the incoming render settles in on top (rises, sharpens, eases to scale 1) while the
   outgoing one stays put, then dissolves. The shown render breathes very slowly (a 2% zoom). */
.svc__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen;
  opacity: 0; transform: translateY(2.2%) scale(1.035); filter: blur(6px); transform-origin: 58% 45%;
  translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -9px);
  transition: opacity .5s var(--ease) .2s, transform 0s linear .75s, filter 0s linear .75s, translate 1.2s var(--ease-out);
}
.svc__frame img.is-on {
  z-index: 1; opacity: 1; transform: none; filter: none;
  transition: opacity .6s var(--ease), transform 1.3s var(--ease-out), filter .8s var(--ease-out), translate 1.2s var(--ease-out);
  animation: svc-breathe 9s var(--ease) 1.3s infinite alternate;
  animation-play-state: paused;
}
.svc.is-in .svc__frame img.is-on { animation-play-state: running; }
@keyframes svc-breathe { from { scale: 1; } to { scale: 1.02; } }
.svc__pill {
  position: absolute; inset-inline-start: 18px; bottom: 18px; z-index: 3;
  height: 40px; padding: 0 17px; border-radius: 999px;
  display: inline-flex; align-items: center;
  font-size: .875rem; font-weight: 500; color: #fff; white-space: nowrap;
}
.svc__name { display: block; transition: opacity .32s var(--ease), transform .5s var(--ease-out), filter .32s var(--ease); }
.svc__pill.is-swap .svc__name { opacity: 0; transform: translateY(5px); filter: blur(3px); transition-duration: .16s; }
.svc__cap { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: .875rem; color: var(--fg-2); }
.svc__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--svc-c); box-shadow: 0 0 12px color-mix(in srgb, var(--svc-c) 80%, transparent); flex: none; }
.svc__axis { white-space: nowrap; }
/* progress through the nine services */
.svc__prog { position: relative; flex: 1 1 auto; min-width: 32px; height: 1px; margin-inline: 10px 4px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.svc__prog i {
  position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--svc-c) 30%, transparent), var(--svc-c));
  transform: scaleX(var(--p)); transform-origin: 0 50%; transition: transform .9s var(--ease-out);
}
[dir="rtl"] .svc__prog i { transform-origin: 100% 50%; background: linear-gradient(270deg, color-mix(in srgb, var(--svc-c) 30%, transparent), var(--svc-c)); }
.svc__count { color: var(--fg-3); font-variant-numeric: tabular-nums; }
/* under the picture: what's included, start with it, jump between services */
.svc__detail { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.svc__inc { font-size: .8rem; color: var(--fg-3); }
.svc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-height: 36px; }
.svc__tags li {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: .85rem; color: var(--fg-2); background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-c) 26%, var(--line));
  opacity: 0; transform: translateY(4px);
}
.svc__tags.is-in li { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .6s var(--ease-out); }
.svc__tags.is-in li:nth-child(2) { transition-delay: .05s; }
.svc__tags.is-in li:nth-child(3) { transition-delay: .1s; }
.svc__tags.is-in li:nth-child(4) { transition-delay: .15s; }
.svc__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; margin-top: 24px; }
.svc__go { height: 48px; }
.svc__jump { display: flex; gap: 2px; }
.svc__jump button {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--fg-3); transition: color .35s var(--ease), background-color .35s var(--ease);
}
.svc__jump button svg { width: 18px; height: 18px; }
.svc__jump button:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.svc__jump button.is-on { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.svc__jump button::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--c); opacity: 0; transition: opacity .35s var(--ease); }
.svc__jump button.is-on::after { opacity: 1; }
/* short screens: keep the sticky column within the window */
@media (max-height: 800px) { .svc__jump { display: none; } .svc__detail { margin-top: 18px; padding-top: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .svc__frame img, .svc__frame img.is-on { animation: none; transform: none; filter: none; }
}

.axis + .axis { margin-top: 64px; }
.axis__t { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 1rem; font-weight: 500; color: var(--fg); }
.axis__n { font-size: .8rem; color: var(--c); font-variant-numeric: tabular-nums; }
.svc__item { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.svc__item::before {
  content: ""; position: absolute; inset-inline-start: -22px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px;
  background: var(--c); transform: scaleY(0); transition: transform .55s var(--ease-out);
}
.svc__item.is-active::before { transform: none; }
.svc__img { display: none; }
.svc__icon { width: 26px; height: 26px; margin-top: 2px; color: var(--fg-3); transition: color .45s var(--ease); }
.svc__t { font-size: clamp(1.1rem, .4vw + 1rem, 1.3rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; color: var(--fg-2); transition: color .45s var(--ease); }
.svc__d { margin-top: 8px; max-width: 54ch; color: var(--fg-3); transition: color .45s var(--ease); }
.svc__x { margin-top: 12px; font-size: .8rem; line-height: 1.5; color: var(--fg-3); }
.svc__item.is-active .svc__icon { color: var(--c); }
.svc__item.is-active .svc__t { color: var(--fg); }
.svc__item.is-active .svc__d { color: var(--fg-2); }
.svc__more { margin-top: 40px; color: var(--fg-2); }
.svc__more .link { margin-top: 4px; }

/* ==========================================================================
   CLIENTS
   ========================================================================== */
/* the heading is anchored to the edge of the logo grid (label, then title), with a short line on the other side */
.clients__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; }
.clients__head .title { margin-top: 18px; }
.clients__lead { justify-self: end; margin: 0; max-width: 36ch; }
@media (max-width: 960px) {
  .clients__head { grid-template-columns: minmax(0, 1fr); }
  .clients__lead { justify-self: start; }
}
.logos {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; margin-top: 64px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.logos li { container-type: inline-size; aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--bg-1); min-width: 0; }
.logos img { width: calc(var(--w, 50) * 1cqi); height: auto; max-height: 44cqi; object-fit: contain; opacity: .6; transition: opacity .4s var(--ease), transform .6s var(--ease-out); }
.logos li:hover img { opacity: 1; transform: scale(1.04); }

/* ==========================================================================
   CLIENT FEEDBACK
   Their stories, in their words: one large quote at a time, chosen with the
   clients' logos. The quotes are stacked in one grid cell, so the block keeps
   the height of the longest one. Content: js/testimonials.js.
   ========================================================================== */
.voices {
  --fs-quote: clamp(1.42rem, 1.55vw + .88rem, 2.4rem);
  --k: 1.6px;                        /* logo size: --w (from the data) × --k */
  margin-top: clamp(104px, 11vw, 168px);
  align-items: start;
}
html[lang="ar"] .voices { --fs-quote: clamp(1.5rem, 1.6vw + .92rem, 2.45rem); }
.voices__title { font-size: clamp(1.45rem, .9vw + 1.1rem, 2rem); font-weight: var(--w-head); line-height: 1.14; letter-spacing: -.028em; max-width: 11ch; text-wrap: balance; }
html[lang="ar"] .voices__title { line-height: 1.45; }
.voices__main { min-width: 0; }

.voices__stage { display: grid; touch-action: pan-y; }
.voice {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px); filter: blur(5px);
  transition: opacity .45s var(--ease), transform .6s var(--ease), filter .45s var(--ease), visibility 0s linear .6s;
}
.voice.is-active {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity .8s var(--ease) .16s, transform 1s var(--ease-out) .16s, filter .8s var(--ease) .16s, visibility 0s;
}
.voice__mark { display: block; width: clamp(34px, 1.6vw + 22px, 46px); height: auto; margin-bottom: clamp(18px, 1.6vw, 26px); fill: var(--c, var(--orange)); }
[dir="rtl"] .voice__mark { transform: scaleX(-1); }
.voice__q { margin: 0; }
.voice__q p { font-size: var(--fs-quote); line-height: 1.26; letter-spacing: -.022em; max-width: 31ch; text-wrap: pretty; }
html[lang="ar"] .voice__q p { line-height: 1.62; max-width: 34ch; }
.voice__by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 30px; font-size: .95rem; line-height: 1.4; color: var(--fg-3); }
html[lang="ar"] .voice__by { font-size: 1rem; }
.voice__by::before { content: ""; width: 22px; height: 1px; background: var(--fg-3); }
.voice__who { color: var(--fg); font-weight: 500; }
.voice__co { color: var(--fg); font-weight: 500; }
.voice__who + .voice__co { color: var(--fg-2); font-weight: 400; }
.voice__svc::before { content: "·"; margin-inline-end: 12px; color: var(--fg-3); }

.voices__nav { display: flex; align-items: center; gap: 18px; margin-top: clamp(36px, 3.6vw, 52px); }
.voices__tabs { flex: 1 1 auto; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 12px; }
.voices__tab { position: relative; height: 76px; display: grid; place-items: center; border-radius: 10px 10px 2px 2px; -webkit-tap-highlight-color: transparent; }
.voices__tab img {
  width: calc(var(--w, 50) * var(--k)); max-width: 86%; height: auto; max-height: 46px; object-fit: contain;
  opacity: .28; transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}
.voices__tab:hover img { opacity: .6; }
.voices__tab.is-active img { opacity: 1; }
.voices__tab:active img { transform: scale(.96); }
/* the line under each logo; the active one fills while its quote is shown */
.voices__bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.voices__bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--c, var(--fg)); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .voices__bar i { transform-origin: 100% 50%; }
.voices__tab.is-active .voices__bar i { transform: none; }
.voices.is-auto .voices__tab.is-active .voices__bar i { animation: sardVoiceFill 7s linear both; }
.voices.is-auto.is-held .voices__tab.is-active .voices__bar i { animation-play-state: paused; }
@keyframes sardVoiceFill { from { transform: scaleX(0); } to { transform: none; } }

.voices__play { flex: none; width: 40px; height: 40px; }
.voices__play svg { width: 15px; height: 15px; }
.voices__play .i-play { display: none; }
.voices.is-stopped .voices__play .i-play { display: block; }
.voices.is-stopped .voices__play .i-pause { display: none; }

@media (max-width: 960px) {
  .voices { --k: 1.25px; row-gap: 30px; }
  .voices__title { max-width: 16ch; }
  .voices__tab { height: 68px; }
}
@media (max-width: 640px) {
  .voices { --k: .98px; row-gap: 24px; }
  .voice__by { margin-top: 24px; font-size: .9rem; }
  .voices__nav { gap: 10px; margin-top: 36px; }
  .voices__tabs { gap: 0 8px; }
  .voices__tab { height: 60px; }
  .voices__tab img { max-width: 92%; max-height: 28px; }
  .voices__play { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .voice, .voice.is-active { transform: none; filter: none; }
  .voices__tab.is-active .voices__bar i { animation: none !important; transform: none; }
}

/* ==========================================================================
   WORK
   ========================================================================== */
.work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.filters > button { height: 36px; font-size: .875rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 22px; margin-top: 64px; }
.card { min-width: 0; }
.card.is-hidden { display: none; }
/* folded: the next projects peek out, cut and blurred, under "View all work" */
.cards { position: relative; }
.cards.is-collapsed {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 190px)), rgba(0, 0, 0, .8) calc(100% - var(--fade, 190px) * .75), rgba(0, 0, 0, .3) calc(100% - var(--fade, 190px) * .35), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 190px)), rgba(0, 0, 0, .8) calc(100% - var(--fade, 190px) * .75), rgba(0, 0, 0, .3) calc(100% - var(--fade, 190px) * .35), transparent);
}
.card.is-folded, .card--cta.is-folded { display: none; }
.card.is-peek { pointer-events: none; }
.card.is-peek .card__media img { filter: brightness(.72) saturate(.85); }
/* the cut picture fades out on its own, so the cut line is never a hard edge whatever the browser */
.card.is-peek .card__media {
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .55) calc(var(--vis, 160px) * .5), transparent calc(var(--vis, 160px) - 2px));
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .55) calc(var(--vis, 160px) * .5), transparent calc(var(--vis, 160px) - 2px));
}
/* phones: the slice is too short for the stacked blur, a plain soft blur reads better */
@media (max-width: 640px) {
  .work__veil { display: none; }
  /* the whole card goes out of focus, edges included, a little smaller as if further away */
  .card.is-peek .card__media { filter: blur(26px) brightness(.6) saturate(.75); transform: scale(.9); transform-origin: 50% 0; }
  .card.is-peek .card__media img { filter: none; transform: scale(1.15); }
}
.card .card__media img { transition: transform 1s var(--ease-out), filter .9s var(--ease); }
.work__more { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: -30px; }
.work__more.is-open { margin-top: 56px; }
/* a progressive Gaussian blur over the cut row: nearly sharp at the top, deeply
   blurred where it fades out (six stacked layers, each blurring twice as much
   and masked to its own band) */
/* it runs 96px past the cut, over empty page: Chromium mirrors the backdrop at
   the edges of a blur, so ending it right at the cut would reflect the bright
   pictures back instead of fading them */
.work__veil { position: absolute; inset-inline: -24px; top: calc(30px - var(--fade, 190px)); height: calc(var(--fade, 190px) + 96px); pointer-events: none; transition: opacity .5s var(--ease); }
.work__more.is-open .work__veil { opacity: 0; visibility: hidden; }
.work__veil i { position: absolute; inset: 0; }
.work__veil i:nth-child(1) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask: linear-gradient(transparent 0%, #000 10%, #000 25%, transparent 38%); mask: linear-gradient(transparent 0%, #000 10%, #000 25%, transparent 38%); }
.work__veil i:nth-child(2) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask: linear-gradient(transparent 12%, #000 25%, #000 38%, transparent 50%); mask: linear-gradient(transparent 12%, #000 25%, #000 38%, transparent 50%); }
.work__veil i:nth-child(3) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask: linear-gradient(transparent 25%, #000 38%, #000 50%, transparent 62%); mask: linear-gradient(transparent 25%, #000 38%, #000 50%, transparent 62%); }
.work__veil i:nth-child(4) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask: linear-gradient(transparent 38%, #000 50%, #000 62%, transparent 75%); mask: linear-gradient(transparent 38%, #000 50%, #000 62%, transparent 75%); }
.work__veil i:nth-child(5) { -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); -webkit-mask: linear-gradient(transparent 50%, #000 62%, #000 75%, transparent 88%); mask: linear-gradient(transparent 50%, #000 62%, #000 75%, transparent 88%); }
.work__veil i:nth-child(6) { -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); -webkit-mask: linear-gradient(transparent 62%, #000 75%); mask: linear-gradient(transparent 62%, #000 75%); }
.work__btn { gap: 10px; padding: 0 22px 0 26px; }
.work__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; font-family: "Groteska", sans-serif; font-size: .78rem; color: var(--fg-2); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.work__n:empty { display: none; }
.i-down { transform: rotate(90deg); transition: transform .5s var(--spring); }
.work__more.is-open .i-down { transform: rotate(-90deg); }
.card__link { display: block; border-radius: var(--r); }
.card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.card__link:hover .card__media img { transform: scale(1.035); }
.card__pill {
  position: absolute; inset-inline-start: 14px; bottom: 14px;
  height: 40px; padding: 0 16px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 500; color: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .5s var(--spring);
}
.card__pill .i { width: 15px; height: 15px; }
/* the pill only pays for its glass while it is visible */
.card__pill, .card__pill.lg--refract { -webkit-backdrop-filter: none; backdrop-filter: none; }
.card__link:hover .card__pill, .card__link:focus-visible .card__pill { -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
.card__link:hover .card__pill.lg--refract, .card__link:focus-visible .card__pill.lg--refract { -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); }
.card__link:hover .card__pill, .card__link:focus-visible .card__pill { opacity: 1; transform: none; }
@media (hover: none) { .card__pill { display: none; } }
.card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 16px; }
.card__title { font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.card__cat { font-size: .875rem; color: var(--fg-3); white-space: nowrap; }

/* the last row closes with an invitation instead of an empty gap */
.card--cta { grid-column: span var(--span, 1); display: flex; align-self: start; }
.card--cta.is-hidden { display: none; }
.cta-panel {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 18px;
  min-height: 260px; padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r); background: #09090b; box-shadow: inset 0 0 0 1px var(--line);
}
/* a slice of the profile's arc of light, rising from the corner */
.cta-panel::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 110%; aspect-ratio: 1; inset-inline-end: -52%; top: 38%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(19, 125, 224, .0) 30%, rgba(19, 125, 224, .45) 58%, rgba(136, 9, 181, .6) 74%, rgba(200, 20, 100, .65) 85%, rgba(195, 20, 24, .7) 91%, rgba(247, 106, 14, .85) 96%, rgba(255, 214, 90, 1) 99%, rgba(255, 214, 90, 0) 100%);
  filter: blur(14px);
  opacity: .62;
  transition: opacity .8s var(--ease), transform 1.4s var(--ease-out);
}
.card--cta:hover .cta-panel::before { opacity: .85; transform: translateY(-5%); }
.cta-panel__t { font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; max-width: 16ch; }
.cta-panel__d { color: var(--fg-2); max-width: 34ch; }

/* video work: a block per project, its words beside its videos (as in the headings' split) */
.cards.reel-sets { grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 6vw, 88px); }
.reel-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px 40px; align-items: start; }
.reel-set__name { font-size: clamp(1.25rem, .6vw + 1rem, 1.6rem); font-weight: var(--w-head); letter-spacing: -.022em; line-height: 1.2; }
.reel-set__meta { margin-top: 6px; font-size: .875rem; color: var(--fg-3); }
.reel-set__desc { margin-top: 16px; color: var(--fg-2); max-width: 36ch; }
.reel-set__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.reel { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r); background: var(--surface); }
.reel-set.is-peek .reel { filter: brightness(.72) saturate(.85); }
@media (max-width: 960px) {
  .reel-set { grid-template-columns: minmax(0, 1fr); }
  .reel-set__desc { max-width: 60ch; }
  .reel-set__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* a row to swipe through, the next video peeking in */
  .reel-set__row { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .reel-set__row::-webkit-scrollbar { display: none; }
  .reel { flex: 0 0 62%; width: 62%; min-width: 0; scroll-snap-align: start; }
  /* the folded project goes out of focus, as the photo cards do */
  .reel-set.is-peek .reel-set__info { filter: blur(6px); opacity: .6; }
  .reel-set.is-peek .reel-set__row { filter: blur(22px) brightness(.6) saturate(.75); }
}

/* ==========================================================================
   PRICES
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
.plan { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 30px; border-radius: var(--r-lg); background: rgba(11, 11, 13, .88); border: 1px solid var(--line); transition: border-color .5s var(--ease); }
.plan:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
/* each plan catches a little light of its own colour: a thin reflection along
   the top edge and a soft glow falling into the card */
.plan::before, .plan::after { content: ""; position: absolute; pointer-events: none; z-index: -1; transition: opacity .7s var(--ease); }
.plan::before {
  inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--c) 85%, #fff) 50%, transparent 92%);
  opacity: .55;
}
.plan::after {
  inset: -1px -10% auto; height: 210px;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%);
  opacity: .6;
}
.plan:hover::before { opacity: .9; }
.plan:hover::after { opacity: 1; }
.plan--featured::before { opacity: .8; }
.plan--featured::after { opacity: .85; }
.plan--featured { background: rgba(17, 17, 20, .92); border-color: var(--line-2); }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.plan__name { font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; }
.tier { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); font-family: "Groteska", sans-serif; }
.tier::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.plan__desc { color: var(--fg-2); min-height: 3.3em; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 26px 0; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.plan__num { font-family: "Groteska", sans-serif; font-size: clamp(2.6rem, 3vw + .6rem, 3.4rem); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.plan__unit { font-size: .9rem; color: var(--fg-3); }
.plan__list { display: grid; gap: 12px; flex: 1; align-content: start; margin-bottom: 26px; }
.plan__list li { position: relative; padding-inline-start: 22px; color: var(--fg-2); }
.plan__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 10px; height: 1px; background: var(--fg-3); }
html[lang="ar"] .plan__list li::before { top: .9em; }
.plan__list b { font-family: "Groteska", sans-serif; }
.plan__save { font-size: .875rem; color: var(--fg-2); margin: -8px 0 20px; }
.plan__cta { width: 100%; }

.addons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 24px 40px; align-items: center; margin-top: 16px; padding: 26px 30px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(11, 11, 13, .6); }
.addons__t { font-size: 1.1rem; font-weight: 500; }
.addons__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; }
.addons__list li { display: flex; flex-direction: column; gap: 4px; }
.addons__list li > span:first-child { font-size: .9rem; color: var(--fg-2); line-height: 1.4; }
.addons__p { font-family: "Groteska", sans-serif; font-size: 1.25rem; letter-spacing: -.02em; }
html[lang="ar"] .addons__p { text-align: right; }
.addons__p small { font-family: var(--font); font-size: .8rem; color: var(--fg-3); letter-spacing: 0; }
.prices__note { margin-top: 28px; color: var(--fg-2); }

/* ==========================================================================
   CONTACT — the project brief
   ========================================================================== */
.contact__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 48px clamp(40px, 6vw, 88px); align-items: start; }
.contact__info { position: sticky; top: calc(var(--nav-h) + 28px); }
.contact__title { margin-top: 18px; }
.contact__list { margin-top: 44px; border-top: 1px solid var(--line); }
.contact__list li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact__k { font-size: .875rem; color: var(--fg-3); }
.contact__v { font-size: 1.08rem; overflow-wrap: anywhere; }
[dir="rtl"] .contact__v[dir="ltr"] { text-align: right; }
a.contact__v { transition: opacity .3s; }
a.contact__v:hover { opacity: .7; }
.contact__fb { display: inline-flex; align-items: center; gap: 10px; }
.contact__fb .i { color: var(--fg-2); }

.brief {
  padding: clamp(22px, 3vw, 38px);
  border-radius: 28px;
  background: rgba(11, 11, 14, .78);
  border: 1px solid var(--line);
  box-shadow: 0 50px 100px -60px rgba(0, 0, 0, .9);
}
.brief__step { min-width: 0; margin: 0; padding: 0 0 30px; border: 0; }
.brief__step + .brief__step { padding-top: 28px; border-top: 1px solid var(--line); }
.brief__step::after { content: ""; display: table; clear: both; }
/* a floated legend is laid out like any block, instead of sitting on the fieldset's border */
.brief__q {
  float: left; width: 100%; margin-bottom: 16px; padding: 0;
  display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: center;
  font-size: 1.1rem; font-weight: 500; line-height: 1.3;
}
[dir="rtl"] .brief__q { float: right; }
.brief__q + * { clear: both; margin-top: 0; }
.brief__n {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-family: "Groteska", sans-serif; font-size: .78rem; font-weight: 500; color: var(--fg-2);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.brief__step.is-done .brief__n { background: var(--fg); color: #0a0a0c; box-shadow: none; }
.brief__hint { grid-column: 2; margin-top: 3px; font-size: .875rem; font-weight: 400; line-height: 1.45; color: var(--fg-3); }
.brief__sub { margin-top: 22px; font-size: .9rem; color: var(--fg-2); }
.brief__pkg { animation: rise .5s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip > span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 8px 16px; border-radius: 999px;
  font-size: .9rem; line-height: 1.3; color: var(--fg-2);
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), transform .4s var(--spring);
  pointer-events: none;
}
.chip > span small { font-family: "Groteska", sans-serif; font-size: .8rem; color: var(--fg-3); }
.chip:hover > span { color: var(--fg); background: rgba(255, 255, 255, .06); }
.chip input:active + span { transform: scale(.97); }
.chip input:checked + span {
  color: #fff;
  background: rgba(255, 255, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 1px rgba(255, 255, 255, .3), 0 10px 22px -12px rgba(0, 0, 0, .9);
}
.chip input:checked + span small { color: var(--fg-2); }
.chip input:checked + span::before {
  content: ""; width: 14px; height: 14px; margin-inline-start: -2px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.chip--pkg > span::after { content: ""; order: -1; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.chip--pkg input:checked + span::after { display: none; }
.chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-top: 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__l { font-size: .875rem; color: var(--fg-2); }
.field__l em { font-style: normal; color: var(--fg-3); }
.field input, .field textarea {
  width: 100%; height: 52px; padding: 0 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-2);
  color: var(--fg);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; line-height: 1.55; }
.field textarea::placeholder { color: var(--fg-3); }
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
.field input:focus, .field textarea:focus { outline: none; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.field.is-invalid input { border-color: #ff7a66; }
.brief__step.is-invalid .chip > span { box-shadow: inset 0 0 0 1px rgba(255, 122, 102, .55); }

/* sending: the message as it will arrive in WhatsApp, the button, then what happens next */
.brief__send { padding-top: 28px; border-top: 1px solid var(--line); }
.brief__preview {
  border-radius: 22px;
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.brief__preview-h {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.brief__avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--fg); }
.brief__avatar svg { width: 17px; height: 13px; fill: #060607; }
.brief__to { font-size: .9rem; font-weight: 500; line-height: 1.3; color: var(--fg); }
.brief__preview-l { font-size: .8rem; line-height: 1.3; color: var(--fg-3); text-align: end; }
.brief__thread { padding: 22px 16px 18px; }
.brief__bubble {
  width: fit-content; max-width: min(100%, 470px); margin-inline-start: auto;
  padding: 12px 16px 13px;
  border-radius: 18px; border-end-end-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .065));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 32px -18px rgba(0, 0, 0, .9);
  font-size: .93rem; line-height: 1.6; color: #d4d4d9;
  white-space: pre-wrap; overflow-wrap: anywhere;
  unicode-bidi: plaintext; text-align: start;   /* each line reads in its own direction, as in WhatsApp */
}
.brief__bubble b { font-weight: 500; color: #fff; }
.brief__trim { margin-top: 10px; font-size: .8rem; line-height: 1.45; color: var(--fg-3); text-align: end; }

/* keep ~20px clear above the glass button: its refraction would otherwise bend the error text into its rim */
.form__err { min-height: 1.5em; margin: 6px 0 20px; font-size: .9rem; line-height: 1.5; color: #ff8a73; }
.form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.brief__cta { height: 56px; padding: 0 30px; font-size: 1rem; }
.brief__cta .i, .brief__sent-a [data-wa-again] .i { color: #2bd46d; }
.brief__cta .i { width: 20px; height: 20px; }
.form__note { flex: 1 1 220px; max-width: 34ch; font-size: .85rem; line-height: 1.45; color: var(--fg-3); }

.brief__sent {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 18px 20px 20px; border-radius: 22px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line-2);
  animation: rise .5s var(--ease-out);
}
.brief__sent:focus, .brief__sent:focus-visible { outline: none; }
.brief__sent-i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(43, 212, 109, .14); color: #2bd46d; }
.brief__sent-t { font-weight: 500; line-height: 1.45; }
.brief__sent-d { font-weight: 400; color: var(--fg-2); }
.brief__sent-a { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; }
.brief__sent-a .btn { height: 44px; padding: 0 18px; font-size: .9rem; }
.brief__sent-a .i { width: 17px; height: 17px; }

@media (max-width: 640px) {
  .brief__preview { border-radius: 18px; }
  .brief__preview-h { grid-template-columns: auto minmax(0, 1fr); padding: 10px 14px; }
  .brief__avatar { grid-row: 1 / 3; }
  .brief__preview-l { grid-column: 2; text-align: start; }   /* under the name, like a chat header */
  .brief__thread { padding: 18px 12px 14px; }
  .brief__bubble { font-size: .9rem; padding: 11px 14px 12px; }
  .form__note { flex-basis: 100%; max-width: none; text-align: center; }
  .brief__sent { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
  .brief__sent-i { display: none; }
  .brief__sent-a { grid-column: auto; }
  .brief__sent-a .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { border-top: 1px solid var(--line); padding: 72px 0 28px; }
.footer__top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: 56px; }
.footer__logo { height: 40px; width: auto; aspect-ratio: 800.45 / 202.04; fill: var(--fg); }
.footer__tag { color: var(--fg-2); }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 32px; padding-bottom: 56px; }
.footer__cols a, .footer__cols span { display: block; padding: 4px 0; color: var(--fg-2); width: fit-content; }
.footer__cols a:hover { color: var(--fg); }
.footer__h { font-size: .8rem; color: var(--fg-3); margin-bottom: 10px; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--fg-3); }
.footer__bottom .link { color: var(--fg-2); }

/* floating WhatsApp */
.wa {
  position: fixed; z-index: 40; bottom: 22px; inset-inline-end: 22px;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  color: #2bd46d;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .35s var(--ease), transform .55s var(--spring);
}
.wa svg { width: 26px; height: 26px; }
.wa.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.wa.is-shown:hover { transform: scale(1.06); }

/* ==========================================================================
   CASE VIEWER
   ========================================================================== */
.case {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--fg);
  opacity: 0; transition: opacity .35s var(--ease);
}
.case[open] { display: block; }
.case.is-open { opacity: 1; }
.case::backdrop { background: rgba(0, 0, 0, .7); }
.case__bar { position: absolute; top: 0; inset-inline: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gutter); pointer-events: none; }
.case__bar > * { pointer-events: auto; }
.case__count { font-size: .85rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.case__nav { display: flex; gap: 8px; }
.case__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.case__body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px 56px; max-width: 1560px; margin-inline: auto; padding: 96px var(--gutter) 72px; }
.case__info { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.case__cat { font-size: .875rem; color: var(--fg-3); }
.case__title { font-size: clamp(2rem, 1.6vw + 1.4rem, 3rem); font-weight: var(--w-head); letter-spacing: -.035em; line-height: var(--lh-head); }
.case__desc { color: var(--fg-2); }
.case__meta { width: 100%; border-top: 1px solid var(--line); }
.case__meta > div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.case__meta dt { color: var(--fg-3); }
.case__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; align-items: start; }
.case__gallery img.is-wide { grid-column: 1 / -1; }
.case__gallery img { width: 100%; height: auto; border-radius: var(--r); background: var(--surface); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1120px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__tabs { display: none; }
  .nav__menu { display: grid; }
  /* just the icon from here down; the menu has the full button */
  .nav__signin, [dir="rtl"] .nav__signin { width: 46px; padding: 0; gap: 0; }
  .nav__signin > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .addons { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .label { padding-top: 0; }
  .hero__content { grid-template-columns: minmax(0, 1fr); padding-top: 58vh; }
  .hero__stage { width: min(78vw, 560px); height: 40vh; top: calc(var(--nav-h) + 2vh); }
  .about__more { align-items: start; gap: 40px; }
  .about__name { flex-direction: row; align-items: flex-end; gap: 24px; }
  .row { grid-template-columns: 44px minmax(0, 1fr); }
  .row__d { grid-column: 2; }
  .svc { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .svc__list { min-width: 0; }
  .svc__media { display: none; }
  .svc__more { margin-top: 32px; }
  .axis + .axis { margin-top: 44px; }
  .axis__t { border-bottom: 0; padding-bottom: 0; }
  .axis__items {
    display: flex; gap: 12px; margin-top: 16px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .axis__items::-webkit-scrollbar { display: none; }
  .svc__item {
    flex: 0 0 min(80%, 380px); scroll-snap-align: start;
    display: block; padding: 0 0 22px; border: 0; border-radius: 22px; overflow: hidden; isolation: isolate;
    background: #0b0b0e;
  }
  /* the card's edge, drawn above the render: a hairline ring, lit a little on top */
  .svc__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .07); }
  .svc__item::before, .svc__icon { display: none; }
  /* the render's stage is pure black and its lower part is empty, so the card crops it a little */
  .svc__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
  /* the text area starts as black as the render's stage and eases into the card's surface: no seam */
  .svc__body { position: relative; padding: 12px 20px 0; background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0) 150px); }
  /* a short discipline-coloured rule where the picture meets the text */
  .svc__body::before { content: ""; display: block; width: 22px; height: 2px; margin-bottom: 14px; border-radius: 2px; background: var(--c); opacity: .9; }
  .svc__t { color: var(--fg); }
  .svc__d { color: var(--fg-2); font-size: .95rem; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans { grid-template-columns: 1fr; max-width: 560px; }
  .plan__desc { min-height: 0; }
  .addons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__info { position: static; }
  .case__body { grid-template-columns: 1fr; padding-top: 84px; }
  .case__info { position: static; }
}
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .nav__cta { display: none; }
  .nav__logo svg { height: 22px; }
  .hero__content { padding-top: 52vh; }
  .hero__stage { width: 86vw; height: 34vh; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__foot .hero__scroll { display: none; }
  .about__cols { grid-template-columns: 1fr; }
  .about__name { flex-direction: column; align-items: flex-start; }
  .film__frame { aspect-ratio: 16 / 10; }
  .cards { grid-template-columns: 1fr; gap: 36px; }
  .work__head { gap: 22px; }
  .filters { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .filters.lg::before, .filters.lg::after { display: none; }
  .filters.lg { --lg-lens: inset; }
  .filters.lg, .filters.lg--refract { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 0 .5px rgba(255, 255, 255, .12); }
  .logos img { width: calc(var(--w, 50) * 1.15cqi); }
  .brief { border-radius: 22px; }
  .chip > span { min-height: 40px; padding: 7px 14px; font-size: .875rem; }
  .form__grid { grid-template-columns: 1fr; }
  .form__actions .btn { width: 100%; }
  .contact__list li { grid-template-columns: 1fr; gap: 2px; }
  .addons { padding: 22px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .wa { bottom: 16px; inset-inline-end: 16px; width: 52px; height: 52px; }
  .case__bar { padding: 12px 16px; }
  .case__gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .hero__title, .js .hero__side, .js .hero__foot, .js .hero__eyebrow { opacity: 1; transform: none; }
  .hero__scroll span { animation: none; transform: translateY(14px); }
  .film__frame { transform: none; border-radius: var(--r-lg); }
}