/*
  Draft L shared layer. Header, menu, reveals, plates and the tracker live here so
  the homepage, the all-work page and every case study move the same way.

  Scroll grammar, combined from the two studies:
  - Lusion: smooth native scroll, big titles whose words rise and rotate in,
    a header that inverts over dark content, pinned scenes the camera pushes into.
  - noth.in: masked line reveals, images that wipe up from the bottom with a slow
    inner parallax, rules that draw themselves, spaced sticky words.
  - Speed: --vel (-1 to 1) follows scroll velocity, so plates skew, round off and
    let their devices lag behind when you scroll fast, then settle when you stop.
*/
@property --accent { syntax: '<color>'; inherits: true; initial-value: #5b2eff; }

:root {
  --page: #f1f0f6;
  --panel: #ffffff;
  --ink: #0e0e12;
  --ink-2: #4a4857;
  --ink-3: #8b8998;
  --line: #dddbe6;
  --pill: #e4e2ec;
  --dark: #131219;
  --dark-2: #24222e;
  --violet: #5b2eff;
  --orange: #ff7a1a;
  --pink: #ff4f8b;
  --lime: #d4f53c;
  --blue: #2f6bff;
  --mint: #00b88a;
  --accent: #5b2eff;

  --pad: clamp(16px, 2.2vw, 32px);
  --radius: 20px;
  --ease: cubic-bezier(.4, 0, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);

  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: var(--sans); /* one typeface across the site */

  --vel: 0;
  --vela: 0;
  transition: --accent .9s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--pad); top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; transition: top .2s;
}
.skip:focus { top: 12px; }
.caps { font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
.mono { font-family: var(--sans); font-weight: 500; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
/* noth.in's parenthetical label */
.label { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: -.005em; }

.on-dark .label { color: rgba(255,255,255,.55); }

/* ------------------------------------------------------------ reveals */
/* Big titles: words rise and rotate out of a mask (Lusion) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; transform-origin: 0 100%; }
.js-motion .wi { transform: translateY(1.1em) rotate(8deg); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.js-motion .is-in .wi { transform: none; }

/* Body copy: lines rise out of a mask together (noth.in). Words are measured into lines. */
.lw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.lwi { display: inline-block; }
.js-motion [data-lines] .lwi { transform: translateY(105%); transition: transform 1s var(--ease-io); transition-delay: calc(var(--l, 0) * 60ms + var(--d, 0ms)); }
.js-motion [data-lines].is-in .lwi { transform: none; }

/* Visuals wipe up from the bottom, with the content inside drifting slower (noth.in) */
.js-motion [data-clip] { overflow: clip; clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.2s var(--ease-io); transition-delay: var(--d, 0ms); }
.js-motion [data-clip].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js-motion [data-clip] > * { translate: 0 12%; scale: 1.06; transition: translate 1.6s var(--ease-out), scale 1.6s var(--ease-out); transition-delay: var(--d, 0ms); }
.js-motion [data-clip].is-in > * { translate: none; scale: none; }

/* Rules draw left to right */
.js-motion [data-sep] { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease-io); }
.js-motion [data-sep].is-in { transform: none; }

/* Small things fade and lift */
.js-motion [data-fade] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.js-motion [data-fade].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------- header */
/* Two stacked copies of the wordmark. The ink copy uses difference blending so it reads
   black on light and white on dark, splitting mid-letter over an edge. The paint copy sits
   on top, invisible until a letter is hovered and takes the next colour in the palette. */
.brand, .brand-paint {
  position: fixed; left: var(--pad); top: calc(18px + env(safe-area-inset-top, 0px)); z-index: 60; height: 44px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 20px; letter-spacing: -.04em; line-height: 1;
}
.brand { color: #fff; mix-blend-mode: difference; }
.brand-paint { pointer-events: none; z-index: 61; color: transparent; }
.brand svg, .brand-paint svg { width: 22px; height: 22px; flex: none; }
.brand-paint svg { visibility: hidden; }
.brand .ch, .brand-paint .ch { display: inline-block; transition: color .5s var(--ease); }
.brand .ch.is-lit { color: #000; transition: none; }
.brand-paint .ch.is-lit { transition: none; }
.brand .sp, .brand-paint .sp, [data-name] .sp { display: inline-block; width: .28em; }
[data-name] .ch { display: inline-block; transition: color .6s var(--ease); }
[data-name] .ch.is-lit { transition: none; }

.header-actions {
  position: fixed; right: var(--pad); top: calc(18px + env(safe-area-inset-top, 0px)); z-index: 62;
  display: flex; gap: 8px;
}
.pill {
  height: 44px; padding: 0 20px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  position: relative; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.pill-dark { background: var(--dark-2); color: #fff; }
.pill-light { background: var(--pill); color: var(--ink); }
.pill-white { background: #fff; color: var(--ink); }
.pill-violet { background: var(--violet); color: #fff; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform .3s var(--ease); }
.pill .dots { display: inline-flex; gap: 4px; transition: transform .4s var(--ease); }
.pill .dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill .label-t { display: inline-block; transition: transform .3s var(--ease); }
.pill .arrow { position: absolute; left: 18px; width: 14px; height: 14px; transform: translateX(-30px); transition: transform .3s var(--ease); }
@media (hover: hover) {
  .pill-dark:hover { background: var(--violet); }
  .pill-dark:hover .label-t { transform: translateX(14px); }
  .pill-dark:hover .arrow { transform: none; }
  .pill-dark:hover .dot { transform: scale(0); }
  .pill-light:hover .dots, .pill-white:hover .dots { transform: rotate(180deg); }
  .pill-white:hover, .pill-light:hover { background: var(--ink); color: #fff; }
  .pill-violet:hover { background: var(--ink); }
}
.menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }
.menu-btn[aria-expanded="true"] .dots { transform: rotate(270deg); }

/* -------------------------------------------------------------- menu */
.menu {
  position: fixed; top: 74px; right: var(--pad); z-index: 59;
  width: min(400px, calc(100vw - 2 * var(--pad)));
  max-height: calc(100dvh - 90px); overflow: auto; overscroll-behavior: contain;
  display: grid; gap: 8px; pointer-events: none; border-radius: 16px;
}
.menu-card {
  border-radius: 16px; padding: 22px;
  opacity: 0; transform: translateY(-16px) scale(.98);
  transition: opacity .45s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--n) * 40ms);
}
.menu.is-open { pointer-events: auto; }
.menu.is-open .menu-card { opacity: 1; transform: none; }
.menu-card.links { background: #fff; padding: 10px; }
.menu-card.links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 10px;
  font-size: 26px; font-weight: 500; letter-spacing: -.03em; text-transform: none;
  transition: background-color .25s var(--ease);
}
.menu-card.links a[aria-current="page"] { color: var(--violet); }
.menu-card a:hover, .menu-card a:focus-visible { background: color-mix(in oklab, var(--violet) 9%, white); }
.menu-card.links a span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.menu-card.projects { background: #fff; padding: 18px 10px 10px; }
.menu-card.projects > .label { display: block; padding: 0 14px 8px; }
.menu-card.projects ul { list-style: none; margin: 0; padding: 0; }
.menu-card.projects li a {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 8px 14px 8px 8px; border-radius: 10px; transition: background-color .25s var(--ease);
}
.menu-card.projects .sw {
  width: 44px; height: 44px; border-radius: 12px; background: var(--bg); position: relative; overflow: hidden;
}
.menu-card.projects .sw::after {
  content: ""; position: absolute; left: 30%; top: 22%; width: 40%; height: 92%;
  border-radius: 6px; background: #0e0e12; box-shadow: inset 0 0 0 2px #0e0e12, inset 0 0 0 30px #eceaf2;
  transform: rotate(-8deg);
}
.menu-card.projects b { display: block; font-weight: 600; font-size: 16px; letter-spacing: -.01em; line-height: 1.2; }
.menu-card.projects small { color: var(--ink-3); font-size: 13px; }
.menu-card.projects em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.menu-card.projects .all {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; padding: 14px; border-radius: 10px; border-top: 1px solid var(--line);
  font-weight: 600;
}
.menu-card.now { background: var(--violet); color: #fff; }
.menu-card.now .label { color: rgba(255,255,255,.7); }
.menu-card.now p { margin: 8px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.menu-scrim {
  position: fixed; inset: 0; z-index: 58;
  background: linear-gradient(90deg, rgba(241,240,246,0) 20%, rgba(241,240,246,.8));
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.menu-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------ plates */
/* A plate is a coloured studio field with devices standing in it. Screens are
   placeholders until the real renders exist: swap any .ph for an <img>. */
.plate {
  --bg: var(--violet);
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: var(--ar, 16 / 10);
  border-radius: calc(var(--radius) + var(--vela) * 26px);
  background: var(--bg);
  transform: skewY(calc(var(--vel) * 2.2deg)) scale(calc(1 - var(--vela) * .035));
  will-change: transform;
}
.plate.is-light { --chip-bg: #fff; }
.dev {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  transform: translate(-50%, 0) rotate(var(--r, 0deg)) translateY(calc(var(--vel) * -40px * var(--z, 1)));
  transition: transform 1.1s var(--ease-out);
  filter: drop-shadow(0 30px 40px rgba(10, 8, 30, .35)) drop-shadow(0 6px 10px rgba(10, 8, 30, .2));
}
.dev.phone { aspect-ratio: 9 / 19.2; background: #0e0e12; border-radius: 15% / 7%; padding: calc(var(--w) * .034); }
.dev.tablet { aspect-ratio: 4 / 3; background: #0e0e12; border-radius: 6% / 8%; padding: calc(var(--w) * .022); }
.dev.desk { aspect-ratio: 16 / 10; background: #0e0e12; border-radius: 3% / 5%; padding: calc(var(--w) * .014); }
.scr { width: 100%; height: 100%; border-radius: 12% / 5.6%; overflow: hidden; background: #f4f3f8; position: relative; }
.dev.tablet .scr { border-radius: 4% / 5.4%; }
.dev.desk .scr { border-radius: 2% / 3%; }
.scr > img { width: 100%; height: 100%; object-fit: cover; }
/* placeholder screen: a quiet app skeleton plus a label saying what goes here */
.ph {
  position: absolute; inset: 0; background: #f2f1f7;
  background-image:
    linear-gradient(#e2e0ea, #e2e0ea), linear-gradient(#e7e5ee, #e7e5ee),
    linear-gradient(#e7e5ee, #e7e5ee), linear-gradient(#e7e5ee, #e7e5ee),
    linear-gradient(color-mix(in oklab, var(--tone, #5b2eff) 22%, #f2f1f7), color-mix(in oklab, var(--tone, #5b2eff) 22%, #f2f1f7));
  background-size: 46% 3.4%, 86% 22%, 86% 14%, 86% 14%, 86% 7%;
  background-position: 9% 9%, 50% 19%, 50% 47%, 50% 66%, 50% 90%;
  background-repeat: no-repeat;
}
.dev.tablet .ph, .dev.desk .ph {
  background-size: 22% 6%, 26% 70%, 66% 30%, 66% 34%, 30% 8%;
  background-position: 4% 6%, 4% 80%, 92% 20%, 92% 82%, 92% 4%;
}
.chip {
  position: absolute; left: var(--x); top: var(--y); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 14px; border-radius: 999px;
  background: var(--chip-bg, rgba(255,255,255,.94)); color: var(--ink);
  font: 500 clamp(11px, .9vw, 13px)/1 var(--mono);
  box-shadow: 0 14px 30px -12px rgba(10, 8, 30, .45);
  transform: translate(-50%, 0) rotate(var(--r, 0deg)) translateY(calc(var(--vel) * -80px));
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--mint)); flex: none; }
.plate-tag {
  position: absolute; left: 18px; top: 18px; z-index: 4;
  height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center;
  background: rgba(255,255,255,.9); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.plate-tag.ghost { background: rgba(14,14,18,.5); color: #fff; }
@media (hover: hover) {
  a:hover > .plate-wrap .dev, a:hover .plate .dev { transform: translate(-50%, -3%) rotate(calc(var(--r, 0deg) * .6)); }
}

/* ----------------------------------------------------------- tracker */
/* Case-study progress. A rail of chapter ticks on the right edge (Lusion's scroll indicator,
   made legible). Difference blending keeps it readable over light and dark sections. */
.tracker {
  position: fixed; right: calc(var(--pad) - 6px); top: 50%; z-index: 57;
  transform: translateY(-50%); mix-blend-mode: difference; color: #fff;
  opacity: 0; transition: opacity .5s var(--ease);
}
.tracker.is-on { opacity: 1; }
.tracker ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tracker a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 18px; padding: 0 6px; }
.tracker a b {
  font: 500 12px/1 var(--mono); white-space: nowrap; opacity: 0; transform: translateX(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.tracker a i { display: block; width: 12px; height: 2px; background: currentColor; opacity: .45; transition: width .4s var(--ease), opacity .3s; }
.tracker a.is-done i { opacity: .8; }
.tracker a[aria-current="true"] i { width: 34px; opacity: 1; }
.tracker.flash a[aria-current="true"] b, .tracker:hover a b { opacity: 1; transform: none; }
.tracker:hover a:not([aria-current="true"]) b { opacity: .6; }
.tracker-mini { display: none; }
@media (max-width: 1000px) {
  .tracker { display: none; }
  .tracker-mini {
    position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 57;
    transform: translate(-50%, 140%); transition: transform .5s var(--ease);
    display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 16px; border-radius: 999px;
    background: rgb(19,18,25); color: #fff;
    font: 500 12px/1 var(--mono); max-width: calc(100vw - 32px);
  }
  .tracker-mini.is-on { transform: translate(-50%, 0); }
  .tracker-mini .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tracker-mini .ring { width: 28px; height: 28px; flex: none; }
  .tracker-mini .ring circle { fill: none; stroke-width: 3; }
}

/* ------------------------------------------------------- name footer */
.bigname {
  display: block; margin: 0; padding: 0 var(--pad);
  font-size: clamp(56px, 15.4vw, 252px); font-weight: 700; letter-spacing: -.065em; line-height: .82;
  white-space: nowrap; overflow: hidden; color: var(--ink); user-select: none;
}

/* -------------------------------------------------------- next strip */
.next-case {
  margin: 0 var(--pad) var(--pad); padding: 28px clamp(24px, 3vw, 44px);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px;
  background: var(--dark); color: #fff; border-radius: var(--radius);
}
.next-case .label { color: rgba(255,255,255,.55); }
.next-case strong { display: block; margin-top: 6px; font-size: clamp(28px, 4vw, 64px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.next-case .arrow {
  width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ink);
  display: grid; place-items: center; transition: background-color .3s var(--ease), color .3s, transform .5s var(--ease-out);
}
.next-case:hover .arrow { background: var(--violet); color: #fff; transform: rotate(-45deg); }
.next-case .arrow svg { width: 24px; height: 24px; }

@media (max-width: 812px) {
  .brand, .brand-paint { top: calc(14px + env(safe-area-inset-top, 0px)); height: 40px; font-size: 18px; }
  .header-actions { top: calc(14px + env(safe-area-inset-top, 0px)); }
  .pill { height: 40px; padding: 0 16px; font-size: 12px; }
  .header-actions .pill-dark { display: none; }
  .menu { top: 64px; right: 8px; width: calc(100vw - 16px); }
  .menu-scrim { background: rgba(91, 46, 255, .92); backdrop-filter: none; }
  .menu-card.links a { font-size: 24px; }
  .plate-tag { left: 12px; top: 12px; }
  .next-case { margin: 0 8px 8px; }
  .next-case .arrow { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .plate, .dev, .chip { transform: none; }
  .dev { transform: translate(-50%, 0) rotate(var(--r, 0deg)); }
  .chip { transform: translate(-50%, 0) rotate(var(--r, 0deg)); }
}

/* ------------------------------------------------- scroll indicator */
/* Lusion's thin bar on the right edge: it fades in while you scroll and out half a
   second after you stop. Pages with a chapter tracker use that instead. */
.scrollbar {
  position: fixed; right: 5px; top: 50%; z-index: 57; width: 4px; height: 20vh;
  transform: translateY(-50%); mix-blend-mode: difference; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease);
}
.scrollbar.is-on { opacity: 1; transition-duration: .15s; }
.scrollbar::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: rgba(255,255,255,.18); }
.scrollbar i { position: absolute; left: 0; top: 0; width: 100%; height: 26%; border-radius: 4px; background: #fff; transform: translateY(var(--sp, 0%)); }

/* ---------------------------------------------- inline face in type */
/* A small portrait pill set inside a big headline. It widens on hover and links to About. */
.face {
  display: inline-block; position: relative; vertical-align: -.06em;
  width: 1.5em; height: .74em; margin: 0 .06em; border-radius: 999px; overflow: hidden;
  background: var(--violet); transition: width .7s var(--ease-out);
}
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transition: scale .9s var(--ease-out); }
.face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .03em rgba(255,255,255,.4); }
@media (hover: hover) { .face:hover { width: 2.2em; } .face:hover img { scale: 1.08; } }
.js-motion .face { width: 0; transition: width 1.1s var(--ease-out) .5s; }
.js-motion .is-in .face, .js-motion .face.is-in { width: 1.5em; }

/* ----------------------------------------------------- company rows */
/* Each employer is a row that opens to show what was shipped there. Hover tints the
   row in that company's colour so it reads as something that opens, not a dead link. */
.roles { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.role { --co: var(--violet); position: relative; border-top: 1px solid var(--line); }
.role::after {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--pad)); z-index: -1; pointer-events: none;
  background: color-mix(in oklab, var(--co) 12%, var(--page)); opacity: 0; transition: opacity .4s var(--ease);
}
.role.is-open::after { opacity: 1; }
.role h3 { margin: 0; font: inherit; }
.role-head {
  width: 100%; text-align: left; position: relative; isolation: isolate;
  display: grid; grid-template-columns: 3fr 4fr 2fr 44px; gap: 20px; align-items: center;
  padding: 24px 0;
}
.role-head::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--pad)); z-index: -1;
  background: color-mix(in oklab, var(--co) 12%, var(--page));
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--ease);
}
.role-name { display: flex; align-items: center; gap: .28em; font-size: clamp(28px, 3.2vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.role-name i { width: .34em; height: .34em; border-radius: 30%; background: var(--co); flex: none; transform: scale(0) rotate(-30deg); transition: transform .5s var(--ease-out); }
.role-sum { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.role-sum b { color: var(--ink); font-weight: 600; }
.role-when { font: 500 13px/1.3 var(--mono); color: var(--ink-3); text-align: right; }
.role-plus { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--pill); transition: background-color .3s var(--ease), transform .5s var(--ease-out); }
.role-plus::before, .role-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.8px; background: currentColor; translate: -50% -50%; }
.role-plus::after { rotate: 90deg; }
.role.is-open .role-plus { transform: rotate(45deg); background: var(--co); color: #fff; }
.role.is-open .role-head::before, .role-head:focus-visible::before { transform: scaleY(1); }
.role.is-open .role-name i { transform: none; }
@media (hover: hover) {
  .role-head:hover::before { transform: scaleY(1); }
  .role-head:hover .role-name i { transform: none; }
  .role-head:hover .role-plus { background: var(--ink); color: #fff; }
}
.role-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.role.is-open .role-body { grid-template-rows: 1fr; }
.role-body > div { min-height: 0; overflow: hidden; }
.role-inner {
  display: grid; grid-template-columns: 3fr 6fr; gap: 20px; padding: 28px 0 40px; position: relative;
}
.role-inner > p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 34ch; }
.role-right { display: grid; gap: 18px; }
.role-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.role-stats li { padding: 12px 16px; border-radius: 14px; background: #fff; display: grid; gap: 2px; }
.role-stats b { font: 500 clamp(20px, 1.8vw, 28px)/1.1 var(--mono); letter-spacing: -.03em; color: var(--ink); }
.role-stats span { font-size: 13px; color: var(--ink-2); }
.role-stats .is-locked b { display: flex; align-items: center; gap: 10px; }
.role-stats .is-locked .lk-chip { color: #fff; font-size: 11px; }

/* ------------------------------------------------- locked metric */
/* A result kept under a client agreement. The blurred glyphs are a fixed placeholder,
   never the real value, so there is nothing to read out of the source. */
.lk-fake { filter: blur(.14em); opacity: .6; user-select: none; pointer-events: none; }
.lk-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  font: 500 11px/1 var(--mono); letter-spacing: 0; white-space: nowrap; background: var(--ink); color: #fff;
}
.lk-chip svg, .lk-tag svg { width: 11px; height: 11px; flex: none; }
.lk-tag { display: inline-flex; align-items: center; gap: 6px; }
.role-work { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.role-work a, .role-work div.rw {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 8px 14px 8px 8px; border-radius: 16px; background: #fff; transition: background-color .3s var(--ease), color .3s;
}
.role-work a:hover { background: var(--ink); color: #fff; }
.role-work .sw { width: 64px; height: 64px; border-radius: 12px; background: var(--bg); position: relative; overflow: hidden; }
.role-work .sw::after {
  content: ""; position: absolute; left: 30%; top: 20%; width: 40%; height: 96%;
  border-radius: 7px; background: #0e0e12; box-shadow: inset 0 0 0 2.5px #0e0e12, inset 0 0 0 40px #eceaf2; transform: rotate(-8deg);
}
.role-work b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.role-work small { font: 500 12px/1.3 var(--mono); color: var(--ink-3); }
.role-work a:hover small { color: rgba(255,255,255,.6); }
.role-work em { font-style: normal; font: 500 11px/1 var(--mono); padding: 6px 9px; border-radius: 999px; background: var(--pill); color: var(--ink-2); }
.role-work a em { background: var(--co); color: #fff; }

/* menu: a face next to "right now" */
.menu-card.now { display: grid; grid-template-columns: 56px 1fr; gap: 4px 14px; align-items: center; }
.menu-card.now img { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 18px; object-fit: cover; object-position: 50% 30%; }
.menu-card.now p { margin-top: 0; }

@media (max-width: 1000px) {
  .role-head { grid-template-columns: 1fr auto 44px; row-gap: 10px; }
  .role-sum { grid-column: 1 / 3; grid-row: 2; }
  .role-when { grid-column: 2; grid-row: 1; }
  .role-plus { grid-column: 3; grid-row: 1; }
  .role-inner { grid-template-columns: 1fr; }
}
@media (max-width: 812px) {
  .role-head { grid-template-columns: 1fr 40px; padding: 20px 0; }
  .role-when { grid-column: 1; grid-row: 2; text-align: left; }
  .role-sum { grid-column: 1 / -1; grid-row: 3; font-size: 15px; }
  .role-plus { grid-column: 2; grid-row: 1 / 3; width: 40px; height: 40px; }
  .role-work { grid-template-columns: 1fr; }
  .scrollbar { width: 2px; right: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .role-body, .face, .js-motion .face { transition: none; }
}