/* SF Pro Display (subset to Latin, 4 weights). 400-500 use Medium, 800-900 use Heavy. */
@font-face { font-family: "SF Pro Display"; font-weight: 400 500; font-style: normal; font-display: swap; src: url("media/fonts/SFProDisplay-Medium.woff") format("woff"); }
@font-face { font-family: "SF Pro Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("media/fonts/SFProDisplay-Semibold.woff") format("woff"); }
@font-face { font-family: "SF Pro Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("media/fonts/SFProDisplay-Bold.woff") format("woff"); }
@font-face { font-family: "SF Pro Display"; font-weight: 800 900; font-style: normal; font-display: swap; src: url("media/fonts/SFProDisplay-Heavy.woff") format("woff"); }
/* ==========================================================
   Tokens — measured from the reference site (see notes in chat)
   Breakpoints: large >=1920 | desktop 1200-1919 | tablet 810-1199 | phone <=809
   ========================================================== */
:root {
  --ink: #0d0d0d;
  --nav-idle: #c5c5c5;
  --nav-hover: #000;
  --btn-light-text: #b8b8b8;
  --btn-dark-text: #e6e6e6;
  --card: #f7f7f7;

  --pad: 50px;            /* side gutter */
  --max: 1450px;          /* content max width (large screens) */
  --top-k: 186px;         /* name top = max(126px, 35vh - k)  (measured at 5 viewport heights) */
  --actions-gap: 12px;    /* tagline -> buttons */

  --name-size: 64px;
  --name-ls: -1.92px;     /* -0.03em */
  --name-lh: 57.6px;      /* 0.9em */
  --tag-lh: 70.4px;       /* 1.1em */

  --frame-pad: 7px;
  --frame-radius: 25px;
  --inner-radius: 20px;
  --media-ratio: 1311 / 802.125;
  --frame-gap: 33px;      /* buttons -> frame */

  --roll-step: 21.5px;    /* measured travel of the text rows on hover */

  /* Hero buttons (measured: 43px at <=1919px, 50px at >=1920px) */
  --btn-h: 43px; --btn-fs: 15px; --btn-ls: -.15px; --btn-lh: 17.25px;
  --btn-pad: 20px; --btn-icon: 16px; --btn-step: 21.5px;
  --roll-ease: cubic-bezier(.65, 0, .35, 1);
  --roll-time: .42s;

  --shadow-soft:
    0 .602187px 3.01094px -.833333px rgba(0,0,0,.05),
    0 2.28853px 11.4427px -1.66667px rgba(0,0,0,.05),
    0 10px 50px -2.5px rgba(0,0,0,.05);
  --shadow-dark:
    0 .602187px 3.01094px -.833333px rgba(0,0,0,.13),
    0 2.28853px 11.4427px -1.66667px rgba(0,0,0,.13),
    0 10px 50px -2.5px rgba(0,0,0,.13);
  --shadow-frame:
    0 .602187px 3.01094px -1.25px rgba(0,0,0,.18),
    0 2.28853px 11.4427px -2.5px rgba(0,0,0,.16),
    0 10px 50px -3.75px rgba(0,0,0,.06);
  --shadow-inner:
    0 .602187px 3.01094px -1.25px rgba(0,0,0,.07),
    0 2.28853px 11.4427px -2.5px rgba(0,0,0,.06),
    0 10px 50px -3.75px rgba(0,0,0,.03);
}

@media (min-width: 1920px) {
  :root {
    --top-k: 233px; --name-size: 84px; --name-ls: -2.52px; --name-lh: 75.6px; --tag-lh: 92.4px;
    --btn-h: 50px; --btn-fs: 18px; --btn-ls: -.18px; --btn-lh: 20.7px;
    --btn-pad: 24px; --btn-icon: 25px; --btn-step: 24.8px;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  :root { --pad: 24px; }
}
@media (max-width: 809.98px) {
  :root {
    --pad: 15px; --top-k: 130.6px; --actions-gap: 10px;
    --name-size: 40.8px; --name-ls: -1.224px; --name-lh: 36.72px; --tag-lh: 37.84px;
    --frame-pad: 4px; --frame-radius: 22px; --media-ratio: 352 / 440; --frame-gap: 31px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter Tight", "Inter", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Visual site: no text selection highlight (as in the reference). Form fields stay selectable/editable. */
body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable=""], [contenteditable="true"],
input *, textarea *, [contenteditable=""] *, [contenteditable="true"] * {
  -webkit-user-select: text;
  user-select: text;
}
::selection { background: transparent; }
input::selection, textarea::selection, [contenteditable=""]::selection, [contenteditable="true"]::selection { background: Highlight; color: HighlightText; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
p, h1 { margin: 0; }
[hidden] { display: none !important; }

/* Lenis (smooth scroll) recommended rules */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Native cursor is replaced only when the custom one is active (JS adds the class) */
html.has-cursor, html.has-cursor * { cursor: none !important; }

.page {
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad) 140px;
}
.anchor { height: 0; scroll-margin-top: 100px; }

/* ---------- Rolling text (two stacked rows, 5px apart) ---------- */
.roll { display: block; height: 17.25px; overflow: hidden; }
.roll__in {
  display: flex; flex-direction: column; gap: 5px;
  transition: transform var(--roll-time) var(--roll-ease);
}
.roll__in > span {
  display: block; white-space: nowrap;
  font-size: 15px; font-weight: 600; line-height: 17.25px; letter-spacing: -.15px;
}

/* ---------- Floating nav ---------- */
.nav {
  position: fixed; top: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: 4px;
}
.nav__avatar, .nav__pill {
  height: 60px; background: #fff; border-radius: 360px; box-shadow: var(--shadow-soft);
}
.nav__avatar {
  width: 60px; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  /* release: slow, soft return with no overshoot */
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}
/* pressed: sinks slightly (the whole button, photo included) with a calmer shadow */
.nav__avatar.is-pressed {
  transform: scale(.94);
  box-shadow:
    0 .6px 3px -.83px rgba(0,0,0,.035),
    0 2.3px 11px -1.67px rgba(0,0,0,.03),
    0 5px 24px -2.5px rgba(0,0,0,.025);
  transition-duration: .14s, .14s;
}
.nav__avatar img { pointer-events: none; -webkit-user-drag: none; }
.nav__avatar img { width: 48px; height: 48px; object-fit: contain; display: block; }
.nav__avatar-ph {
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
}
.nav__pill { display: flex; align-items: center; gap: 13px; padding: 0 30px; }
.nav__pill .roll__in > span:first-child { color: var(--nav-idle); }
.nav__pill .roll__in > span:last-child  { color: var(--nav-hover); }
.nav__pill .roll:hover .roll__in,
.nav__pill .roll:focus-visible .roll__in { transform: translateY(calc(-1 * var(--roll-step))); }

/* ---------- Intro ---------- */
.intro { padding: max(126px, calc(35vh - var(--top-k))) 0 0 1px; }
.intro__name {
  font-size: var(--name-size); font-weight: 700;
  letter-spacing: var(--name-ls); line-height: var(--name-lh);
  color: var(--ink);
}
.intro__tag {
  margin-top: 2px;
  font-size: var(--name-size); font-weight: 600;
  letter-spacing: var(--name-ls); line-height: var(--tag-lh);
  color: var(--ink);
}
.intro__actions { display: flex; align-items: center; gap: 7px; margin-top: var(--actions-gap); }
@media (max-width: 809.98px) {
  .intro__tag { font-size: 34.4px; letter-spacing: -1.032px; }
}

.btn {
  height: var(--btn-h); border-radius: 360px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--btn-fs); font-weight: 600; letter-spacing: var(--btn-ls);
}
.btn--round {
  width: var(--btn-h); background: #fff; color: var(--btn-light-text);
  border: 0 solid #e8e7e6;
  box-shadow: var(--shadow-soft);
  transition: background-color .3s ease, border-width .3s ease;
}
.btn--round:hover, .btn--round:focus-visible { background: #f0f0f0; border-width: 3px; }
.btn--dark {
  gap: 5px; padding: 0 calc(var(--btn-pad) - 1px);
  background: #0f0f0f; color: var(--btn-dark-text);
  border: 1px solid #0f0f0f;
  box-shadow: var(--shadow-dark);
  transition: border-color .3s ease;
}
.btn--dark:hover, .btn--dark:focus-visible { border-color: #171717; }
.btn .roll { height: var(--btn-lh); }
.btn .roll__in > span { font-size: var(--btn-fs); line-height: var(--btn-lh); letter-spacing: var(--btn-ls); }
.btn--dark .roll__in > span { color: var(--btn-dark-text); }
.btn--dark:hover .roll__in, .btn--dark:focus-visible .roll__in { transform: translateY(calc(-1 * var(--btn-step))); }
/* arrow: two copies, the second waits at the bottom-left and slides in diagonally on hover */
.btn__arrow { position: relative; flex: none; width: var(--btn-icon); height: var(--btn-icon); overflow: hidden; display: block; }
.btn__arrow svg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transition: transform var(--roll-time) var(--roll-ease);
}
.btn__arrow svg + svg { transform: translate(-100%, 100%); }
.btn--dark:hover .btn__arrow svg, .btn--dark:focus-visible .btn__arrow svg { transform: translate(100%, -100%); }
.btn--dark:hover .btn__arrow svg + svg, .btn--dark:focus-visible .btn__arrow svg + svg { transform: translate(0, 0); }
/* ---------- Hero frame + media ---------- */
.hero { margin-top: var(--frame-gap); }
.frame {
  background: var(--card);
  border-radius: var(--frame-radius);
  padding: var(--frame-pad);
  box-shadow: var(--shadow-frame);
}
.frame__inner {
  position: relative;
  border-radius: var(--inner-radius);
  overflow: hidden;
  aspect-ratio: var(--media-ratio);
  background: #0a0a0a;
  box-shadow: var(--shadow-inner);
  isolation: isolate;
}
.frame__inner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(60% 55% at 50% 45%, #1c1c1c, #0a0a0a 75%);
  color: #6f6f6f; font-size: 15px; font-weight: 600; letter-spacing: -.15px;
}

/* Media controls: icon sits 20px from the corner, mix-blend difference */
.ctl {
  position: absolute; z-index: 3;
  width: 58px; height: 56px;
  display: grid; place-items: center;
  color: #fdfdfc; mix-blend-mode: difference;
}
.ctl--mute  { right: 0; bottom: 0; padding: 20px 20px 20px 20px; }
.ctl--pause { left: 0;  bottom: 0; display: none; }
.ctl svg { display: block; }
@media (max-width: 809.98px) { .ctl--pause { display: grid; } }

/* ---------- Custom cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 999999; pointer-events: none; display: none; will-change: transform; }
html.has-cursor .cursor { display: block; }
.cursor-tags { position: fixed; left: 0; top: 0; z-index: 999998; pointer-events: none; display: none; will-change: transform; }
html.has-cursor .cursor-tags { display: block; }
.cursor__arrow {
  position: absolute; left: -14px; top: -14px; width: 28px; height: 28px;
  display: grid; place-items: center; will-change: transform;
}
.cursor__scale { width: 100%; height: 100%; display: grid; place-items: center; will-change: transform; }
.cursor__arrow svg { display: block; grid-area: 1 / 1; transition: opacity .14s ease; }
.cursor__arrow svg.is-off { opacity: 0; }
.cursor__tag {
  position: absolute; top: 63px; left: 0;
  opacity: 0; transform: translate(-50%, -50%) scale(.85);
  transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.cursor__tag.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor__tag--reel {
  width: 212px; height: 50px; padding: 0 11px 0 4px;
  display: flex; align-items: center; gap: 35px;
  background: #fafafa; border: 1px solid #e8e8e8; border-radius: 360px;
  box-shadow: var(--shadow-soft);
}
.tag__find {
  flex: none; width: 40px; height: 40px; margin-right: 12px; border-radius: 50%; overflow: hidden;
  display: block; transition: filter .32s cubic-bezier(.25, .8, .25, 1);
}
.tag__find svg { display: block; }
/* paused state (measured): picture dims to 85%, play icon replaces pause, pill gets 7px narrower.
   Timing: the reference uses one spring {damping 55, stiffness 500} for every variant change (~0.3s). */
.cursor__tag--reel.is-paused .tag__find { filter: brightness(.853); }
.tag__avatar {
  flex: none; width: 40px; height: 40px; margin-right: 12px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 700;
}
.tag__icon {
  position: relative; flex: none; width: 24px; height: 24px; color: #000;
  transition: width .32s cubic-bezier(.25, .8, .25, 1);
}
.tag__icon svg {
  position: absolute; left: 50%; top: 50%; display: block; transform: translate(-50%, -50%);
  transition: opacity .22s ease;
}
.tag__icon .t-play { opacity: 0; }
.cursor__tag--reel.is-paused .tag__icon { width: 17px; }
.cursor__tag--reel.is-paused .tag__icon .t-pause { opacity: 0; }
.cursor__tag--reel.is-paused .tag__icon .t-play { opacity: 1; }
.cursor__tag--reel.is-paused { width: 205px; }
.tag__label { flex: none; width: 50px; font-size: 10px; font-weight: 500; letter-spacing: 0; color: #858585; }
.cursor__tag--sound {
  width: 35px; height: 35px; border-radius: 50%;
  display: grid; place-items: center;
  background: #000; color: #fdfdfc;
}

/* ==========================================================
   FEATURED WORK  (measured on the reference at 1440 / 1000 / 390 / 1920)
   section: 80px top, 50px bottom, 50px between hero and section
   left column sticks at top:175px; right column = stacked previews
   ========================================================== */
.work {
  --work-pad: 50px;
  --left-w: 380px;                 /* width of title block */
  --list-w: 380px;                 /* width of the project list */
  --item-fs: 24px; --item-lh: 27.6px; --item-ls: -.24px;
  --desc-fs: 18px; --desc-lh: 20.7px; --desc-ls: -.18px;
  --wt-fs: 48px; --wt-lh: 43.2px; --wt-ls: -.96px;
  --card-gap: 10px;

  margin: 50px calc(-1 * var(--pad)) 0;
  padding: 80px var(--work-pad) 50px;
  display: flex; flex-direction: column; align-items: center; gap: 50px;
  background: #fff;
}
@media (min-width: 1920px) {
  .work {
    --left-w: 526px; --list-w: 380px;
    --item-fs: 32px; --item-lh: 36.8px; --item-ls: -.32px;
    --desc-fs: 21px; --desc-lh: 24.15px; --desc-ls: -.21px;
    --wt-fs: 72px; --wt-lh: 86.4px; --wt-ls: -1.44px;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .work { --work-pad: 35px; --left-w: 350px; --list-w: 350px; }
}
@media (max-width: 809.98px) {
  .work { --work-pad: 20px; gap: 30px; padding-top: 80px; margin-top: 15px; }
}

.work__grid {
  width: 100%; max-width: 1450px;
  display: flex; align-items: stretch;
}
.work__left, .work__right { flex: 1 1 0; min-width: 0; }

/* ---- left column ---- */
.work__left { display: flex; flex-direction: column; align-items: flex-start; gap: 175px; }
.work__sticky-wrap { flex: 1 1 auto; width: var(--left-w); }
.work__sticky {
  position: sticky; top: 175px;
  display: flex; flex-direction: column; gap: 50px;
  width: var(--left-w);
}

.work__title { position: relative; padding: 13px; overflow: clip; }
.work__title h2 {
  margin: 0; font-size: var(--wt-fs); line-height: var(--wt-lh); letter-spacing: var(--wt-ls);
  font-weight: 600; color: #000;
}
.corner { position: absolute; width: 12px; height: 12px; padding: 1px; opacity: .49; display: block; }   /* .7 (wrapper) x .7 (icon) in the reference = light grey */
.corner svg { display: block; width: 10px; height: 10px; overflow: visible; }
.corner--tl { left: 0; top: 0; }
.corner--tr { right: 0; top: 0; transform: scaleX(-1); }
.corner--bl { left: 0; bottom: 0; transform: scaleY(-1); }
.corner--br { right: 0; bottom: 0; transform: rotate(180deg); }

.work__list { width: var(--list-w); will-change: transform; }

.item {
  position: relative; display: block; width: 100%;
  padding: 12px 0 0; background: #fff;
}
/* hover "breathing": the hovered item grows ~4px at the bottom and eases back
   (measured in the recording: the lines below it move down 4px over ~0.3s) */
.item { transition: padding-bottom .3s cubic-bezier(.2, .85, .3, 1); }
@media (hover: hover) {
  .item:hover { padding-bottom: 4px; }
}
.item + .item::before {                       /* divider between items */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(178, 178, 178, .5);
}
.item__title {
  display: block;
  font-size: var(--item-fs); line-height: var(--item-lh); letter-spacing: var(--item-ls);
  font-weight: 600; color: #000;
  opacity: .45;
  transition: opacity .12s ease-out;            /* measured in the recording: the title flips within ~0.1s */
}
.item.is-active .item__title { opacity: 1; }

/* the description area opens/closes without any jump of the items below */
.item__more {
  display: grid; grid-template-rows: 0fr; margin-top: 12px; min-height: 1px;
  transition: grid-template-rows .34s cubic-bezier(.2, .85, .3, 1);   /* text stays visible but clipped while it opens/closes (~0.3s) */
}
.item.is-active .item__more { grid-template-rows: 1fr; }
.item__more-in { overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding-bottom: 0; min-height: 0; }
.item.is-active .item__more-in { padding-bottom: 12px; }
.item__desc {
  display: block;
  font-size: var(--desc-fs); line-height: var(--desc-lh); letter-spacing: var(--desc-ls);
  font-weight: 400; color: #b2b2b2;
}
.item__hint {
  display: block; font-size: 12px; line-height: 14.4px; letter-spacing: -.48px;
  font-weight: 600; color: rgba(0, 0, 0, .35); text-transform: uppercase;
}

.work__all {
  display: flex; align-items: flex-start; gap: 5px; flex: none;
  width: var(--list-w); height: 52.6px; box-sizing: border-box;
  border-top: 1px solid rgb(178, 178, 178); border-bottom: 1px solid rgb(178, 178, 178);
  padding: 11px 0 0; color: #000;
}
/* fixed 24px at every breakpoint (the reference does not scale this one with the list) */
.work__all-row {
  display: flex; align-items: flex-start; gap: 5px;
  transition: transform .32s cubic-bezier(.25, .8, .25, 1);
}
.work__all-text {
  font-size: 24px; line-height: 27.6px; letter-spacing: -.24px; font-weight: 600;
  opacity: .45; transition: opacity .32s cubic-bezier(.25, .8, .25, 1);
}
/* the arrow lives in a 24px window; two copies swap diagonally on hover (as in the recording) */
.work__all-icon {
  position: relative; display: block; width: 24px; height: 24px; flex: none; margin-top: 2.8px;
  overflow: hidden; opacity: .45; transition: opacity .32s cubic-bezier(.25, .8, .25, 1);
}
.work__all-icon svg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transition: transform .32s cubic-bezier(.25, .8, .25, 1);
}
.work__all-icon svg + svg { transform: translate(-100%, 100%); }
/* hover: text and arrow slide ~14px to the right, turn black, arrow rolls */
.work__all:hover .work__all-row, .work__all:focus-visible .work__all-row { transform: translateX(14px); }
.work__all:hover .work__all-text, .work__all:focus-visible .work__all-text,
.work__all:hover .work__all-icon, .work__all:focus-visible .work__all-icon { opacity: 1; }
.work__all:hover .work__all-icon svg, .work__all:focus-visible .work__all-icon svg { transform: translate(100%, -100%); }
.work__all:hover .work__all-icon svg + svg, .work__all:focus-visible .work__all-icon svg + svg { transform: translate(0, 0); }.work__all--phone { display: none; }
.work__title-phone { display: none; }

/* ---- right column ---- */
.work__right { display: flex; flex-direction: column; gap: var(--card-gap); align-items: center; }
.project { width: 100%; }
.project__frame {
  background: var(--card); border-radius: 20px; padding: 5px;
  box-shadow: var(--shadow-frame);
}
.project__media {
  position: relative; display: block; border-radius: 15px; overflow: hidden;
  aspect-ratio: 1.68; background: #0a0a0a;
  box-shadow: var(--shadow-inner);
  isolation: isolate;
}
.project__media::after {                       /* hairline border over the media */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(173, 173, 173, .3);
}
.project__media video, .project__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.project__info { display: none; }

/* ---- cursor label for projects (thumbnail + name + VIEW CASE) ---- */
.cursor__tag--project {
  width: 204px; height: 50px; padding: 0 12px 0 4px;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #ededed; border-radius: 360px;
  box-shadow: var(--shadow-soft);
}
.tag__thumb {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(145deg, #e9e9e9, #bdbdbd);
}
.tag__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tag__title { font-size: 14px; line-height: 1em; letter-spacing: -.01em; font-weight: 400; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag__sub { font-size: 10px; line-height: 1em; letter-spacing: -.03em; font-weight: 500; text-transform: uppercase; color: #949494; }

/* ---- phone: stacked cards, each one sticky with a 50px step ---- */
@media (max-width: 809.98px) {
  .work__title-phone {
    display: block; margin: 0; text-align: center; color: #050505;
    font-size: 40px; line-height: 40px; letter-spacing: -1.6px; font-weight: 600;
  }
  .work__left { display: none; }
  .work__grid { display: block; }
  .work__right { gap: 12px; align-items: stretch; }
  .project {
    position: sticky; background: #fff; border-radius: 19px;
    padding-bottom: 12px; display: flex; flex-direction: column; gap: 10px;
  }
  .project:nth-child(1) { top: 125px; }
  .project:nth-child(2) { top: 175px; }
  .project:nth-child(3) { top: 225px; }
  .project:nth-child(4) { top: 275px; }
  .project__frame { border-radius: 19px; padding: 4px; }
  .project__info { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 0; }
  .project__info h3 { margin: 0; font-size: 24px; line-height: 27.6px; letter-spacing: -.24px; font-weight: 600; color: #000; }
  .project__info p { margin: 0; font-size: 18px; line-height: 20.7px; letter-spacing: -.18px; color: #b2b2b2; }
  .work__all--phone { display: flex; width: 310px; }
}

/* Featured Work title: letters swell and thicken near the pointer ("Text Magnifier" in the reference) */
.work__title h2 { white-space: nowrap; }
.tm-word { display: inline-block; white-space: pre; transform-style: preserve-3d; }
.tm-span {
  display: inline-block; white-space: pre; transform-style: preserve-3d;
  will-change: transform, -webkit-text-stroke-width;
  transform-origin: 50% 50%;
  -webkit-text-stroke-color: currentColor;
}

/* ---- SHOWREEL label: entrance / exit ----
   Fitted to the recording frame by frame (60 fps, width/height of the pill per frame):
   enter: from ~22x20 to 212x50, centred, top edge fixed, about 0.6s with a very sharp ease-out
          (fit of the measured widths: cubic-bezier(.15, 0, 0, 1), rms error 1.7% of the travel).
          It is already fully opaque on the first frame; contents stay left-aligned and are
          revealed (clipped) as the pill widens.
   exit:  contents vanish at once, the empty pill shrinks linearly in ~0.15s and fades at the end.  */
.cursor__tag--reel {
  top: 38px; overflow: hidden;
  width: 22px; height: 20px; opacity: 0;
  transform: translate(-50%, 0);
  transition:
    width .15s linear,
    height .15s linear,
    opacity .05s linear .1s;
}
.cursor__tag--reel.is-on {
  width: 212px; height: 50px; opacity: 1;
  transform: translate(-50%, 0);
  transition:
    width .6s cubic-bezier(.15, 0, 0, 1),
    height .6s cubic-bezier(.15, 0, 0, 1),
    opacity 0s;
}
.cursor__tag--reel.is-on.is-paused { width: 205px; }
.cursor__tag--reel > * { opacity: 0; transition: none; }
.cursor__tag--reel.is-on > * { opacity: 1; }

/* pixel-reveal canvas that sits on top of each project preview */
.px-reveal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; display: block; }
/* 03 manifesto: words reveal with scroll, an easing curve draws itself, timecode runs */
.mf { position: relative; height: 340vh; margin-top: 60px; }
.mf__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mf__curve {
  position: absolute; left: 6vw; right: 6vw; top: 50%; width: 88vw; height: 46vh;
  transform: translateY(-50%); overflow: visible; pointer-events: none;
}
.mf__track, .mf__draw, .mf__handle { fill: none; }
.mf__track { stroke: #e6e6e6; stroke-width: 1.5px; }
.mf__draw { stroke: #111; stroke-width: 1.5px; }
.mf__handle { stroke: #d8d8d8; stroke-width: 1px; stroke-dasharray: 3 5; }
.mf__dot {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #111; box-shadow: 0 0 0 6px rgba(0,0,0,.07); pointer-events: none;
  will-change: transform;
}
.mf__text {
  position: relative; z-index: 2; margin: 0; max-width: 760px; padding: 0 var(--pad);
  text-align: center; font-size: 40px; line-height: 1.12; letter-spacing: -.04em; font-weight: 600;
  text-wrap: balance; -webkit-user-select: none; user-select: none;
}
.mf__text .w { color: #cfcfcf; transition: none; }
.mf__text b { font-weight: 700; }
.mf__rule {
  position: absolute; left: 6vw; right: 6vw; bottom: 9vh; height: 34px;
}
.mf__ticks { position: absolute; inset: 0 0 auto 0; height: 14px; display: flex; justify-content: space-between; }
.mf__ticks i { display: block; width: 1px; height: 7px; background: #cfcfcf; }
.mf__ticks i.big { height: 14px; background: #9a9a9a; }
.mf__head { position: absolute; top: -4px; left: 0; width: 1px; height: 24px; background: #000; }
.mf__tc {
  position: absolute; left: 0; top: 22px; font-size: 12px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: #8a8a8a; font-weight: 500;
}
@media (min-width: 1200px) { .mf__text { font-size: 56px; max-width: 980px; } }
@media (max-width: 809px) { .mf__text { font-size: 30px; } .mf__curve { height: 36vh; } }
.project__media .cover {
  z-index: 2; opacity: 1; filter: blur(0); transform: scale(1);
  transition: opacity .4s cubic-bezier(.4, 0, .2, 1), filter .4s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.2, 0, 0, 1);
  user-select: none; -webkit-user-drag: none;
}
.project__media.is-live .cover { opacity: 0; filter: blur(14px); transform: scale(1.04); }
/* ---------- Liquid glass navigation ---------- */
.nav { --lg-wob: 0deg; --lg-sq: 1; }
.nav__avatar, .nav__pill {
  position: relative; isolation: isolate;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.18) 55%, rgba(255,255,255,.4));
  -webkit-backdrop-filter: blur(10px) saturate(1.9) brightness(1.04);
  backdrop-filter: blur(10px) saturate(1.9) brightness(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 1.5px 2px 1px -.5px rgba(255,255,255,.95),
    inset -1.5px -2px 1px -.5px rgba(255,255,255,.7),
    inset 0 -10px 18px -10px rgba(0,0,0,.07),
    0 0 0 .6px rgba(0,0,0,.05),
    0 8px 28px -6px rgba(0,0,0,.14),
    0 2px 6px rgba(0,0,0,.05);
}
@supports (backdrop-filter: url(#lg-refract)) {
  .nav__pill, .nav__avatar {
    -webkit-backdrop-filter: url(#lg-refract) blur(6px) saturate(1.9) brightness(1.04);
    backdrop-filter: url(#lg-refract) blur(6px) saturate(1.9) brightness(1.04);
  }
}
/* slow specular sheen travelling across the glass */
.nav__pill::after, .nav__avatar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 46%, rgba(255,255,255,.15) 54%, transparent 68%);
  background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: soft-light;
  animation: lg-sheen 7s cubic-bezier(.5, 0, .3, 1) infinite;
}
.nav__avatar::after { animation-delay: .6s; }
@keyframes lg-sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
.nav__pill { transform-origin: 50% 50%; transform: skewX(var(--lg-wob)) scale(1); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.nav__pill.is-down { transform: skewX(var(--lg-wob)) scale(.965, .93); transition-duration: .16s; }
.nav__pill .roll { position: relative; z-index: 2; }
.nav__pill .roll__in > span:first-child { color: #8f8f8f; }
.nav__avatar img { position: relative; z-index: 2; }
/* liquid lens: a small glass drop that flows to the hovered item */
.nav__lens {
  position: absolute; z-index: 1; top: 7px; bottom: 7px; left: 0; width: 0; border-radius: 360px; pointer-events: none;
  opacity: 0; transform: translateX(0) scale(1, 1);
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.35));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset 0 -6px 10px -6px rgba(0,0,0,.08), 0 6px 16px -6px rgba(0,0,0,.18);
  transition: transform .55s cubic-bezier(.34, 1.45, .5, 1), width .55s cubic-bezier(.34, 1.45, .5, 1), opacity .25s ease;
}
.nav__lens.is-on { opacity: 1; }
.nav__lens.is-stretch { transition-duration: .22s, .22s, .25s; transform-origin: 50% 50%; }


/* glass: a bit more presence on white backgrounds */
.nav__avatar, .nav__pill {
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, rgba(228,232,240,.62), rgba(246,247,250,.42) 50%, rgba(214,220,232,.58));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 2px 2.5px 1.5px -1px rgba(255,255,255,1),
    inset -2px -2.5px 2px -1px rgba(120,130,150,.35),
    inset 0 -14px 22px -12px rgba(60,70,95,.16),
    0 0 0 1px rgba(20,28,45,.09),
    0 12px 32px -8px rgba(20,28,45,.24),
    0 3px 8px rgba(20,28,45,.09);
}
.nav__pill .roll__in > span:first-child { color: #7d7d7d; }
.nav__lens {
  background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(255,255,255,.55));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,1), inset 0 -7px 12px -7px rgba(60,70,95,.18), 0 0 0 1px rgba(20,28,45,.06), 0 8px 18px -6px rgba(20,28,45,.28);
}

/* glass: clean version (soft tint, thin edge, gentle shadow) */
.nav__avatar, .nav__pill {
  background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(244,246,250,.46));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 1px 1.5px 1px -.5px rgba(255,255,255,.95),
    0 0 0 .5px rgba(20,28,45,.07),
    0 6px 20px -6px rgba(20,28,45,.14),
    0 1px 3px rgba(20,28,45,.05);
}
.nav__pill .roll__in > span:first-child { color: #8f8f8f; }
.nav__pill::after, .nav__avatar::after { opacity: .55; }
.nav__lens {
  background: rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 4px 12px -5px rgba(20,28,45,.2);
}

/* glass: legible over dark media too (frosted white, brightened backdrop) and safe fallbacks for every browser */
.nav__avatar, .nav__pill {
  background: linear-gradient(160deg, rgba(255,255,255,.84), rgba(248,249,252,.74));
  -webkit-backdrop-filter: blur(14px) saturate(1.5) brightness(1.55);
  backdrop-filter: blur(14px) saturate(1.5) brightness(1.55);
}
@supports (backdrop-filter: url(#lg-refract)) {
  .nav__pill, .nav__avatar {
    -webkit-backdrop-filter: url(#lg-refract) blur(8px) saturate(1.5) brightness(1.55);
    backdrop-filter: url(#lg-refract) blur(8px) saturate(1.5) brightness(1.55);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__avatar, .nav__pill { background: #fff; }
}
.nav__pill .roll__in > span:first-child { color: #7a7a7a; }
.nav__pill .roll__in > span:last-child  { color: #000; }
.nav__lens { background: rgba(255,255,255,.95); }
.project__media img, .nav__avatar img { pointer-events: none; }

/* touch screens: play button shown only while the card video is not playing */
.px-play { position: absolute; left: 14px; bottom: 14px; z-index: 6; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: #0d0d0d; cursor: pointer; -webkit-tap-highlight-color: transparent; background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.55)); -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 18px -8px rgba(0,0,0,.45); opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .35s ease, transform .5s cubic-bezier(.34,1.5,.5,1); }
.px-play.is-on { opacity: 1; transform: none; pointer-events: auto; }
.px-play svg { margin-left: 2px; }
.px-play:active { transform: scale(.92); }

/* project label: the grey drop becomes the project's logo when it has one */
.tag__thumb.has-logo { background-color: transparent; background-size: cover; background-position: center; background-repeat: no-repeat; }
.tag__find--logo { background: transparent; }
.tag__find--logo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

/* logo backgrounds: solid black behind the Spotify logo */
.tag__find--logo { background: #000; }
.tag__find--logo img { transform: scale(.9); }
.tag__thumb.has-logo { background-color: #000; background-size: 90%; }

/* logo fills the whole circle (no ring) */
.tag__find--logo img { transform: scale(1.06); }
.tag__thumb.has-logo { background-size: 106%; }

/* logo: natural size, the circle itself is the green (no crop, no ring) */
.tag__find--logo { background: #1ed760; }
.tag__find--logo img { transform: none; object-fit: contain; width: 100%; height: 100%; }
.tag__thumb.has-logo { background-color: #1ed760; background-size: 101%; background-position: center; }

/* the logo's three bars are transparent in the PNG, so the colour behind it is what shows through: black bars (official look) */
.tag__find--logo { background: #000; }
.tag__find--logo img { transform: scale(1.03); object-fit: cover; }
.tag__thumb.has-logo { background-color: #000; background-size: 103%; background-position: center; }

/* final: logo with the thin black ring (as approved) */
.tag__find--logo { background: #000; }
.tag__find--logo img { transform: scale(.9); object-fit: cover; }
.tag__thumb.has-logo { background-color: #000; background-size: 90%; background-position: center; background-repeat: no-repeat; }

/* project label: same entrance as the SHOWREEL label (grows from a small pill, content fades in; short linear exit) */
.cursor__tag--project {
  top: 38px; overflow: hidden;
  width: 22px; height: 20px; opacity: 0;
  transform: translate(-50%, 0);
  transition:
    width .15s linear,
    height .15s linear,
    opacity .15s linear;
}
.cursor__tag--project.is-on {
  width: 204px; height: 50px; opacity: 1;
  transform: translate(-50%, 0);
  transition:
    width .6s cubic-bezier(.15, 0, 0, 1),
    height .6s cubic-bezier(.15, 0, 0, 1),
    opacity 0s;
}
.cursor__tag--project > * { opacity: 0; transition: none; }
.cursor__tag--project.is-on > * { opacity: 1; }

.cursor__tag--project { transition: width .15s linear, height .15s linear, opacity .05s linear .1s; }
.cursor__tag--project.is-on { transition: width .6s cubic-bezier(.15, 0, 0, 1), height .6s cubic-bezier(.15, 0, 0, 1), opacity 0s; }

/* ==========================================================
   Main page look v2: Apple-style liquid glass, minimal.
   Sizes, spacing and behaviour are untouched; only surfaces change.
   ========================================================== */
:root { --acc: 112, 176, 140; --acc-deep: 46, 66, 56; }
body { background: #f4f6f6; }
body::before {                                    /* very soft colour wash, behind everything */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55vw 42vh at 6% -6%, rgba(var(--acc), .16), transparent 70%),
    radial-gradient(48vw 40vh at 100% 38%, rgba(var(--acc), .10), transparent 70%),
    radial-gradient(60vw 50vh at 28% 112%, rgba(var(--acc), .12), transparent 70%),
    linear-gradient(180deg, #f8fafa, #f1f4f3);
}

/* frames around the showreel and the project previews become frosted glass */
.frame, .project__frame {
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.3));
  -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 -14px 24px -20px rgba(var(--acc-deep), .16),
    0 0 0 .5px rgba(var(--acc-deep), .10),
    0 24px 46px -28px rgba(var(--acc-deep), .36);
}
.frame__inner, .project__media { box-shadow: 0 0 0 .5px rgba(var(--acc-deep), .14), 0 8px 18px -12px rgba(var(--acc-deep), .35); }

/* buttons */
.btn--round {
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.4));
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 18px -12px rgba(var(--acc-deep), .4);
}
.btn--round:hover, .btn--round:focus-visible { background: linear-gradient(180deg, #fff, rgba(255,255,255,.65)); border-width: 0; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #fff, 0 12px 22px -12px rgba(var(--acc-deep), .5); }
.btn--dark {
  background: linear-gradient(180deg, #232826, #0e100f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 22px -12px rgba(var(--acc-deep), .65);
}

/* list of projects: hairlines soften, "View all work" gets a quiet glass drop on hover */
.work__all { border-top-color: rgba(var(--acc-deep), .22); border-bottom-color: rgba(var(--acc-deep), .22); }

/* manifesto: curve and ruler use the soft accent */
.mf__track { stroke: rgba(var(--acc-deep), .14); }
.mf__draw { stroke: rgb(var(--acc-deep)); }
.mf__dot { box-shadow: 0 0 0 6px rgba(var(--acc), .22), 0 6px 16px -4px rgba(var(--acc-deep), .5); }

/* keep fixed layers fixed */
.cursor, .cursor-tags, .nav { position: fixed; }

/* ==========================================================
   Main page look v3: cool ice-lavender accent instead of green, a bit more distinct
   ========================================================== */
:root { --acc: 150, 164, 232; --acc-deep: 52, 60, 104; --acc-warm: 238, 196, 214; }
body { background: #f5f6fa; }
body::before {
  background:
    radial-gradient(52vw 44vh at 4% -8%, rgba(var(--acc), .26), transparent 70%),
    radial-gradient(44vw 38vh at 102% 30%, rgba(var(--acc-warm), .30), transparent 70%),
    radial-gradient(58vw 48vh at 24% 112%, rgba(var(--acc), .20), transparent 70%),
    linear-gradient(180deg, #f9faff, #f2f3f9);
  background-size: 130% 130%, 120% 120%, 130% 130%, 100% 100%;
  animation: bg-drift 36s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  from { background-position: 0% 0%, 100% 40%, 20% 100%, 0 0; }
  to   { background-position: 14% 10%, 86% 56%, 36% 88%, 0 0; }
}
/* frames: rounder, with a faint prismatic rim (cool top-left, warm bottom-right) */
.frame { border-radius: 30px; }
.project__frame { border-radius: 24px; }
.frame, .project__frame {
  background: linear-gradient(165deg, rgba(255,255,255,.72), rgba(236,240,255,.34) 55%, rgba(255,240,246,.4));
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255,255,255,.95),
    inset -1.5px -1.5px 0 rgba(var(--acc-warm), .55),
    inset 0 0 0 1px rgba(var(--acc), .22),
    0 0 0 .5px rgba(var(--acc-deep), .10),
    0 28px 52px -30px rgba(var(--acc-deep), .42);
}
.frame__inner { border-radius: 24px; }
.project__media { border-radius: 19px; }
.btn--round { box-shadow: inset 1.5px 1.5px 0 #fff, inset -1.5px -1.5px 0 rgba(var(--acc-warm), .6), inset 0 0 0 1px rgba(var(--acc), .25), 0 10px 20px -12px rgba(var(--acc-deep), .5); }
.btn--dark { background: linear-gradient(180deg, #2a2d3c, #101119); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(var(--acc), .25), 0 14px 24px -12px rgba(var(--acc-deep), .7); }
.work__all { border-top-color: rgba(var(--acc-deep), .20); border-bottom-color: rgba(var(--acc-deep), .20); }
.mf__draw { stroke: rgb(var(--acc-deep)); }
.mf__dot { background: rgb(var(--acc-deep)); box-shadow: 0 0 0 6px rgba(var(--acc), .28), 0 6px 16px -4px rgba(var(--acc-deep), .55); }

/* ==========================================================
   Main page look v4: more liquid glass (still minimal; no layout change)
   ========================================================== */
/* a large soft glass orb drifting behind the page: it refracts through the glass frames */
body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  width: 34vmin; height: 34vmin; right: 5vw; top: 24vh; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.95), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 70% 80%, rgba(var(--acc-warm), .55), rgba(var(--acc-warm), 0) 60%),
    radial-gradient(circle at 50% 50%, rgba(var(--acc), .34), rgba(var(--acc), .12) 70%);
  box-shadow: inset 2px 3px 2px rgba(255,255,255,.9), inset -4px -6px 14px rgba(var(--acc-deep), .12), 0 30px 60px -30px rgba(var(--acc-deep), .35);
  animation: orb-float 22s ease-in-out infinite alternate;
}
@keyframes orb-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6vw, 12vh) scale(1.12); } }

/* active project in the list sits on a quiet glass card (pseudo-element: no layout shift) */
.item { position: relative; }
.item::before {
  content: ""; position: absolute; z-index: -1; left: -18px; right: -18px; top: -10px; bottom: -8px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 1.5px 1.5px 0 #fff, inset -1.5px -1.5px 0 rgba(var(--acc-warm), .5), 0 0 0 .5px rgba(var(--acc-deep), .10), 0 18px 32px -22px rgba(var(--acc-deep), .4);
  opacity: 0; transform: scale(.97); transition: opacity .45s ease, transform .6s cubic-bezier(.34, 1.4, .5, 1);
}
.item.is-active::before { opacity: 1; transform: none; }

/* gloss over the project previews: a thin highlight, kept very light so the artwork stays true */
.project__media::before {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 28%);
}

/* manifesto: the sentence floats on a glass slab, so the easing curve bends behind it */
.mf__text::before {
  content: ""; position: absolute; z-index: -1; inset: -28px -44px; border-radius: 46px;
  background: linear-gradient(170deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  -webkit-backdrop-filter: blur(14px) saturate(1.7); backdrop-filter: blur(14px) saturate(1.7);
  box-shadow: inset 1.5px 1.5px 0 #fff, inset -1.5px -1.5px 0 rgba(var(--acc-warm), .5), inset 0 0 0 1px rgba(var(--acc), .18), 0 0 0 .5px rgba(var(--acc-deep), .10), 0 30px 60px -34px rgba(var(--acc-deep), .45);
}
@supports (backdrop-filter: url(#lg-refract)) {
  .mf__text::before { -webkit-backdrop-filter: url(#lg-refract) blur(8px) saturate(1.7); backdrop-filter: url(#lg-refract) blur(8px) saturate(1.7); }
}
.mf__text .w { text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.mf__tc {
  padding: 5px 11px; border-radius: 99px; color: rgb(var(--acc-deep));
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(var(--acc-deep), .12), 0 8px 16px -10px rgba(var(--acc-deep), .4);
}
.mf__head { background: rgb(var(--acc-deep)); }

/* Featured Work heading corners: softer, tinted */
.work__title-wrap, .work__corners { color: rgb(var(--acc-deep)); }

.item::before { bottom: -16px; top: -12px; }

/* ==========================================================
   Main page look v5: quieter, more "Apple": signature light grey, neutral materials,
   near-black ink, diffuse shadows, continuous (squircle) corners where supported
   ========================================================== */
:root { --acc: 156, 168, 190; --acc-deep: 34, 40, 54; --acc-warm: 232, 230, 238; --ink-apple: #1d1d1f; }
body { background: #f5f5f7; color: var(--ink-apple); }
body::before {
  background:
    radial-gradient(50vw 40vh at 6% -8%, rgba(var(--acc), .18), transparent 70%),
    radial-gradient(44vw 36vh at 102% 34%, rgba(var(--acc-warm), .55), transparent 70%),
    radial-gradient(56vw 46vh at 26% 112%, rgba(var(--acc), .14), transparent 70%),
    linear-gradient(180deg, #f9f9fb, #f3f3f6);
}
/* the orb: pearly, almost neutral */
body::after {
  width: 30vmin; height: 30vmin;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.98), rgba(255,255,255,0) 44%),
    radial-gradient(circle at 70% 82%, rgba(var(--acc-warm), .7), rgba(var(--acc-warm), 0) 62%),
    radial-gradient(circle at 50% 50%, rgba(var(--acc), .22), rgba(var(--acc), .06) 72%);
  box-shadow: inset 2px 3px 2px rgba(255,255,255,.95), inset -4px -6px 16px rgba(var(--acc-deep), .08), 0 40px 70px -40px rgba(var(--acc-deep), .28);
}
/* materials: white, thin, diffuse shadow (Apple style) */
.frame, .project__frame {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.5));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 0 0 .5px rgba(0,0,0,.06),
    0 1px 2px rgba(0,0,0,.04),
    0 18px 40px -16px rgba(0,0,0,.14);
}
.frame { border-radius: 32px; }
.project__frame { border-radius: 26px; }
.frame__inner { border-radius: 26px; }
.project__media { border-radius: 21px; }
.item::before {
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.06), 0 14px 30px -18px rgba(0,0,0,.2);
}
.mf__text::before {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 .5px rgba(0,0,0,.06), 0 24px 56px -28px rgba(0,0,0,.22);
}
.mf__tc { color: #6e6e73; box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.08), 0 6px 14px -8px rgba(0,0,0,.2); }
.mf__draw { stroke: var(--ink-apple); }
.mf__track { stroke: rgba(0,0,0,.09); }
.mf__dot { background: var(--ink-apple); box-shadow: 0 0 0 6px rgba(0,0,0,.06), 0 6px 14px -4px rgba(0,0,0,.35); }
.mf__head { background: var(--ink-apple); }
/* buttons */
.btn--dark { background: linear-gradient(180deg, #2c2c2e, #1d1d1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 .5px rgba(0,0,0,.4), 0 10px 22px -12px rgba(0,0,0,.55); }
.btn--round { box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.07), 0 8px 18px -12px rgba(0,0,0,.25); }
.work__all { border-top-color: rgba(0,0,0,.12); border-bottom-color: rgba(0,0,0,.12); }
/* nav: slightly whiter, thinner outline */
.nav__avatar, .nav__pill { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(0,0,0,.07), 0 10px 26px -14px rgba(0,0,0,.25); }
/* continuous corners (Apple's "squircle") where the browser supports it */
@supports (corner-shape: squircle) {
  .frame, .frame__inner, .project__frame, .project__media, .item::before, .mf__text::before, .nav__avatar, .nav__pill {
    corner-shape: squircle;
  }
  .frame { border-radius: 44px; } .frame__inner { border-radius: 36px; }
  .project__frame { border-radius: 36px; } .project__media { border-radius: 29px; }
  .mf__text::before { border-radius: 64px; } .item::before { border-radius: 32px; }
}
:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }

/* ==========================================================
   Main page look v6: own signatures (not the reference's brackets / flat black type)
   ========================================================== */
/* 1. "Featured Work": the four corner marks become one soft glass capsule */
.corner { opacity: 0; }
.work__title::before {
  content: ""; position: absolute; inset: 2px 0; border-radius: 26px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.3));
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.07), 0 12px 26px -18px rgba(0,0,0,.25);
}
.work__title h2 { position: relative; }
@supports (corner-shape: squircle) { .work__title::before { corner-shape: squircle; border-radius: 40px; } }

/* 2. list numbering: small raised index after each title */
.work__list { counter-reset: wk; }
.item { counter-increment: wk; }
.item__title::after {
  content: counter(wk, decimal-leading-zero);
  display: inline-block; margin-left: 8px; vertical-align: top; position: relative; top: .1em;
  font-size: .42em; font-weight: 600; letter-spacing: .02em; color: #86868b;
}

/* 3. numbered glass chip on each preview */
.work__right { counter-reset: pj; }
.project__frame { position: relative; counter-increment: pj; }
.project__frame::after {
  content: counter(pj, decimal-leading-zero);
  position: absolute; z-index: 8; left: 18px; top: 18px; pointer-events: none;
  min-width: 34px; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #1d1d1f;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.08), 0 6px 14px -8px rgba(0,0,0,.35);
}

/* 4. tagline in a soft graphite-to-silver gradient instead of flat black */
.intro__tag {
  background: linear-gradient(100deg, #1d1d1f 0%, #3a3a3d 40%, #8e8e93 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* ==========================================================
   Hero buttons v2 (same size and position): liquid highlight that follows the pointer,
   arrow in its own glass disc, "i" that inverts with a ripple ring
   ========================================================== */
.btn--dark, .btn--round { position: relative; isolation: isolate; overflow: hidden; --mx: 50%; --my: 0%;
  transition: transform .5s cubic-bezier(.34, 1.5, .5, 1), box-shadow .3s ease, background-color .3s ease, color .3s ease; }
.btn--dark:active, .btn--round:active { transform: scale(.955, .92); transition-duration: .12s; }

/* dark button */
.btn--dark { background: linear-gradient(180deg, #34363a 0%, #1d1d1f 55%, #131315 100%); }
.btn--dark::before {                             /* highlight under the pointer */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120px 70px at var(--mx) var(--my), rgba(255,255,255,.34), rgba(255,255,255,0) 70%);
  opacity: 0; transition: opacity .35s ease;
}
.btn--dark:hover::before { opacity: 1; }
.btn--dark::after {                              /* slow sheen that crosses the button now and then */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  background-size: 260% 100%; background-position: 140% 0; animation: btn-sheen 7s cubic-bezier(.5, 0, .3, 1) infinite;
}
@keyframes btn-sheen { 0%, 60% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
.btn--dark > * { position: relative; z-index: 1; }
/* the arrow lives in a little glass disc that turns solid white on hover */
.btn--dark .btn__arrow { border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.btn--dark .btn__arrow svg circle { stroke: none; }
.btn--dark:hover .btn__arrow, .btn--dark:focus-visible .btn__arrow { background: #fff; color: #1d1d1f; box-shadow: none; }

/* round "i" button */
.btn--round::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #1d1d1f;
  transform: scale(.2); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.4, .5, 1), opacity .25s ease;
}
.btn--round:hover::before, .btn--round:focus-visible::before { transform: none; opacity: 1; }
.btn--round:hover, .btn--round:focus-visible { color: #fff; }
.btn--round span { display: inline-block; font-weight: 700; transition: transform .5s cubic-bezier(.34, 1.8, .5, 1); }
.btn--round:hover span { transform: scale(1.18); }
.btn--round::after {                             /* ripple ring */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px rgba(29,29,31,.5); opacity: 0;
}
.btn--round:hover::after { animation: btn-ring 1.1s ease-out infinite; }
@keyframes btn-ring { from { transform: scale(1); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }
.btn--round { overflow: visible; }                /* so the ring can leave the circle */
.btn--round::before { overflow: hidden; }

/* v6.1: no small index numbers; every project in the list sits on the same glass card */
.item__title::after { content: none; display: none; }
.project__frame::after { content: none; display: none; }
.item::before { opacity: 1; transform: none; }

/* v6.2: the list's dividers were reusing ::before and fighting the glass card. Every item now has the same
   glass card (same size rules), dividers are replaced by the gaps between cards. */
.item::before, .item + .item::before {
  content: ""; position: absolute; z-index: -1;
  left: -16px; right: -16px; top: 2px; bottom: 2px; height: auto;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.06), 0 12px 24px -16px rgba(0,0,0,.22);
  opacity: 1; transform: none;
}
@supports (corner-shape: squircle) { .item::before, .item + .item::before { corner-shape: squircle; border-radius: 30px; } }
.item { margin-bottom: 6px; }

.item { margin-bottom: 0; }

/* v6.3: list cards without borders or outlines: just a soft frosted fill */
.item::before, .item + .item::before {
  box-shadow: none;
  border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.52));
}

/* v6.4: keep the top and bottom edges (and the soft transition between cards), no edge on the sides */
.item::before, .item + .item::before {
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  box-shadow:
    inset 0 1px 0 #fff,                       /* top highlight */
    0 1px 0 rgba(0,0,0,.07),                  /* bottom hairline */
    0 14px 18px -16px rgba(0,0,0,.24);        /* soft shadow below (negative spread: nothing shows on the sides) */
}

/* v7: list cards as minimal liquid glass: clear frosted body, no hard outline.
   The edge is a gradient rim (light top-left, soft shade bottom-right) that fades to nothing on the sides. */
.item::before, .item + .item::before {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.30));
  -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.03); backdrop-filter: blur(14px) saturate(1.8) brightness(1.03);
  box-shadow: inset 0 -12px 18px -16px rgba(0,0,0,.10), 0 16px 24px -20px rgba(0,0,0,.28);
  border-radius: 24px;
}
@supports (backdrop-filter: url(#lg-refract)) {
  .item::before, .item + .item::before { -webkit-backdrop-filter: url(#lg-refract) blur(8px) saturate(1.8) brightness(1.03); backdrop-filter: url(#lg-refract) blur(8px) saturate(1.8) brightness(1.03); }
}
.item::after, .item + .item::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -16px; right: -16px; top: 2px; bottom: 2px; height: auto; border-radius: 24px; padding: 1.25px;
  background: linear-gradient(150deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 62%, rgba(20,28,45,.14) 100%);
  -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);
  opacity: 1;
}
@supports (corner-shape: squircle) {
  .item::before, .item + .item::before, .item::after, .item + .item::after { corner-shape: squircle; border-radius: 34px; }
}

/* v7.1: a little air between the cards and a gentler rim */
.item::before, .item + .item::before, .item::after, .item + .item::after { top: 5px; bottom: 5px; border-radius: 22px; }
@supports (corner-shape: squircle) {
  .item::before, .item + .item::before, .item::after, .item + .item::after { border-radius: 30px; }
}
.item::after, .item + .item::after {
  background: linear-gradient(150deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 70%, rgba(20,28,45,.07) 100%);
}
.item::before, .item + .item::before { box-shadow: inset 0 -10px 16px -14px rgba(0,0,0,.07), 0 12px 18px -16px rgba(0,0,0,.22); }

/* ==========================================================
   SHOWREEL / VIDEOREEL label as minimal liquid glass (same size, same entrance animation)
   ========================================================== */
.cursor__tag--reel {
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(244,246,250,.42));
  border: 0;
  -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(1.08); backdrop-filter: blur(18px) saturate(1.9) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -10px 16px -14px rgba(0,0,0,.14),
    0 0 0 .5px rgba(0,0,0,.14),
    0 16px 30px -14px rgba(0,0,0,.5);
}
.cursor__tag--reel::after {                      /* rim light: bright at the corners, gone on the long sides */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.25px;
  background: linear-gradient(160deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.85) 100%);
  -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);
}
.cursor__tag--reel .tag__label { color: #48484a; font-weight: 600; letter-spacing: .02em; }
.cursor__tag--reel .tag__icon { color: #1d1d1f; }
.cursor__tag--reel .tag__find { box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 4px 10px -4px rgba(0,0,0,.35); }
@supports (backdrop-filter: url(#lg-refract)) {
  .cursor__tag--reel { -webkit-backdrop-filter: url(#lg-refract) blur(10px) saturate(1.9) brightness(1.08); backdrop-filter: url(#lg-refract) blur(10px) saturate(1.9) brightness(1.08); }
}
@supports (corner-shape: squircle) { .cursor__tag--reel { corner-shape: round; } }

/* SHOWREEL / VIDEOREEL label v2: smoked graphite glass (Apple dark material) with a light rim */
.cursor__tag--reel {
  background: linear-gradient(180deg, rgba(58,58,62,.62), rgba(28,28,30,.55));
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(.9); backdrop-filter: blur(22px) saturate(1.9) brightness(.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -12px 18px -14px rgba(0,0,0,.45),
    0 0 0 .5px rgba(255,255,255,.14),
    0 18px 34px -14px rgba(0,0,0,.55);
}
.cursor__tag--reel::after {
  background: linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.4) 100%);
}
.cursor__tag--reel .tag__label { color: #e5e5ea; font-weight: 600; letter-spacing: .05em; }
.cursor__tag--reel .tag__icon { color: #f5f5f7; }
.cursor__tag--reel .tag__find { box-shadow: 0 0 0 1.5px rgba(255,255,255,.28), 0 6px 14px -6px rgba(0,0,0,.6); }
@supports (backdrop-filter: url(#lg-refract)) {
  .cursor__tag--reel { -webkit-backdrop-filter: url(#lg-refract) blur(14px) saturate(1.9) brightness(.9); backdrop-filter: url(#lg-refract) blur(14px) saturate(1.9) brightness(.9); }
}

/* Apple fire emoji in the SHOWREEL label: no disc, no ring, just the emoji */
.tag__find--emoji { background: transparent; overflow: visible; display: grid; place-items: center; border-radius: 0; box-shadow: none !important; }
.tag__find--emoji img { display: block; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); -webkit-user-drag: none; user-select: none; pointer-events: none;
  transition: transform .5s cubic-bezier(.34, 1.8, .5, 1); }
.cursor__tag--reel.is-on:not(.is-paused) .tag__find--emoji img { animation: ember 2.4s ease-in-out infinite; }
.cursor__tag--reel.is-paused .tag__find--emoji img { filter: grayscale(.4) brightness(.85) drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
@keyframes ember { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.06) rotate(-2.5deg); } }

.tag__find--emoji img { width: 29px; height: 29px; }

/* videos whose picture is wider than the card are shown whole (no crop), on their own flat background colour:
   nothing at the edges gets cut (e.g. the dark arrow button of the Apple video) */
.project__media[data-fit="contain"] { background: var(--media-bg, #0a0a0a); }
.project__media[data-fit="contain"] video { object-fit: contain; }

/* ==========================================================
   Background motion (bg-motion.js): liquid gradient field + frosted glass shapes
   ========================================================== */
body::after { display: none; }                         /* the static orb is replaced by the moving shapes */
body::before { animation: none; background-size: auto; }
.bgx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bgx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(26px) saturate(1.15); transform: scale(1.12); opacity: .95; }
.bgx__shape {
  position: absolute; left: 0; top: 0; will-change: transform;
  background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.14) 55%, rgba(var(--acc, 150,164,232), .16));
  -webkit-backdrop-filter: blur(14px) saturate(1.7); backdrop-filter: blur(14px) saturate(1.7);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.9),
    inset -2px -3px 6px rgba(var(--acc, 150,164,232), .28),
    0 0 0 .5px rgba(var(--acc-deep, 52,60,104), .10),
    0 40px 70px -36px rgba(var(--acc-deep, 52,60,104), .38);
}
.bgx__shape--orb { border-radius: 50%; }
.bgx__shape--tile { border-radius: 30%; }
@supports (corner-shape: squircle) { .bgx__shape--tile { corner-shape: squircle; border-radius: 40%; } }
@media (max-width: 809px) { .bgx__shape:nth-child(n+4) { display: none; } .bgx__canvas { filter: blur(18px); } }

/* the white panels that hid the animated background become transparent: the field and the glass shapes
   now show through the Featured Work area, and the glass cards blur what is behind them */
.work { background: transparent; }
.item { background: transparent; }

/* ==========================================================
   Featured Clients (same structure as the reference; every client censored for now)
   ========================================================== */
.cl { position: relative; max-width: 1100px; margin: 0 auto; padding: 160px 0 140px; }
.cl__head { display: flex; justify-content: center; margin-bottom: 118px; }
.cl__title { position: relative; padding: 13px 22px 14px; text-align: center; }
.cl__title h2 { margin: 0; font-size: 48px; line-height: 43px; font-weight: 600; letter-spacing: -.96px; color: #000; position: relative; }
.cl__sub { margin: 6px 0 0; font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: -.12px; color: #b2b2b2; position: relative; }
.cl__title .corner { position: absolute; }

.cl__stage { position: relative; display: grid; grid-template-columns: 550px 1fr; align-items: start; min-height: 437px; }
.cl__card-wrap { padding: 21px 0 0 27px; }
.cl__card {
  position: relative; display: block; width: 495px; max-width: 100%; height: 295px; border-radius: 15px; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 45%, #232326, #161618 80%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 18px 36px -22px rgba(0,0,0,.45);
  isolation: isolate;
}
.cl__mark { position: absolute; inset: 0; display: grid; place-items: center; filter: blur(7px); opacity: .7; transition: opacity .4s ease; }
.cl__mark i, .cl__mark b, .cl__mark u { position: absolute; display: block; background: #dcdce0; border-radius: 99px; text-decoration: none; transition: width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.cl__mark i { width: var(--c, 60px); height: var(--c, 60px); border-radius: 50%; transform: translate(var(--cx, -92px), 0); }
.cl__mark b { width: var(--w1, 150px); height: 24px; transform: translate(var(--bx, 30px), -14px); }
.cl__mark u { width: var(--w2, 96px); height: 12px; transform: translate(var(--ux, 4px), 14px); opacity: .7; }
.cl__px { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; }
.cl__view {
  display: flex; align-items: center; gap: 5px; margin: 12px 0 0; font-size: 11px; line-height: 12px; font-weight: 600; letter-spacing: -.33px; color: #8f8f8f; text-transform: uppercase;
}
.cl__view svg { opacity: .85; }

.cl__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cl__row { display: block; height: 87px; color: #000; text-decoration: none; cursor: pointer; }
.cl__name {
  --o: .17; --b: 15px; --x: 0px;
  display: inline-block; font-size: 92px; line-height: 87px; font-weight: 800; letter-spacing: -.05em; color: #000; white-space: nowrap;
  opacity: var(--o); filter: blur(var(--b)); transform: translateX(var(--x));
  transition: opacity .35s ease, filter .4s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, filter, transform;
}
@media (max-width: 1199px) {
  .cl { padding: 120px 28px 100px; }
  .cl__stage { grid-template-columns: 1fr; }
  .cl__card-wrap { padding: 0 0 26px; }
  .cl__card { width: 100%; height: auto; aspect-ratio: 1.68; }
  .cl__name { font-size: 64px; }
  .cl__row { height: 62px; }
  .cl__name { line-height: 62px; }
}
@media (max-width: 809px) {
  .cl { padding: 90px 15px 80px; }
  .cl__title h2 { font-size: 34px; line-height: 32px; }
  .cl__name { font-size: 44px; line-height: 48px; }
  .cl__row { height: 48px; }
}

/* censored client card: light card with a dark blurred mark; hover darkens it and shows an eye-off icon (nothing opens) */
.cl__card { background: radial-gradient(75% 75% at 50% 45%, #ececee, #e2e2e5 85%); box-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 18px 36px -24px rgba(0,0,0,.35); cursor: pointer; }
.cl__mark { opacity: .85; filter: blur(5px); }
.cl__mark i { background: #1d1d1f; }
.cl__mark b { background: #8e8e93; }
.cl__mark u { background: #a5a5aa; }
.cl__card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.cl__card:hover::after, .cl__card:focus-visible::after { opacity: .62; }
.cl__eye {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: 48px; height: 48px; margin: -24px 0 0 -24px; pointer-events: none;
  opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .55s cubic-bezier(.34, 1.6, .5, 1);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.cl__card:hover .cl__eye, .cl__card:focus-visible .cl__eye { opacity: 1; transform: none; }
.cl__eye svg { display: block; width: 100%; height: 100%; }

/* a client with a real cover (FODASE): the picture fills the card; no censored mark, no eye, no dark veil */
.cl__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 1; user-select: none; -webkit-user-drag: none; }
.cl__card.is-cover .cl__cover { display: block; transition: opacity .45s ease, filter .45s ease; }
.cl__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 0; pointer-events: none; }
.cl__card.is-cover .cl__video { display: block; }
.cl__card.is-live .cl__cover { opacity: 0; filter: blur(14px); }
.cl__card.is-cover .cl__mark, .cl__card.is-cover .cl__eye { display: none; }
.cl__card.is-cover::after { display: none; }
.cl__card.is-cover { cursor: pointer; }

/* eye icon: same artwork as the reference (almond, ring pupil, cut-out diagonal bar) */
.cl__eye { width: 52px; height: 36.5px; margin: -18px 0 0 -26px; filter: none; }
/* the card travels down the list together with the active row */
.cl__card-wrap { transition: transform .6s cubic-bezier(.22, 1, .36, 1); will-change: transform; }

/* Featured Clients: bigger title, same letter-magnifier as Featured Work */
.cl__title h2 { font-size: 60px; line-height: 54px; letter-spacing: -1.2px; white-space: nowrap; }
.cl__title { padding: 16px 28px 16px; }
.cl__sub { font-size: 13px; margin-top: 8px; }
@media (max-width: 809px) { .cl__title h2 { font-size: 40px; line-height: 38px; } }

/* Featured Clients title: liquid-glass lettering. Graphite-to-frost gradient, a specular highlight that follows
   the pointer, a slow sheen that crosses the word, and a thin glass capsule that lights up behind it. */
.cl__title { --mx: 50%; --my: 50%; --lit: 0; isolation: isolate; }
.cl__title::before {
  content: ""; position: absolute; inset: 4px -6px; z-index: -1; border-radius: 40px; pointer-events: none;
  background: radial-gradient(220px 90px at var(--mx) var(--my), rgba(255,255,255,calc(.55 * var(--lit) + .12)), rgba(255,255,255,.06) 70%);
  -webkit-backdrop-filter: blur(12px) saturate(1.7); backdrop-filter: blur(12px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -10px 18px -14px rgba(20,28,45,.18), 0 0 0 .5px rgba(20,28,45,.08), 0 22px 36px -26px rgba(20,28,45,.4);
  transition: background .2s linear;
}
@supports (corner-shape: squircle) { .cl__title::before { corner-shape: squircle; border-radius: 56px; } }
.cl__title h2 {
  position: relative;
  background-image:
    radial-gradient(150px 70px at var(--mx) var(--my), rgba(255,255,255,calc(.95 * var(--lit))), rgba(255,255,255,0) 100%),
    linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg, #14161d 0%, #2c3550 55%, #6f7ba3 100%);
  background-size: 100% 100%, 260% 100%, 100% 100%;
  background-position: 0 0, 140% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 8px 14px rgba(20,28,45,.22));
  animation: cl-sheen 6.5s cubic-bezier(.5, 0, .3, 1) infinite;
}
@keyframes cl-sheen { 0%, 55% { background-position: 0 0, 140% 0, 0 0; } 100% { background-position: 0 0, -40% 0, 0 0; } }
.cl__sub { color: #8e8e93; }

/* v2: no capsule behind the title; the lettering itself is the glass (translucent body, bright rim, soft depth) */
.cl__title::before { display: none; }
.cl__title h2 {
  background-image:
    radial-gradient(170px 80px at var(--mx) var(--my), rgba(255,255,255,calc(.95 * var(--lit))), rgba(255,255,255,0) 100%),
    linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(190,203,238,.5) 48%, rgba(96,112,170,.62) 100%);
  background-size: 100% 100%, 260% 100%, 100% 100%;
  -webkit-text-stroke: 1.4px rgba(52,64,112,.55);
  filter:
    drop-shadow(0 1.5px 0 rgba(255,255,255,.95))
    drop-shadow(0 -1px 0 rgba(30,40,80,.18))
    drop-shadow(0 14px 18px rgba(52,64,112,.32));
}

/* v3: matches the rest of the site: near-black ink lettering (like "Featured Work"), with a quiet glass finish:
   a soft light that follows the pointer and a slow sheen; no outline, no translucency, no capsule */
.cl__title h2 {
  background-image:
    radial-gradient(150px 60px at var(--mx) var(--my), rgba(255,255,255,calc(.85 * var(--lit))), rgba(255,255,255,0) 100%),
    linear-gradient(110deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #1d1d1f 0%, #1d1d1f 60%, #3a3a3f 100%);
  background-size: 100% 100%, 260% 100%, 100% 100%;
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 10px 14px rgba(0,0,0,.14));
}

/* Featured Clients title v4: same lettering as the "eduzaay.fx" name in the project footers:
   each letter is its own glass drop that swells, rises and glows near the pointer, then settles like liquid */
.cl__title h2 { background: none; -webkit-text-fill-color: initial; color: inherit; animation: none; filter: none; -webkit-text-stroke: 0; }
.cl__title { --glow: 128, 142, 255; --glow-deep: 40, 48, 110; }
.cl__l {
  display: inline-block; will-change: transform, filter; --hot: 0;
  background-image:
    linear-gradient(rgba(var(--glow), var(--hot)), rgba(var(--glow), var(--hot))),
    linear-gradient(180deg, #1d1d1f 0%, #2f3446 55%, #7d86a8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  transform: translateY(calc(var(--hot) * -.08em)) scale(calc(1 + var(--hot) * .2));
  filter: drop-shadow(0 calc(1px + var(--hot) * 9px) calc(2px + var(--hot) * 12px) rgba(var(--glow-deep), calc(.10 + var(--hot) * .32)));
}
.cl__l--gap { display: inline-block; width: .26em; }

/* Featured Clients v5: own identity, same aesthetic.
   - the censored card sits in a frosted glass frame (like the project previews)
   - a liquid glass pill slides behind the active name, stretching between rows */
.cl__card-wrap { padding-left: 21px; padding-top: 15px; }
.cl__card-frame {
  display: block; width: 507px; max-width: 100%; padding: 6px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 .5px rgba(0,0,0,.07), 0 22px 40px -22px rgba(0,0,0,.28);
}
.cl__card-frame .cl__card { width: 495px; max-width: 100%; border-radius: 19px; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
@supports (corner-shape: squircle) { .cl__card-frame { corner-shape: squircle; border-radius: 36px; } .cl__card-frame .cl__card { corner-shape: squircle; border-radius: 29px; } }

.cl__list { position: relative; }
.cl__pill {
  position: absolute; left: -22px; top: 0; z-index: 0; height: 87px; width: 300px; border-radius: 99px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.32));
  -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
  box-shadow: inset 0 1px 0 #fff, inset 0 -8px 14px -12px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.07), 0 18px 28px -20px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(0) scaleY(1);
  transition: transform .55s cubic-bezier(.34, 1.35, .5, 1), width .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.cl__pill.is-on { opacity: 1; }
.cl__row { position: relative; z-index: 1; }
@supports (corner-shape: squircle) { .cl__pill { corner-shape: squircle; border-radius: 60px; } }
@media (max-width: 1199px) { .cl__pill { height: 62px; left: -14px; } .cl__card-frame { width: 100%; } .cl__card-frame .cl__card { width: 100%; } }

/* Featured Clients v6: own composition (mirrored). Title left-aligned, names on the left with a small index
   column, the censored card on the right sliding along the list. Different from the reference's layout. */
@media (min-width: 1200px) {
  .cl { max-width: 1180px; }
  .cl__head { justify-content: flex-start; padding-left: 8px; margin-bottom: 96px; }
  .cl__title { text-align: left; }
  .cl__stage { grid-template-columns: 1fr 540px; column-gap: 32px; }
  .cl__list { order: 1; counter-reset: cln; padding-left: 64px; }
  .cl__card-wrap { order: 2; padding: 15px 0 0 0; justify-self: end; }
  .cl__card-frame { margin-left: auto; }
  .cl__view { justify-content: flex-end; padding-right: 8px; }
  .cl__row { position: relative; counter-increment: cln; }
  .cl__row::before {
    content: counter(cln, decimal-leading-zero);
    position: absolute; left: -64px; top: 28px; font-size: 13px; line-height: 14px; font-weight: 600; letter-spacing: .06em; color: #9a9aa0;
    transition: color .3s ease, transform .5s cubic-bezier(.34, 1.5, .5, 1);
  }
  .cl__row:hover::before, .cl__row.is-hot::before { color: #1d1d1f; transform: translateX(4px); }
  .cl__pill { left: 50px; }
  /* index rail: a thin glass line that the numbers hang from */
  .cl__list::before {
    content: ""; position: absolute; left: 36px; top: 12px; bottom: 12px; width: 1px;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.18) 18%, rgba(0,0,0,.18) 82%, rgba(0,0,0,0));
  }
}

/* v7: no index numbers / rail; the "Featured Clients" title stays centred (the list and the card keep the mirrored layout) */
@media (min-width: 1200px) {
  .cl__head { justify-content: center; padding-left: 0; }
  .cl__title { text-align: center; }
  .cl__row::before, .cl__list::before { content: none; display: none; }
  .cl__list { padding-left: 0; }
  .cl__pill { left: -22px; }
}

.cl__pill { transition: transform .55s cubic-bezier(.34, 1.3, .5, 1), width .5s cubic-bezier(.22, 1, .36, 1), height .5s cubic-bezier(.22, 1, .36, 1), border-radius .5s ease, opacity .3s ease; }

/* Featured Clients v10: back to the big blurred words (all identical, calm), but arranged as a gentle staircase:
   every row steps a little to the right, so the list reads as one flowing diagonal. The glass pill hugs each word. */
@media (min-width: 1200px) {
  .cl__row[data-i="0"] .cl__name { margin-left: 0; }
  .cl__row[data-i="1"] .cl__name { margin-left: 36px; }
  .cl__row[data-i="2"] .cl__name { margin-left: 72px; }
  .cl__row[data-i="3"] .cl__name { margin-left: 108px; }
  .cl__row[data-i="4"] .cl__name { margin-left: 144px; }
}
/* the "O"s of CENSORED are asterisks */
.cl__star { display: inline-block; font-weight: inherit; line-height: 1; transform: translateY(.14em); }

/* floating emoji (Apple artwork supplied by the owner) that live in the background of Featured Clients */
.cl__emojis { position: absolute; inset: -60px -140px; pointer-events: none; z-index: 0; }
.cl__stage, .cl__head { position: relative; z-index: 1; }
.cl__emo {
  position: absolute; left: 0; top: 0; width: var(--s, 64px); height: var(--s, 64px); will-change: transform; user-select: none;
  filter: drop-shadow(0 14px 18px rgba(30,40,80,.22));
}
.cl__emo img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.cl__emo--glass { -webkit-backdrop-filter: none; }
@media (max-width: 1199px) { .cl__emo:nth-child(n+3) { display: none; } }

.cl { overflow-x: clip; overflow-y: visible; }
.cl__emojis { inset: -60px -90px; }

/* emoji, quieter: smaller, a little translucent, with a soft low shadow (fully opaque on hover of the row) */
.cl__emo { opacity: .88; filter: drop-shadow(0 8px 10px rgba(30,40,80,.14)); }

.cl__card-frame { position: relative; }
.cl__emojis { z-index: 3; }
@media (max-width: 1199px) { .cl__emo:nth-child(n+3) { display: none; } }

.cl__emojis, .cl__emo { display: none !important; }

/* the glass pill of the first row sticks out to the left of the list: nothing may clip it
   (the emoji layer that needed the clip is gone) */
.cl { overflow: visible; }
@media (min-width: 1200px) { .cl__list { padding-left: 28px; } }

/* ==========================================================
   Assets & Lab: four columns of tiles drifting at different speeds (parallax), fading at the top and bottom
   ========================================================== */
.al { position: relative; max-width: 1200px; margin: 0 auto; padding: 120px 0 160px; }
.al__head { margin-bottom: 70px; }
.al__grid {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; height: 850px; overflow: hidden;
  padding: 0 50px; box-sizing: border-box;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
}
.al__col { display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.al__tile {
  position: relative; display: block; border-radius: 14px; overflow: hidden; isolation: isolate; cursor: pointer;
  background: linear-gradient(160deg, var(--t1, #f3f3f6), var(--t2, #e4e4ea));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(0,0,0,.08), 0 16px 26px -20px rgba(0,0,0,.28);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
@supports (corner-shape: squircle) { .al__tile { corner-shape: squircle; border-radius: 22px; } }
.al__tile::before {                       /* soft glass sheen */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
}
.al__art { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; }
.al__art i { display: block; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--ink, 29,29,31), .12); filter: blur(.5px); transition: transform .6s cubic-bezier(.34, 1.5, .5, 1); }
.al__tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.1), 0 24px 34px -20px rgba(0,0,0,.4); }
.al__tile:hover .al__art i { transform: scale(1.35); }
.al__tile--dark { --t1: #2a2a2e; --t2: #121214; --ink: 255,255,255; }
.al__tile--dark::before { background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%); }
.al__cap {
  position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column; gap: 3px;
  color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.al__cap b { font-size: 16px; line-height: 14px; font-weight: 600; letter-spacing: -.02em; }
.al__cap span { font-size: 12px; line-height: 11px; font-weight: 600; letter-spacing: .03em; }
.al__tile::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.al__tile:hover::after { opacity: 1; }
.al__tile:hover .al__cap { opacity: 1; transform: none; }
/* a tile that is a real product: the cover fills it, the name and price are always visible over a soft dark base */
.al__tile--product .al__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.al__tile.al__tile--product .al__cap { opacity: 1; transform: none; color: #fff; }
.al__tile.al__tile--product::after { opacity: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 10, .62)); }
.al__tile.al__tile--product::before { opacity: .35; }
/* the shelf: two real products, side by side, in the same glass frame as the project cards */
.al__shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 920px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.al__prod { display: block; color: inherit; text-decoration: none; opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .12s), transform .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .12s); }
.al__shelf.is-wait .al__prod { opacity: 0; transform: translateY(34px); }
.al__prod-frame { display: block; padding: 5px; border-radius: 28px; background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0, 0, 0, .08), 0 26px 44px -26px rgba(0, 0, 0, .38); transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease; }
@supports (corner-shape: squircle) { .al__prod-frame { corner-shape: squircle; border-radius: 40px; } .al__prod-media { corner-shape: squircle; border-radius: 34px; } }
.al__prod-media { position: relative; display: block; aspect-ratio: 1; border-radius: 23px; overflow: hidden; isolation: isolate; background: #0a0a1f; }
.al__prod-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22, 1, .36, 1); -webkit-user-drag: none; user-select: none; }
.al__prod-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(260px 220px at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%); }
.al__prod:hover .al__prod-frame, .al__prod:focus-visible .al__prod-frame { transform: translateY(-5px); box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0, 0, 0, .1), 0 34px 52px -26px rgba(0, 0, 0, .46); }
.al__prod:hover .al__prod-media img { transform: scale(1.035); }
.al__prod:hover .al__prod-shine { opacity: 1; }
.al__prod:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 30px; }
.al__prod-meta { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; padding: 16px 8px 0; }
.al__prod-name { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -.03em; color: #000; }
.al__prod-price { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -.03em; color: #000; text-align: right; }
.al__prod-kind { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.02em; color: #8f8f8f; }
.al__prod-buy { display: inline-flex; gap: 4px; justify-content: flex-end; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.02em; color: #8f8f8f; transition: color .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.al__prod-buy i { font-style: normal; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.al__prod:hover .al__prod-buy { color: #000; transform: translateX(-4px); }
.al__prod:hover .al__prod-buy i { transform: translate(2px, -2px); }
@media (max-width: 809px) { .al__shelf { grid-template-columns: 1fr; gap: 34px; max-width: 460px; padding: 0 15px; } }
@media (max-width: 1199px) { .al { padding: 90px 20px 110px; } .al__grid { padding: 0; } }
@media (max-width: 809px) { .al__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 640px; } .al__col:nth-child(n+3) { display: none; } }

/* Assets & Lab title: iridescent RGB lettering (liquid glass with a rainbow that flows across the letters) */
.al__title .cl__l {
  background-image:
    linear-gradient(rgba(var(--glow), var(--hot)), rgba(var(--glow), var(--hot))),
    linear-gradient(100deg, #ff3b5c, #ff9a1f, #ffe135, #3ddc84, #19c7ff, #4d6bff, #b44dff, #ff3b9a, #ff3b5c);
  background-size: 100% 100%, 420% 100%;
  background-position: 0 0, 0% 0;
  animation: al-rgb 7s linear infinite;
  animation-delay: calc(var(--i, 0) * -.28s);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 calc(6px + var(--hot) * 10px) calc(8px + var(--hot) * 12px) rgba(70, 90, 200, calc(.22 + var(--hot) * .3)));
}
@keyframes al-rgb { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 420% 0; } }

/* Assets & Lab title: faint rainbow at rest (white veil over the RGB), full-strength rainbow near the pointer */
.al__title .cl__l {
  background-image:
    linear-gradient(rgba(255,255,255, calc(.68 - var(--hot) * .68)), rgba(255,255,255, calc(.68 - var(--hot) * .68))),
    linear-gradient(100deg, #ff3b5c, #ff9a1f, #ffe135, #3ddc84, #19c7ff, #4d6bff, #b44dff, #ff3b9a, #ff3b5c);
  background-size: 100% 100%, 420% 100%;
  filter:
    saturate(calc(.8 + var(--hot) * .6))
    drop-shadow(0 1px 0 rgba(255,255,255,.85))
    drop-shadow(0 calc(5px + var(--hot) * 10px) calc(7px + var(--hot) * 12px) rgba(70, 90, 200, calc(.12 + var(--hot) * .34)));
}

/* Assets & Lab title v3: holographic / iridescent finish instead of a plain rainbow: smooth pastel stops on a diagonal,
   a vertical glass sheen on top, and a slow flow. Faint at rest, rich near the pointer. */
.al__title .cl__l {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,calc(.5 - var(--hot) * .3)) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(rgba(255,255,255, calc(.5 - var(--hot) * .5)), rgba(255,255,255, calc(.5 - var(--hot) * .5))),
    linear-gradient(125deg, #ff86c8 0%, #ffb27a 14%, #ffe58a 28%, #9df5c4 43%, #7fd6ff 58%, #8e9cff 72%, #d49bff 86%, #ff86c8 100%);
  background-size: 100% 100%, 100% 100%, 360% 140%;
  background-position: 0 0, 0 0, 0% 30%;
  animation: al-holo 9s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -.45s);
  filter:
    saturate(calc(.9 + var(--hot) * .5))
    drop-shadow(0 1px 0 rgba(255,255,255,.9))
    drop-shadow(0 calc(5px + var(--hot) * 10px) calc(7px + var(--hot) * 12px) rgba(120, 100, 220, calc(.12 + var(--hot) * .3)));
}
@keyframes al-holo { from { background-position: 0 0, 0 0, 0% 20%; } to { background-position: 0 0, 0 0, 100% 80%; } }

/* v3.1: richer colour near the pointer (the previous pastel was too washed even when active) */
.al__title .cl__l {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,calc(.42 - var(--hot) * .42)) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(rgba(255,255,255, calc(.55 - var(--hot) * .55)), rgba(255,255,255, calc(.55 - var(--hot) * .55))),
    linear-gradient(125deg, #ff4fa8 0%, #ff8a3d 14%, #ffd84a 28%, #38e08f 43%, #22b8ff 58%, #5a6bff 72%, #b455ff 86%, #ff4fa8 100%);
  filter:
    saturate(calc(.95 + var(--hot) * .9))
    drop-shadow(0 1px 0 rgba(255,255,255,.9))
    drop-shadow(0 calc(5px + var(--hot) * 10px) calc(7px + var(--hot) * 12px) rgba(110, 90, 230, calc(.12 + var(--hot) * .32)));
}

/* Assets & Lab title: glass-morphism finish like Featured Clients: frosted body (light veil), cool depth in the lower
   half of each letter, hairline white rim and a layered soft shadow so the letters read as glass slabs */
.al__title .cl__l {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,calc(.42 - var(--hot) * .30)) 0%, rgba(255,255,255,0) 46%, rgba(34,40,90,calc(.20 - var(--hot) * .08)) 100%),
    linear-gradient(rgba(255,255,255, calc(.52 - var(--hot) * .46)), rgba(255,255,255, calc(.52 - var(--hot) * .46))),
    linear-gradient(125deg, #ff4fa8 0%, #ff8a3d 14%, #ffd84a 28%, #38e08f 43%, #22b8ff 58%, #5a6bff 72%, #b455ff 86%, #ff4fa8 100%);
  -webkit-text-stroke: .6px rgba(255,255,255,.7);
  filter:
    saturate(calc(.95 + var(--hot) * .85))
    drop-shadow(0 1.5px 0 rgba(255,255,255,.95))
    drop-shadow(0 -1px 0 rgba(40,50,110,.14))
    drop-shadow(0 calc(10px + var(--hot) * 8px) calc(14px + var(--hot) * 10px) rgba(60, 70, 150, calc(.2 + var(--hot) * .22)));
}

/* Assets & Lab title: glass RED with a white shine that sweeps across the word (letter by letter) */
.al__title .cl__l {
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,calc(.38 - var(--hot) * .28)) 0%, rgba(255,255,255,0) 46%, rgba(90,0,12,calc(.24 - var(--hot) * .10)) 100%),
    linear-gradient(rgba(255,255,255, calc(.55 - var(--hot) * .5)), rgba(255,255,255, calc(.55 - var(--hot) * .5))),
    linear-gradient(180deg, #ff4a58, #e0162b);
  background-size: 320% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 160% 0, 0 0, 0 0, 0 0;
  animation: al-shine 4.8s cubic-bezier(.45, 0, .25, 1) infinite;
  animation-delay: calc(var(--i, 0) * .09s);
  filter:
    saturate(calc(1 + var(--hot) * .4))
    drop-shadow(0 1.5px 0 rgba(255,255,255,.95))
    drop-shadow(0 calc(10px + var(--hot) * 8px) calc(14px + var(--hot) * 10px) rgba(150, 10, 30, calc(.22 + var(--hot) * .22)));
}
@keyframes al-shine {
  0%        { background-position: 160% 0, 0 0, 0 0, 0 0; }
  42%, 100% { background-position: -60% 0, 0 0, 0 0, 0 0; }
}

/* Assets & Lab title: normal (full) opacity at rest; no white veil. The pointer only adds depth/shadow and the grow effect. */
.al__title .cl__l {
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 46%, rgba(90,0,12,.22) 100%),
    linear-gradient(180deg, #ff4a58, #d9132a);
  background-size: 320% 100%, 100% 100%, 100% 100%;
  background-position: 160% 0, 0 0, 0 0;
  filter:
    drop-shadow(0 1.5px 0 rgba(255,255,255,.9))
    drop-shadow(0 calc(10px + var(--hot) * 8px) calc(14px + var(--hot) * 10px) rgba(150, 10, 30, calc(.22 + var(--hot) * .22)));
}

/* Assets & Lab placeholders: "Soon" tiles with a travelling shimmer, a breathing label and a pointer-following light */
.al__art i { display: none; }
.al__soon { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.al__soon em {
  font-style: normal; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  padding: 8px 14px 8px calc(14px + .22em); border-radius: 99px; color: rgba(29,29,31,.62);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.08), 0 8px 16px -10px rgba(0,0,0,.3);
  animation: al-breathe 3.6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.al__tile--dark .al__soon em { color: rgba(255,255,255,.7); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 .5px rgba(255,255,255,.14); }
.al__dots { display: flex; gap: 5px; }
.al__dots i { display: block !important; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .25; animation: al-dot 1.4s ease-in-out infinite; color: #1d1d1f; filter: none; }
.al__tile--dark .al__dots i { color: #fff; }
.al__dots i:nth-child(2) { animation-delay: .18s; } .al__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes al-dot { 0%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
@keyframes al-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* shimmer band that crosses the tile; delays are staggered per tile so the grid ripples */
.al__shine { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); background-size: 300% 100%; background-position: 160% 0;
  animation: al-shimmer 5.5s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: var(--d, 0s); mix-blend-mode: soft-light; }
.al__tile--dark .al__shine { mix-blend-mode: screen; opacity: .35; }
@keyframes al-shimmer { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }
/* pointer light */
.al__tile::before { background: radial-gradient(180px 140px at var(--mx, 50%) var(--my, -40%), rgba(255,255,255,.7), rgba(255,255,255,0) 70%), linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%); }
.al__tile--dark::before { background: radial-gradient(200px 160px at var(--mx, 50%) var(--my, -40%), rgba(255,255,255,.22), rgba(255,255,255,0) 70%), linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%); }
.al__tile:hover .al__soon em { animation-play-state: paused; transform: scale(1.1); }

/* ==========================================================
   Footer: the name "eduzaay.fx" as a big glass-red wordmark (same material as the Assets & Lab title),
   links in [brackets], and a soft liquid-glass mound rising from the bottom edge
   ========================================================== */
.ft { position: relative; max-width: 1240px; margin: 0 auto; padding: 150px 0 0; overflow: visible; }
.ft__in { position: relative; z-index: 2; display: grid; grid-template-columns: 250px 1fr 150px 130px; align-items: start; gap: 24px; padding: 0 50px; }
.ft__logo { font-size: 38px; line-height: 1; font-weight: 700; letter-spacing: -.06em; color: #1d1d1f; }
.ft__tag { margin: 20px 0 0; font-size: 13px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: #1d1d1f; max-width: 210px; }
.ft__mail { margin: 24px 0 0; font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; color: #1d1d1f; }
.ft__mail a, .ft__col a { color: #6e6e73; text-decoration: none; transition: color .25s ease, transform .4s cubic-bezier(.34, 1.5, .5, 1); display: inline-block; }
.ft__mail a:hover, .ft__col a:hover { color: #d9132a; transform: translateX(3px); }
.ft__col h4 { margin: 0 0 14px; font-size: 16px; font-weight: 700; letter-spacing: -.03em; color: #1d1d1f; }
.ft__col a { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
.ft__word {
  margin: -42px 0 0; text-align: center; font-size: clamp(110px, 14.5vw, 210px); line-height: .9; font-weight: 800; letter-spacing: -.065em; white-space: nowrap;
  -webkit-user-select: none; user-select: none; cursor: default;
}
.ft__word .ft__l { display: inline-block; --hot: 0; will-change: transform, filter;
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 46%, rgba(90,0,12,.22) 100%),
    linear-gradient(180deg, #ff4a58, #d9132a);
  background-size: 320% 100%, 100% 100%, 100% 100%; background-position: 160% 0, 0 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: al-shine 5.2s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: calc(var(--i, 0) * .1s);
  transform: translateY(calc(var(--hot) * -.05em)) scale(calc(1 + var(--hot) * .08));
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.9)) drop-shadow(0 calc(18px + var(--hot) * 10px) calc(24px + var(--hot) * 12px) rgba(150, 10, 30, calc(.24 + var(--hot) * .2)));
}
.ft__word span.ft__l--fx { opacity: .72; }
/* liquid glass mound at the very bottom */
.ft__mound { position: relative; z-index: 1; height: 260px; margin-top: -40px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); mask-image: linear-gradient(180deg, transparent 0, #000 40%); }
.ft__mound span { position: absolute; left: 50%; bottom: -150px; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.35) 60%, rgba(255,255,255,0));
  -webkit-backdrop-filter: blur(14px) saturate(1.7); backdrop-filter: blur(14px) saturate(1.7);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.9), 0 -20px 60px -30px rgba(217,19,42,.35); }
.ft__mound span:nth-child(1) { width: 78%; height: 300px; }
.ft__mound span:nth-child(2) { width: 46%; height: 190px; bottom: -110px; opacity: .8; box-shadow: inset 0 3px 0 rgba(255,255,255,.9), 0 -16px 50px -26px rgba(217,19,42,.3); }
@media (max-width: 1199px) {
  .ft__in { grid-template-columns: 1fr 1fr; padding: 0 28px; }
  .ft__word { grid-column: 1 / -1; order: -1; margin: 0 0 20px; font-size: clamp(76px, 16vw, 150px); }
  .ft { padding-top: 100px; }
}
@media (max-width: 809px) { .ft__in { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding: 0 20px; } .ft__brand { grid-column: 1 / -1; } .ft__word { font-size: clamp(54px, 20vw, 110px); } }

/* footer sizing fix: the wordmark lives inside the middle column and never pushes the page wider */
.ft { overflow-x: clip; }
.ft__in { grid-template-columns: 230px minmax(0, 1fr) 150px 120px; }
.ft__word { font-size: clamp(64px, 7.4vw, 112px); margin: -6px 0 0; padding-top: 8px; letter-spacing: -.06em; }
.ft__mound { height: 300px; margin-top: 10px; }

/* footer v2: smaller dark name; the glass mound sits flush on the very end of the page (no gap, no floating) */
.ft__logo { font-size: 28px; }
.page { padding-bottom: 0; }
.ft { padding-bottom: 0; margin-bottom: 0; }
.ft__mound { margin-top: 0; height: 270px; -webkit-mask-image: none; mask-image: none; }
.ft__mound span:nth-child(1) { bottom: -120px; }
.ft__mound span:nth-child(2) { bottom: -92px; }

/* tiny credit in the bottom-left, inset from the edges (sits on the glass mound's flank, never on the border) */
.ft__credit {
  position: absolute; z-index: 3; left: 50px; bottom: 28px; margin: 0;
  font-size: 11px; line-height: 12px; font-weight: 500; letter-spacing: -.01em; color: #8e8e93;
}
.ft__credit a { color: inherit; text-decoration: none; transition: color .25s ease; }
.ft__credit a:hover { color: #d9132a; }
/* same credit, mirrored on the right */
.ft__credit--r { left: auto; right: 50px; text-align: right; }
@media (max-width: 809px) { .ft__credit { left: 20px; bottom: 20px; } .ft__credit--r { left: auto; right: 20px; } }

/* footer wordmark: each letter's paint box is widened so nothing is clipped (the f, x and the y descender),
   with negative margins so the spacing does not change; the word is centred in its column */
.ft__word { text-align: center; justify-self: center; width: 100%; }
.ft__word .ft__l { padding: .12em .09em .26em; margin: -.12em -.09em -.26em; }
.ft__word { overflow: visible; }

/* the wordmark sits exactly midway between the left block (brand text) and the right block (Sections):
   the left column hugs its content, so the free column is measured from the real edges */
@media (min-width: 1200px) {
  .ft__in { grid-template-columns: max-content minmax(0, 1fr) max-content max-content; column-gap: 32px; }
  .ft__col + .ft__col { margin-left: 24px; }
  .ft__brand { min-width: 0; }
}

@media (min-width: 1200px) { .ft__word { transform: translateX(-8px); } }

/* Assets & Lab title: pink glass (same finish and shine as before, only the colour changes) */
.al__title .cl__l {
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 46%, rgba(120,10,70,.20) 100%),
    linear-gradient(180deg, #ff7fc2, #f0399b);
  filter:
    drop-shadow(0 1.5px 0 rgba(255,255,255,.9))
    drop-shadow(0 calc(10px + var(--hot) * 8px) calc(14px + var(--hot) * 10px) rgba(220, 40, 130, calc(.24 + var(--hot) * .22)));
}

/* wordmark = link to the top: hand cursor (custom cursor handles it), a thin line that draws under the word,
   and a tiny press on click */
.ft__home { display: inline-block; position: relative; color: inherit; text-decoration: none; cursor: pointer; transition: transform .45s cubic-bezier(.34, 1.5, .5, 1); }
.ft__home::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(217,19,42,0), #d9132a 25%, #ff7a8a 75%, rgba(255,122,138,0));
  transform: scaleX(0); transform-origin: 50% 50%; opacity: 0;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.ft__home:hover::after, .ft__home:focus-visible::after { transform: scaleX(1); opacity: .9; }
.ft__home:active { transform: scale(.985); transition-duration: .1s; }

/* the small dark "eduzaay.fx" is the link to the top; the big wordmark is plain text again */
.ft__home::after { left: 0; right: 0; bottom: -5px; height: 1.5px; }
a.ft__logo { display: inline-block; color: #1d1d1f; text-decoration: none; }
a.ft__logo:hover { color: #1d1d1f; }

/* round button: the Apple ghost emoji instead of the "i" */
.btn--round .btn__emo { display: grid; place-items: center; }
.btn--round .btn__emo img { display: block; width: 24px; height: 24px; object-fit: contain; -webkit-user-drag: none; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); transition: transform .5s cubic-bezier(.34, 1.8, .5, 1); }
.btn--round:hover .btn__emo img, .btn--round:focus-visible .btn__emo img { transform: rotate(-10deg) scale(1.08); }

/* tagline: "flow" is clickable and plays a flow animation (letters ripple + liquid ribbons cross the screen) */
.flow-word { cursor: pointer; display: inline-block; position: relative; }
.flow-word .fw-l { display: inline-block; -webkit-text-fill-color: #3b3b3f; background: none; will-change: transform; }
.flow-word::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: .04em; height: 2px; border-radius: 2px; opacity: 0; transform: scaleX(.2); transform-origin: 0 50%;
  background: linear-gradient(90deg, #7b8cff, #ff7fc2); transition: opacity .3s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.flow-word:hover::after, .flow-word:focus-visible::after { opacity: .8; transform: scaleX(1); }
.flow-canvas { position: fixed; inset: 0; z-index: 60; pointer-events: none; width: 100%; height: 100%; }

.flow-word { -webkit-text-fill-color: #3b3b3f; }
.flow-word .fw-l { all: unset; }

/* "flow": no underline; instead the word lifts and picks up a violet glow on hover. A small hand taps it on click. */
.flow-word::after { content: none !important; display: none !important; }
.flow-word { transition: transform .5s cubic-bezier(.34, 1.5, .5, 1), color .35s ease, text-shadow .35s ease, -webkit-text-fill-color .35s ease; }
.flow-word:hover, .flow-word:focus-visible { -webkit-text-fill-color: #5b57ff; text-shadow: 0 6px 18px rgba(91, 87, 255, .35); transform: translateY(-3px) scale(1.04); }
.flow-hand { position: fixed; z-index: 80; width: 38px; height: 38px; pointer-events: none; margin: 0; opacity: 0; transform: translate(-50%, 0) scale(.7); transition: opacity .25s ease; }
.flow-hand svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.flow-hand.is-on { opacity: 1; }
.flow-hand.is-tap { animation: flow-tap .55s cubic-bezier(.3, 0, .2, 1); }
@keyframes flow-tap { 0% { transform: translate(-50%, -6px) scale(1); } 40% { transform: translate(-50%, 8px) scale(.82); } 100% { transform: translate(-50%, 0) scale(1); } }

/* "flow" hover: a gust of wind. No colour change; the letters lean and sway as if blown, and thin air streaks
   slide past the word. (Removes the previous violet hover.) */
.flow-word:hover, .flow-word:focus-visible { -webkit-text-fill-color: #3b3b3f; text-shadow: none; transform: none; }
.flow-word .fw-l { all: unset; display: inline-block; -webkit-text-fill-color: #3b3b3f; transform-origin: 50% 90%; }
.flow-word:hover .fw-l, .flow-word:focus-visible .fw-l { animation: fw-wind 1.5s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--k, 0) * .09s); }
@keyframes fw-wind {
  0%   { transform: translateX(0) skewX(0) rotate(0); }
  25%  { transform: translateX(4px) skewX(-14deg) rotate(2deg); }
  55%  { transform: translateX(1px) skewX(-6deg) rotate(.5deg); }
  80%  { transform: translateX(-1px) skewX(3deg) rotate(-1deg); }
  100% { transform: translateX(0) skewX(0) rotate(0); }
}
.flow-word::before, .flow-word::after {
  content: ""; display: block !important; position: absolute; height: 1.5px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(60,70,120,0), rgba(60,70,120,.45), rgba(60,70,120,0));
}
.flow-word::before { left: -28%; width: 60%; top: 28%; }
.flow-word::after  { left: -40%; width: 80%; top: 70%; bottom: auto; transform: none; transition: none; }
.flow-word:hover::before { animation: fw-streak 1.5s cubic-bezier(.4, 0, .4, 1) infinite; }
.flow-word:hover::after  { animation: fw-streak 1.5s cubic-bezier(.4, 0, .4, 1) .35s infinite; }
@keyframes fw-streak { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(220%); } }

/* censored marks are inline SVGs now (one per client), kept blurred; the card tone varies slightly */
.cl__mark { display: grid; place-items: center; filter: blur(5px); opacity: .9; }
.cl__mark svg { width: 62%; height: auto; display: block; transition: transform .6s cubic-bezier(.34, 1.4, .5, 1); }
.cl__card:hover .cl__mark svg { transform: scale(1.06); }
.cl__card { background: radial-gradient(75% 75% at 50% 45%, var(--card-tone, #ececee), color-mix(in srgb, var(--card-tone, #ececee) 88%, #7a7a85) 100%); }

.flow-hand { display: none !important; }

/* performance: the big costs were a full-screen blur on the animated canvas (redone every frame), a backdrop blur
   on each of the 5 moving background shapes, and the SVG refraction on large / repeated glass layers.
   The canvas is already low-res and smooth, the shapes sit on a smooth gradient, so the look barely changes. */
.bgx__canvas { filter: none; transform: none; }
.bgx__shape { -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports (backdrop-filter: url(#lg-refract)) {
  .item::before, .item + .item::before { -webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.03); backdrop-filter: blur(8px) saturate(1.8) brightness(1.03); }
  .mf__text::before { -webkit-backdrop-filter: blur(8px) saturate(1.7); backdrop-filter: blur(8px) saturate(1.7); }
}
@media (max-width: 809px) { .bgx__canvas { filter: none; } }

/* hero showreel is a 16:9 video: the frame follows it so nothing is cropped */
:root { --media-ratio: 16 / 9; }

/* Explicit media clipping for Safari's separately composited video layers. */
.frame__inner, .project__media, .pl__media, .pj__media, .cl__card, .al__prod-media {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.frame__inner > video, .project__media > video, .project__media > img,
.pl__media > video, .pl__media > img, .pj__media > video, .pj__media > img {
  border-radius: inherit;
  corner-shape: inherit;
}
/* The desktop four-column override must not create implicit columns on phones. */
@media (max-width: 1199px) {
  .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__in > * { min-width: 0; }
  .ft__word { grid-column: 1 / -1; width: 100%; min-width: 0; margin: 0 0 20px; font-size: clamp(44px, 12vw, 112px); line-height: 1.15; }
  .ft__mail a { max-width: 100%; overflow-wrap: anywhere; }
}
@media (hover: none), (pointer: coarse) {
  .ft__word .ft__l { animation: none; filter: none; transform: none; will-change: auto; }
}