/* GENERATED by build.js from site.css for the case study pages: do not edit */
:host { all: initial; display: block; }
/* ==========================================================================
   Adil Shoaib — site styles
   Main site: monochrome. Near-black ink and buttons, off-white surfaces,
   white arrow circles, and an ink underline that draws in under italic words.
   Case studies (body.theme-case) swap in their own --accent: the dot behind
   italic words, arrow circles, badges and the quote section all follow it.
   ========================================================================== */

:host {
  /* neutrals */
  --bg: #f6f6f4;
  --card: #ffffff;
  --ink: #141414;
  --ink-2: #3f3f3c;
  --muted: #6f6f6a;
  --faint: #a8a8a2;
  --line: #e4e4df;
  --line-2: #eeeeea;
  --panel: #ececE8;
  --hover: #2b2b2b;

  /* dark surfaces */
  --dark: #111111;
  --dark-2: #1b1b1b;
  --dark-3: #262626;
  --on-dark: #c8c8c3;
  --on-dark-2: #8f8f8a;

  /* theme slots (overridden per case study) */
  --accent: #141414;     /* fills on light surfaces: badges, active rows, eyebrow dots */
  --accent-ink: #ffffff; /* text on --accent */
  --pop: #ffffff;        /* arrow circles on black buttons, highlights on dark surfaces */
  --pop-ink: #141414;    /* text on --pop */
  --mark: #141414;       /* highlight under / behind italic words */

  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(.16, .84, .24, 1);
  --wrap: 1320px;        /* content column (≈ 1208px of text at 1440) */
  --wrap-wide: 1408px;   /* full-bleed panels and the footer card */
  --z: 1;                /* page scale, set per breakpoint below */
  --gutter: clamp(20px, 4vw, 56px);
  --gutter-wide: clamp(16px, 3vw, 40px);
  --section: clamp(96px, 12vw, 170px);
  --shadow-card: 0 0 0 1px var(--line);
  --shadow-lift: 0 0 0 1px #e8e8e4, 0 30px 60px -40px rgba(0, 0, 0, .28);
}

/* Big screens: the layout is designed at 1440 and scales up as one piece from there
   (type, spacing, cards and containers together), so a 1080p or 1440p monitor reads
   like the laptop view instead of a small column in a sea of background.
   --z mirrors the zoom so vh-based sizes can divide it back out. */

/* Case studies: one accent drives the whole page */
.theme-case {
  --pop: var(--accent);
  --pop-ink: var(--accent-ink);
  --mark: var(--accent);
}
.on-dark { --mark: var(--pop); }

* { margin: 0; padding: 0; box-sizing: border-box; }
.as-root {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
::selection { background: var(--ink); color: #fff; }
.theme-case ::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

/* clip (not hidden) so sticky elements inside still work */
.page { overflow: hidden; overflow: clip; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--gutter-wide); }
.section { padding-top: var(--section); }
.section-pad { padding: clamp(72px, 10vw, 140px) var(--gutter); }
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px 64px;
  align-items: end;
}
.split.top { align-items: start; }
/* Section headers: the text column stretches to the heading's height — copy at the top, action at the bottom */
.split.head { align-items: stretch; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 860px) { .split.head { grid-template-columns: 1fr; } }
/* the side text and its button stay together, level with the bottom of the title beside them */
.head-side { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 20px; padding-bottom: .3em; }
.head-side .btn-row { margin-top: 0 !important; }
.head-side .body { max-width: 520px; }
.split.center { align-items: center; }

/* ---------- Type ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.on-dark .eyebrow { color: var(--on-dark-2); }
.on-dark .eyebrow::before { background: var(--pop); }

.h1 { font-size: clamp(42px, 5.8vw, 88px); line-height: .98; font-weight: 600; letter-spacing: -.055em; }
.h1.post-title { font-size: clamp(36px, 4.8vw, 72px); }
.h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; font-weight: 600; letter-spacing: -.045em; }
.h3 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.h4 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
.eyebrow + .h1, .eyebrow + .h2, .eyebrow + .h3 { margin-top: 18px; }

.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.on-dark .serif, .serif.pop { color: var(--pop); }
.theme-case .serif.pop { color: var(--pop); }

/* Highlight — main site: an ink underline that draws in when revealed */
.hl, .dot-word {
  background-image: linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 100% .065em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.2s var(--ease);
}
.dot-word { display: inline-block; padding-right: .04em; }
.motion .hl:not(.is-in), .motion .dot-word:not(.is-in) { background-size: 0% .065em; }

/* Highlight — case studies: the accent dot behind the first letter */
.theme-case .hl, .theme-case .dot-word { background: none; position: relative; z-index: 0; }
.theme-case .hl::before, .theme-case .dot-word::before {
  content: ""; position: absolute; z-index: -1; left: -.06em; top: .1em; width: .5em; height: .5em;
  border-radius: 50%; background: var(--mark);
  transform: scale(1); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1);
}
.motion.theme-case .hl:not(.is-in)::before, .motion.theme-case .dot-word:not(.is-in)::before,
.motion .theme-case .hl:not(.is-in)::before, .motion .theme-case .dot-word:not(.is-in)::before { transform: scale(0); }

.lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.body { font-size: 17px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.body b, .lead b { color: var(--ink); font-weight: 600; }
.on-dark .body, .on-dark .lead { color: var(--on-dark); }
.on-dark .body b { color: #fff; }
.small { font-size: 14px; line-height: 1.6; color: var(--muted); }
.kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 5px 0 18px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  transition: background .25s, color .25s, transform .25s var(--ease);
  white-space: nowrap;
}
.btn .arr {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: #141414; font-size: 13px; /* buttons stay black and white on every page, whatever the project colour */
  transition: transform .4s var(--ease);
}
.btn:hover { background: var(--hover); }
.btn:hover .arr { transform: rotate(45deg); }
.btn.sm { height: 40px; padding: 0 6px 0 16px; font-size: 13px; }
.btn.sm .arr { width: 28px; height: 28px; }
.btn.lg { height: 58px; padding: 0 8px 0 26px; font-size: 16px; }
.btn.lg .arr { width: 42px; height: 42px; }
.btn.light { background: #fff; color: var(--ink); }
.btn.light .arr { background: var(--ink); color: #fff; }
.btn.light:hover { background: var(--line-2); }
.btn.ghost {
  background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); padding: 0 18px;
}
.btn.ghost:hover { background: var(--line-2); }
.on-dark .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.on-dark .btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px;
  border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line);
  font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.chip.dark { background: var(--ink); color: #fff; box-shadow: none; height: 34px; padding: 0 16px; font-size: 13px; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pop); }
.chip .dot.live { background: #3ccf4e; box-shadow: 0 0 0 4px rgba(60, 207, 78, .18); animation: live 2.2s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 7px rgba(60, 207, 78, 0); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.tile-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); flex: none;
}
.tile-icon svg { width: 16px; height: 16px; }
.on-dark .tile-icon { background: var(--pop); color: var(--pop-ink); }

.stars { color: var(--ink); letter-spacing: 1px; font-size: 12px; }
.on-dark .stars { color: var(--pop); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: clamp(18px, 2.2vw, 28px) var(--gutter) 0;
  transition: transform .5s var(--ease);
}
.header-row {
  max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 0; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
  transition: background .35s, box-shadow .35s, padding .35s var(--ease);
}
.brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line); }
.site-header.is-scrolled .brand {
  padding: 0 16px 0 4px; background: rgba(246, 246, 244, .72);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 24px -14px rgba(0, 0, 0, .25);
}
.pill-nav {
  display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--line), 0 8px 24px -12px rgba(0, 0, 0, .18);
}
.pill-nav a {
  height: 34px; padding: 0 16px; border-radius: 999px; display: flex; align-items: center;
  color: var(--ink-2); font-size: 13px; font-weight: 500; transition: background .25s, color .25s;
}
.pill-nav a:hover { background: var(--line-2); color: var(--ink); }
.pill-nav a.is-active { background: var(--ink); color: #fff; font-weight: 600; }
.menu-btn {
  display: none; width: 44px; height: 44px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 8px 24px -12px rgba(0, 0, 0, .18);
  place-items: center;
}
.menu-btn i { display: block; width: 16px; height: 1.8px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease); }
.menu-btn i + i { margin-top: 4px; }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(2.9px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-2.9px) rotate(-45deg); }
.mobile-menu {
  display: none; max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 10px auto 0; padding: 10px; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .35);
}
.mobile-menu a:not(.btn) {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 18px;
  font-size: 20px; font-weight: 600; letter-spacing: -.02em;
}
.mobile-menu a:not(.btn):hover, .mobile-menu a.is-active { background: var(--line-2); }
.mobile-menu a span { font-size: 11px; font-weight: 600; color: var(--faint); }
.mobile-menu .btn { display: flex; margin: 8px 8px 6px; justify-content: space-between; height: 52px; }
.mobile-menu .btn .arr { width: 42px; height: 42px; }

.header-cta { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 24px -12px rgba(0, 0, 0, .3); }
@media (max-width: 880px) {
  .pill-nav, .header-cta { display: none; }
  .menu-btn { display: grid; }
  .site-header.menu-open .mobile-menu { display: block; animation: drop .45s var(--ease); }
}
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
/* on scroll the brand, links and button merge into one frosted container */
.header-row { border-radius: 999px; transition: background .45s, box-shadow .45s, padding .45s var(--ease); }
.pill-nav, .menu-btn { transition: background .45s, box-shadow .45s; }
.site-header.is-scrolled .header-row {
  padding: 6px; background: rgba(240, 240, 237, .92);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 18px 40px -22px rgba(0, 0, 0, .35);
}
.site-header.is-scrolled .brand { padding: 0 12px 0 4px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.is-scrolled .brand img { box-shadow: none; }
.site-header.is-scrolled .pill-nav { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 6px 16px -10px rgba(0, 0, 0, .25); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.is-scrolled .header-cta { box-shadow: none; }
.site-header.is-scrolled .menu-btn { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.site-header.menu-open .header-row { background: #fff; }

/* ---------- "My work" dropdown ---------- */
.header-row { position: relative; }
.pill-nav a.nav-drop { gap: 7px; padding-right: 13px; }
.nav-drop .chev { width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; opacity: .55; transition: rotate .35s var(--ease), margin .35s var(--ease), opacity .25s; }
.nav-drop[aria-expanded="true"] .chev { rotate: 225deg; margin-top: 3px; opacity: 1; }
.pill-nav a.nav-drop[aria-expanded="true"]:not(.is-active) { background: var(--line-2); color: var(--ink); }

.work-menu {
  position: absolute; top: 100%; left: var(--wm-x, 50%); z-index: 60; width: 780px; max-width: calc(100vw - 32px);
  padding-top: 12px; translate: -50% 0; pointer-events: none; visibility: hidden;
  transition: visibility 0s linear .3s;
}
.work-menu.is-open { pointer-events: auto; visibility: visible; transition: none; }
.wm-box {
  display: grid; grid-template-columns: 1fr 1fr 64px; gap: 8px; padding: 8px; border-radius: 26px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 40px 80px -36px rgba(0, 0, 0, .4), 0 12px 24px -16px rgba(0, 0, 0, .14);
  opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: var(--wm-o, 50%) 0;
  transition: opacity .22s ease, transform .4s var(--ease);
}
.work-menu.is-open .wm-box { opacity: 1; transform: none; }
/* standard pointer: a small triangle joined to the panel's top edge, under the "My work" link */
.wm-box::before {
  content: ""; position: absolute; bottom: 100%; left: var(--wm-o, 50%); width: 18px; height: 9px; margin: 0 0 -1px -9px;
  background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .06));
}

.wm-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 300px; padding: 14px; border-radius: 20px; overflow: hidden; isolation: isolate; transition: transform .45s var(--ease); }
.wm-dark { background: var(--dark); color: #fff; }
.wm-light { background: #efeeea; color: var(--ink); }
.wm-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity .4s; }
.wm-dark::after { background: radial-gradient(240px 150px at 50% 70%, rgba(255, 255, 255, .1), transparent 70%), radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 14px 14px; }
.wm-light::after { background: radial-gradient(240px 150px at 50% 70%, rgba(255, 255, 255, .8), transparent 70%), radial-gradient(rgba(0, 0, 0, .06) 1px, transparent 1.4px) 0 0 / 14px 14px; }

.wm-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.wm-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; transition: transform .45s var(--ease); }
.wm-ic svg { width: 19px; height: 19px; }
.wm-dark .wm-ic { background: #fff; color: var(--ink); }
.wm-light .wm-ic { background: var(--ink); color: #fff; }
.wm-card:hover .wm-ic, .wm-card:focus-visible .wm-ic { transform: rotate(-8deg) scale(1.06); }
.wm-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wm-t b { font-size: 17px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.wm-t small { margin-top: 2px; font-size: 12.5px; line-height: 1.35; }
.wm-t .serif { font-size: 1.12em; }
.wm-dark .wm-t small { color: var(--on-dark-2); }
.wm-dark .wm-t .serif { color: #fff; }
.wm-light .wm-t small { color: var(--muted); }
.wm-light .wm-t .serif { color: var(--ink); }
/* project count: a ring the same size as the icon, centred on the title block; fills in on hover */
.wm-n { flex: none; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; transition: background .35s, color .35s, box-shadow .35s, transform .45s var(--ease); }
.wm-dark .wm-n { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.wm-light .wm-n { background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); color: var(--ink-2); }
.wm-dark:hover .wm-n, .wm-dark:focus-visible .wm-n { background: #fff; color: var(--ink); box-shadow: none; transform: scale(1.04); }
.wm-light:hover .wm-n, .wm-light:focus-visible .wm-n { background: var(--ink); color: #fff; box-shadow: none; transform: scale(1.04); }

/* the same fanned mockup on both cards: dealt in when the menu opens, spreads and lifts on hover */
.wm-stage { position: relative; flex: 1; }
.wm-tile {
  --x: calc(var(--k) * 78px); --r: calc(var(--k) * 9deg); --y: calc(var(--k) * var(--k) * 14px);
  position: absolute; left: 50%; top: 50%; width: 132px; height: 158px; margin: -72px 0 0 -66px;
  overflow: hidden; border-radius: 16px; background: var(--accent);
  transform: translate(0, 24px) rotate(0) scale(.86); opacity: 0;
  transition: transform .6s var(--ease), opacity .35s;
}
.wm-dark .wm-tile { box-shadow: 0 0 0 3px var(--dark), 0 22px 34px -18px rgba(0, 0, 0, .9); }
.wm-light .wm-tile { box-shadow: 0 0 0 3px #efeeea, 0 22px 34px -20px rgba(0, 0, 0, .45); }
.wm-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.wm-tile img.cut { object-fit: contain; object-position: 50% 100%; padding-top: 14px; }
.wm-tile:nth-child(2) { z-index: 2; }
.work-menu.is-open .wm-tile { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); transition-delay: calc(.1s + (var(--k) + 1) * .05s); }
.work-menu.is-open .wm-card:hover .wm-tile, .work-menu.is-open .wm-card:focus-visible .wm-tile {
  transform: translate(calc(var(--x) * 1.12), calc(var(--y) * 1.2 - 8px)) rotate(calc(var(--r) * 1.4)); transition-delay: 0s;
}
.work-menu.is-open .wm-card:hover .wm-tile:nth-child(2), .work-menu.is-open .wm-card:focus-visible .wm-tile:nth-child(2) { transform: translate(0, -12px) scale(1.06); }

.wm-go { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 14px; opacity: 0; transform: translateY(6px) rotate(-45deg); transition: opacity .3s, transform .45s var(--ease); }
.wm-dark .wm-go { background: #fff; color: var(--ink); }
.wm-light .wm-go { background: var(--ink); color: #fff; }
.wm-card:hover .wm-go, .wm-card:focus-visible .wm-go { opacity: 1; transform: none; }

/* "See all work": a slim third column beside the two cards, label running vertically; fills with ink on hover */
.wm-all {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 300px; padding: 16px 0 14px;
  border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; isolation: isolate; color: var(--ink);
  transition: color .35s;
}
.wm-all::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .5s var(--ease); }
.wm-all-ic { display: grid; grid-template-columns: repeat(2, 7px); gap: 3px; }
.wm-all-ic i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .85; transition: transform .45s var(--ease); }
.wm-all-ic i:nth-child(4) { opacity: .3; }
.wm-all-t { writing-mode: vertical-rl; rotate: 180deg; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.wm-all-t .serif { font-size: 1.2em; font-weight: 400; }
.wm-all-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; transition: background .35s, color .35s, transform .45s var(--ease); }
.wm-all:hover, .wm-all:focus-visible { color: #fff; }
.wm-all:hover::before, .wm-all:focus-visible::before { transform: none; }
.wm-all:hover .wm-all-go, .wm-all:focus-visible .wm-all-go { background: #fff; color: var(--ink); transform: rotate(45deg); }
.wm-all:hover .wm-all-ic i:nth-child(1) { transform: translate(-2px, -2px); }
.wm-all:hover .wm-all-ic i:nth-child(2) { transform: translate(2px, -2px); }
.wm-all:hover .wm-all-ic i:nth-child(3) { transform: translate(-2px, 2px); }
.wm-all:hover .wm-all-ic i:nth-child(4) { transform: translate(2px, 2px); opacity: .85; }
@media (max-width: 880px) { .work-menu { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .wm-box, .wm-tile { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* mobile menu: the two work groups sit under "My work" */
.mm-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 8px; }
.mobile-menu .mm-sub a:not(.btn) { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 14px; border-radius: 16px; background: var(--bg); font-size: 14px; font-weight: 600; }
.mobile-menu .mm-sub a:nth-child(1) { background: var(--dark); color: #fff; }
.mobile-menu .mm-sub a:nth-child(1) span { color: rgba(255, 255, 255, .5); }
.mm-sub a { position: relative; }
.mm-sub a span { position: absolute; right: 14px; top: 14px; }
.mm-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: #fff; }
.mm-sub a:nth-child(1) .mm-ic { background: #fff; color: var(--ink); }
.mm-ic svg { width: 16px; height: 16px; }

/* ---------- Hero (shared) ---------- */
.hero { padding: 120px 0 0; }
.hero-center { text-align: center; padding: clamp(32px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); }
.hero-center .lead { max-width: 640px; margin: 20px auto 0; }
.hero-center .btn-row { justify-content: center; margin-top: 26px; }
.crumbs { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--faint); }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs + .h1 { margin-top: 14px; }

.clients { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.avatars { display: flex; }
.avatars img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px var(--bg); }
.avatars img + img { margin-left: -10px; }
.on-dark .clients { color: #fff; }
.on-dark .avatars img { box-shadow: 0 0 0 2.5px var(--dark); }

/* Dark intro panel (home hero stage) */
.intro-panel {
  position: relative; border-radius: clamp(24px, 3vw, 44px); background: var(--dark);
  padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 64px) 0; overflow: hidden;
}
.intro-panel .orb { position: absolute; border-radius: 50%; }
.intro-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(10px, 3vw, 40px); max-width: 1100px; margin: 0 auto; align-items: end;
}
.shot {
  border-radius: clamp(14px, 2vw, 26px); overflow: hidden; background: var(--dark-3);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8);
}
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; }
.float-chip {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px;
  background: #fff; color: var(--ink); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .5);
  font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.float-chip small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.float-chip.dark { background: var(--dark-3); color: #fff; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.float-chip.dark small { color: var(--on-dark); }
.float-chip .tile-icon { width: 32px; height: 32px; font-size: 13px; font-weight: 800; }
.float-chip.dark .tile-icon { background: var(--pop); color: var(--pop-ink); }
.float-chip .avatars img { width: 28px; height: 28px; box-shadow: 0 0 0 2px #fff; }

/* ---------- Cards ---------- */
.card { background: var(--card); border-radius: 24px; box-shadow: var(--shadow-card); }
.card-lift { background: var(--card); border-radius: 32px; box-shadow: var(--shadow-lift); }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.meta-card { padding: 22px 24px 8px; }
.meta-card .head { display: flex; align-items: flex-start; justify-content: space-between; }
.meta-card .rows { margin-top: 14px; }
.meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0;
  font-size: 18px; font-weight: 500; letter-spacing: -.01em;
}
.meta-row + .meta-row { border-top: 1px solid var(--line-2); }
.meta-row .n { font-size: 11px; font-weight: 600; color: var(--faint); }

/* ---------- Projects ---------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.project-grid .wide { grid-column: 1 / -1; }
.project-grid .wide .media { aspect-ratio: 16 / 7.5; }
@media (max-width: 760px) { .project-grid .wide .media { aspect-ratio: 16 / 12; } }
.project-card { display: block; }
.project-card .media {
  position: relative; aspect-ratio: 16 / 10.5; border-radius: clamp(20px, 2.4vw, 32px); overflow: hidden; background: var(--panel);
  box-shadow: 0 30px 60px -44px rgba(0, 0, 0, .55);
}
.project-card .media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.project-card:hover .media > img { transform: scale(1.05); }
.project-card .media .tag { position: absolute; left: 16px; top: 16px; z-index: 2; }
.project-card .media .tag .dot { background: var(--accent); }
.project-card .media .open {
  position: absolute; right: 16px; bottom: 16px; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 18px;
  transform: scale(.6); opacity: 0; transition: transform .5s var(--ease), opacity .3s;
}
.project-card:hover .media .open { transform: scale(1); opacity: 1; }
.project-card .info { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 6px 0; }
.project-card .info h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; display: flex; align-items: center; gap: 10px; }
.project-card .info h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.project-card .info p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.project-card .info .go {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; transition: background .25s, color .25s;
}
.project-card:hover .info .go { background: var(--ink); color: #fff; }

/* Work strip: one straight row of square project tiles gliding past, each labelled with its name and field */
.strip { position: relative; height: clamp(280px, 32vw, 470px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.strip-track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 18px; width: max-content; animation: strip-move 95s linear infinite; }
.strip-dup { display: contents; }
.strip:hover .strip-track { animation-play-state: paused; }
.hm-t { position: relative; flex: none; height: 88%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #e9e9e4; box-shadow: 0 0 0 1px rgba(13, 13, 12, .06), 0 22px 40px -28px rgba(13, 13, 12, .45); }
.hm-t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.hm-t:hover img { transform: scale(1.04); }
.hm-cap { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); height: 32px; padding: 0 13px; border-radius: 9px; background: rgba(255, 255, 255, .94); font-size: 13px; line-height: 1; white-space: nowrap; overflow: hidden; color: var(--ink); }
.hm-cap b { font-weight: 600; }
.hm-cap span { color: var(--muted, #6b6b64); }
@keyframes strip-move { to { transform: translateX(calc(-50% - 9px)); } }
@media (max-width: 600px) {
  .strip-track { gap: 10px; }
  .hm-t { border-radius: 10px; }
  .hm-cap { height: 24px; font-size: 11px; padding: 0 9px; left: 7px; bottom: 7px; }
  .hm-cap span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }
.strip + .section { padding-top: clamp(56px, 7vw, 104px); }

/* ---------- Services list (cycling highlight) ---------- */
.svc-list { display: flex; flex-direction: column; gap: 6px; }
.svc-row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 18px; background: var(--bg);
  transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.svc-row .n { font-size: 12px; font-weight: 600; color: var(--faint); transition: color .5s; }
.svc-row .t { font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; letter-spacing: -.02em; }
.svc-row .a { opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s var(--ease); }
.svc-row.is-active { background: var(--accent); color: var(--accent-ink); transform: translateX(6px); }
.svc-row.is-active .n { color: var(--on-dark-2); }
.svc-row.is-active .t { font-weight: 600; }
.svc-row.is-active .a { opacity: 1; transform: none; }
.svc-row.is-active .small { color: var(--on-dark); }

.stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stack-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 14px;
  border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  transition: transform .4s var(--ease), box-shadow .3s;
}
.stack-item:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 18px 30px -18px rgba(0, 0, 0, .3); }
.stack-item .logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; }
.stack-item:nth-child(even) .logo { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- About ---------- */
.portrait { position: relative; max-width: 520px; }
.portrait .frame { border-radius: 32px; overflow: hidden; aspect-ratio: 760 / 860; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .55); }
.portrait .frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait .float-chip { position: absolute; }
.history { margin-top: 32px; }
.history-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 16px 22px;
  border-top: 1px solid var(--line); font-size: 15px;
}
.history-row:first-of-type { border-top: 0; }
.history-row b { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.history-row span { color: var(--muted); }
.history-row .yrs { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--bg); padding: 5px 10px; border-radius: 999px; }
.history-head { padding: 14px 22px; background: var(--bg); border-radius: 24px 24px 0 0; }
.paras p + p { margin-top: 14px; }
.socials { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.social {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px var(--line); color: var(--ink); transition: background .25s, color .25s, transform .35s var(--ease);
}
.social svg { width: 18px; height: 18px; }
.social:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.social.wide { width: auto; padding: 0 16px 0 12px; gap: 8px; display: inline-flex; border-radius: 999px; font-size: 13px; font-weight: 600; }
.on-dark .social { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; }
.on-dark .social:hover { background: #fff; color: var(--ink); }

/* ---------- Testimonials ---------- */
.dark-section { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.dark-section .orb { position: absolute; border-radius: 50%; background: var(--dark-2); }
.quote-marquee {
  position: relative; height: clamp(520px, 60vw, 680px); margin-top: clamp(48px, 6vw, 80px); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.quote-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quote-col { display: flex; flex-direction: column; gap: 14px; }
.quote-card { padding: 26px 26px 22px; border-radius: 24px; background: #fff; color: var(--ink); }
.quote-card p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.quote-card p b { color: var(--ink); font-weight: 600; }
.quote-card .stars { display: block; margin-bottom: 12px; color: var(--ink); }
.person { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.person img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.person b { display: block; font-size: 14.5px; font-weight: 600; }
.person span { font-size: 13px; color: var(--muted); }
.on-dark .person span { color: var(--on-dark); }
.quote-card.alt { background: var(--dark-3); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.quote-card.alt p { color: var(--on-dark); }
.quote-card.alt p b { color: #fff; }
.quote-card.alt .stars { color: #fff; }
.quote-card.alt .person span { color: var(--on-dark-2); }
.quote-card.soft { background: var(--panel); }

.feature-quote { text-align: center; max-width: 980px; margin: 0 auto; }
.feature-quote blockquote { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.18; font-weight: 500; letter-spacing: -.03em; color: var(--faint); text-wrap: balance; }
.feature-quote blockquote b { color: var(--ink); font-weight: 600; }
.feature-quote .person { justify-content: center; text-align: left; margin-top: 28px; }
.mark { font-family: var(--serif); font-style: italic; font-size: 120px; line-height: .6; color: var(--ink); display: block; height: 52px; }

/* ---------- FAQ ---------- */
/* room below the list so an open card's outline and shadow aren't clipped where the page ends */
.faq { display: flex; flex-direction: column; gap: 10px; padding-bottom: 44px; }
.faq-item { background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s, background .3s; }
.faq-item.is-open { box-shadow: 0 0 0 1.5px var(--ink), 0 24px 40px -30px rgba(0, 0, 0, .4); }
.faq-q {
  width: 100%; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 12px;
  padding: 20px 20px 20px 22px; text-align: left; font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; letter-spacing: -.01em;
}
.faq-q .n { font-size: 12px; font-weight: 600; color: var(--faint); }
.faq-q .plus {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg);
  transition: transform .45s var(--ease), background .3s, color .3s;
}
.faq-item.is-open .plus { transform: rotate(45deg); background: var(--ink); color: #fff; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 64px 22px 68px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 600px) { .faq-a p { padding: 0 22px 22px 22px; } }

.cta-card { background: var(--dark); color: #fff; border-radius: 32px; padding: clamp(28px, 3.4vw, 44px); position: relative; overflow: hidden; }
.cta-card .orb { position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--dark-3); }
.cta-card > * { position: relative; }
.cta-card .h2, .cta-card .h3 { color: #fff; }
.cta-card .eyebrow { color: var(--on-dark-2); }
.cta-card .eyebrow::before { background: var(--pop); }
.cta-card p { color: var(--on-dark); margin-top: 16px; font-size: 16px; line-height: 1.6; }
.cta-card .btn { margin-top: 28px; }

/* ---------- Card grid ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; }

/* ---------- Project detail ---------- */
.pd-blocks { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 20px); }
.media-grid { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.media-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-tile { position: relative; overflow: hidden; border-radius: clamp(16px, 2vw, 28px); background: var(--panel); }
.media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; }
.media-tile.zoom { cursor: zoom-in; }
.media-tile.zoom img { transition: transform 1s var(--ease); }
.media-tile.zoom:hover img { transform: scale(1.03); }
@media (max-width: 700px) { .media-grid.c2, .media-grid.c3 { grid-template-columns: 1fr; } }

.accent-section { background: var(--accent); color: var(--accent-ink); overflow: hidden; position: relative; }
.accent-section .eyebrow { color: inherit; opacity: .75; }
.accent-section .eyebrow::before { background: currentColor; }
.accent-section .person span { color: inherit; opacity: .75; }
.big-quote { font-size: clamp(36px, 5.4vw, 76px); line-height: 1.02; font-weight: 600; letter-spacing: -.045em; max-width: 1100px; }

.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 64px 72px;
  background: rgba(10, 10, 10, .92); backdrop-filter: blur(8px);
}
.lightbox.is-open { display: grid; animation: fadein .3s ease; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 18px; }
.lightbox button:hover { background: #fff; color: var(--ink); }
.lightbox .lb-close { top: 18px; right: 18px; }
.lightbox .lb-prev { left: 14px; top: 50%; translate: 0 -50%; }
.lightbox .lb-next { right: 14px; top: 50%; translate: 0 -50%; }
.lightbox .lb-count { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; color: var(--on-dark); font-size: 13px; font-weight: 600; }
@keyframes fadein { from { opacity: 0; } }

/* ---------- Process ---------- */
.stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: stretch; }
.step-list { display: flex; flex-direction: column; gap: 8px; }
.step-btn {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line);
  transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), box-shadow .4s;
}
.step-btn .n { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1; color: var(--faint); transition: color .4s; }
.step-btn .t { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.step-btn .t small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 2px; transition: color .4s; }
.step-btn .bar { width: 46px; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.step-btn .bar i { display: block; height: 100%; width: 0; background: var(--ink); }
.step-btn.is-active { background: var(--panel); transform: translateX(6px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.step-btn.is-active .n { color: var(--ink); }
.step-btn.is-active .bar { background: rgba(0, 0, 0, .1); }
.step-btn.is-active .bar i { animation: fill var(--cycle, 5s) linear forwards; }
.paused .step-btn.is-active .bar i { animation: none; width: 100%; }
@keyframes fill { to { width: 100%; } }
.step-panels { position: relative; min-height: 420px; }
.step-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(24px, 3.4vw, 44px);
  border-radius: 32px; background: var(--dark); color: #fff; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.step-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.step-panel .big-n { font-family: var(--serif); font-style: italic; font-size: clamp(90px, 11vw, 150px); line-height: .8; color: var(--pop); }
.step-panel .orb { position: absolute; right: -80px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; background: var(--dark-3); }
.step-panel > * { position: relative; }
.step-panel h3 { margin-top: 18px; }
.step-panel p { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--on-dark); max-width: 520px; }
.step-panel .foot { margin-top: auto; padding-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.step-panel .chip { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; }
.step-panel .chip.when { background: var(--pop); color: var(--pop-ink); box-shadow: none; }
@media (max-width: 820px) { .step-panels { min-height: 460px; } }

.timeline { display: flex; flex-direction: column; gap: 18px; }
.tl-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 16px; align-items: center; }
.tl-row b { font-size: 15px; font-weight: 600; }
.tl-row b small { display: block; font-weight: 500; font-size: 13px; color: var(--muted); }
.tl-track { position: relative; height: 46px; border-radius: 14px; background: var(--line-2); overflow: hidden; }
.tl-bar {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: 14px; background: var(--ink); color: #fff; transform-origin: left;
  display: flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.tl-bar.soft { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tl-bar.mid { background: var(--dark-3); }
.tl-scale { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--faint); margin-left: calc(min(200px, 30%) + 16px); }
@media (max-width: 560px) { .tl-row { grid-template-columns: 1fr; gap: 8px; } .tl-scale { margin-left: 0; } }

.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: clamp(48px, 6vw, 80px); }
.principle { padding: 24px; border-radius: 22px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.principle .tile-icon { margin-bottom: 26px; }
.principle h4 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.principle p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--on-dark); }

/* ---------- Services page ---------- */
.svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.svc-card {
  position: relative; display: flex; flex-direction: column; min-height: 280px; padding: 24px; border-radius: 26px; background: #fff;
  box-shadow: 0 0 0 1px var(--line); overflow: hidden; transition: transform .5s var(--ease), box-shadow .4s, background .4s, color .4s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line), 0 30px 50px -34px rgba(0, 0, 0, .4); }
.svc-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc-card .top .n { font-size: 11px; font-weight: 600; color: var(--faint); }
.svc-card .tile-icon { width: 46px; height: 46px; border-radius: 14px; }
.svc-card .tile-icon svg { width: 20px; height: 20px; }
.svc-card h3 { margin-top: auto; padding-top: 40px; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.svc-card p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.svc-card.feature { background: var(--dark); color: #fff; box-shadow: none; }
.svc-card.feature p { color: var(--on-dark); }
.svc-card.feature .n { color: var(--on-dark-2); }
.svc-card.feature .tile-icon { background: var(--pop); color: var(--pop-ink); }
.svc-card.outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

.night { background: var(--dark); color: #fff; overflow: hidden; position: relative; }
.night .stack-item { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #e8e8e4; }
.night .stack-item:hover { background: rgba(255, 255, 255, .1); }
.night .stack-item .logo { background: #fff; color: var(--ink); box-shadow: none; }
.night .stack-item:nth-child(even) .logo { background: var(--dark-3); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; align-items: start; }
.form-card { padding: clamp(22px, 3vw, 40px); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.form-row .field { margin-top: 0; }
.field label, .field .label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input, .field textarea {
  width: 100%; border: 0; outline: 0; border-radius: 16px; background: var(--bg); padding: 14px 16px; font-size: 15px;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .25s, background .25s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.form-card .btn { margin-top: 24px; width: 100%; justify-content: space-between; height: 54px; }
.form-card .btn .arr { width: 44px; height: 44px; }
.form-foot { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }
.form-foot a { text-decoration: underline; }
.form-done { display: none; text-align: center; padding: 48px 12px; }
.form-card.is-sent form { display: none; }
.form-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #FEF3F2; font-size: 13.5px; color: #B42318; }
.form-card .btn.is-sending { opacity: .7; pointer-events: none; }
.form-card.is-sent .form-done { display: block; animation: drop .6s var(--ease); }
.form-done .tick { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--ink); color: #fff; }
.form-done .tick svg { width: 26px; height: 26px; }
/* contact: left column and form card share one height; options are two cards side by side */
.contact-grid { align-items: stretch; }
.contact-left { display: flex; flex-direction: column; }
.contact-proof { margin-top: auto; padding-top: 28px; }
.form-card { display: flex; flex-direction: column; }
.form-card form { display: flex; flex-direction: column; flex: 1; }
.field-fill { flex: 1; }
.field-fill textarea { flex: 1; }
.contact-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.co { position: relative; display: flex; flex-direction: column; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; transition: transform .5s var(--ease), box-shadow .4s; }
.co:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 28px 46px -32px rgba(0, 0, 0, .45); }
.co-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.co .tile-icon { width: 42px; height: 42px; border-radius: 13px; }
.co-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--bg); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.co-tag i { width: 6px; height: 6px; border-radius: 50%; background: #2fbf4a; animation: live 2.2s ease-in-out infinite; }
.co-tag.light { background: rgba(255, 255, 255, .12); color: #fff; }
.co .kicker { margin-bottom: 6px; }
.co-big { display: block; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; word-break: break-word; }
.co-mail .co-big { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease); justify-self: start; width: fit-content; }
.co-mail .co-big:hover { background-size: 100% 1.5px; }
.co-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; }
.co-copy { position: relative; display: grid; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 600; overflow: hidden; transition: background .3s; }
.co-copy:hover { background: var(--line-2); }
.co-copy > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: translate .45s var(--ease), opacity .3s; }
.co-copy .cc-b { translate: 0 110%; opacity: 0; color: #1f8a33; }
.co-copy .cc-b svg { width: 14px; height: 14px; }
.co-copy.is-done .cc-a { translate: 0 -110%; opacity: 0; }
.co-copy.is-done .cc-b { translate: 0 0; opacity: 1; }
.co-go { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .45s var(--ease); }
.co-go:hover { transform: rotate(45deg); }
.co-call { background: var(--ink); color: #fff; box-shadow: none; }
.co-call .kicker { color: var(--on-dark-2); }
.co-call::before { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 0 0 30px rgba(255, 255, 255, .02); pointer-events: none; }
.co-av { position: relative; }
.co-av img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); }
.co-av i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #2fbf4a; box-shadow: 0 0 0 2px var(--ink); }
.co-steps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.co-steps span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 5px; border-radius: 9px; background: rgba(255, 255, 255, .08); font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .75); transition: background .3s, color .3s, transform .45s var(--ease); }
.co-steps i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(255, 255, 255, .14); font-style: normal; font-size: 10px; font-weight: 700; }
.co-call:hover .co-steps span { background: #fff; color: var(--ink); transform: translateY(-3px); transition-delay: calc(var(--k) * 50ms); }
.co-cta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; }
.co-cta .arr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .45s var(--ease); }
.co-call:hover .co-cta .arr { transform: rotate(45deg); }
@media (max-width: 520px) { .contact-opts { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { padding: var(--section) var(--gutter-wide) clamp(16px, 3vw, 40px); }
.footer-card {
  position: relative; max-width: var(--wrap-wide); margin: 0 auto; border-radius: clamp(24px, 3vw, 44px); background: #000; color: #fff;
  padding: clamp(48px, 7vw, 104px) clamp(24px, 5vw, 80px) clamp(28px, 3vw, 40px); overflow: hidden;
}
.footer-card .orb { position: absolute; border-radius: 50%; background: var(--dark-2); }
.footer-card > * { position: relative; }
.footer-title { font-size: clamp(40px, 6.4vw, 100px); line-height: .95; font-weight: 600; letter-spacing: -.055em; }
.cycle { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; padding: 0 .06em .1em 0; margin-bottom: -.1em; }
.cycle > span { grid-area: 1 / 1; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--pop); transition: transform .7s var(--ease), opacity .6s, filter .7s; }
.cycle > span:not(.is-active) { transform: translateY(100%); opacity: 0; filter: blur(8px); }
.cycle > span.is-leaving { transform: translateY(-100%); opacity: 0; filter: blur(8px); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px 40px; margin-top: clamp(56px, 7vw, 96px); padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-cols .kicker { color: var(--on-dark-2); margin-bottom: 14px; }
.footer-cols a.big { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -.02em; }
.footer-cols a.big:hover { color: var(--on-dark); }
.footer-menu { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--on-dark); }
.footer-menu a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; font-size: 13px; color: var(--on-dark-2); }
.footer-bottom a:hover { color: #fff; }
.footer-slim .footer-card { padding-top: clamp(32px, 4vw, 56px); }
.footer-slim .footer-cols { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 820px) {
  .quote-cols { grid-template-columns: 1fr; }
  [data-hide-sm] { display: none !important; }
}

/* ---------- Motion helpers ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Home hero: headline + interactive project deck + services ticker
   ========================================================================== */
.hero-home { position: relative; padding-top: clamp(100px, 9.5vw, 140px); }
.hero-home::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 720px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(20, 20, 20, .1) 1px, transparent 1.3px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 28% 38%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 55% 60% at 28% 38%, #000 10%, transparent 72%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 80px);
  align-items: end; padding: clamp(28px, 5vw, 72px) 0 clamp(28px, 4vw, 48px);
}
.hero-title { margin-top: 22px; font-size: clamp(42px, 5.8vw, 88px); line-height: .98; font-weight: 600; letter-spacing: -.055em; }
.hero-title .ln { display: block; white-space: nowrap; }
.hero-title .ln > span { display: inline-block; }
.hero-title .serif { letter-spacing: -.02em; padding-right: .06em; }

.stage {
  position: relative; isolation: isolate; overflow: hidden; height: clamp(460px, 50vw, 680px);
  border-radius: clamp(24px, 3vw, 44px); background: #0c0c0c; color: #fff;
  --mx: 0; --my: 0;
}
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at calc(50% + var(--mx) * 100%) calc(45% + var(--my) * 100%), rgba(255, 255, 255, .07), transparent 65%);
}
.stage-glow {
  position: absolute; left: 50%; top: 44%; z-index: -1; width: min(62vw, 620px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: var(--glow, #444); filter: blur(100px); opacity: .42; transition: background 1.2s ease;
}
.deck { position: absolute; inset: 15% 0 0; z-index: 1; }
.deck-card {
  --w: clamp(170px, 21vw, 290px);
  position: absolute; left: 50%; top: 0; width: var(--w); aspect-ratio: 3 / 4; margin-left: calc(var(--w) / -2);
  transform: translateX(var(--x, 0)) translateY(var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  z-index: var(--z, 1); opacity: var(--o, 1);
  transition: transform 1s var(--ease), opacity .6s ease;
}
.deck-card[data-pos="0"] { --x: 0%; --y: 0%; --r: 0deg; --s: 1; --z: 5; --d: -24px; }
.deck-card[data-pos="-1"] { --x: -80%; --y: 8%; --r: -7deg; --s: .86; --z: 4; --d: 14px; }
.deck-card[data-pos="1"] { --x: 80%; --y: 8%; --r: 7deg; --s: .86; --z: 4; --d: 14px; }
.deck-card[data-pos="-2"] { --x: -150%; --y: 19%; --r: -13deg; --s: .72; --z: 3; --d: 30px; }
.deck-card[data-pos="2"] { --x: 150%; --y: 19%; --r: 13deg; --s: .72; --z: 3; --d: 30px; }
.deck-par { width: 100%; height: 100%; transform: translate(calc(var(--mx) * var(--d, 0px)), calc(var(--my) * var(--d, 0px))); transition: transform .6s ease-out; }
.deck-face {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: clamp(16px, 1.8vw, 24px); background: #222;
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: filter .6s, box-shadow .4s;
}
.deck-face > img { width: 100%; height: 100%; object-fit: cover; }
.deck-card[data-pos="0"]:hover .deck-face { box-shadow: 0 60px 90px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px rgba(255, 255, 255, .5); }
.face-cs { position: absolute; inset: 0; overflow: hidden; }
.face-cs .orb { position: absolute; left: -20%; top: 18%; width: 140%; aspect-ratio: 1; border-radius: 50%; }
.face-cs .face-phone { position: absolute; left: 50%; top: 12%; width: 66%; translate: -50% 0; }
/* Before the section is in view: cards wait in a neat pile, bar and glow hidden */
.motion .stage:not(.is-ready) .deck-card { transform: translateY(12%) rotate(calc((var(--i) - 2) * 4deg)) scale(.84); opacity: 1; }
.motion .stage:not(.is-ready) .deck-face { filter: brightness(.55); }
.motion .stage:not(.is-ready) .stage-bar { opacity: 0; transform: translateY(24px); }
.motion .stage:not(.is-ready) .stage-glow { opacity: 0; transform: scale(.6); }
.stage-bar { transition: opacity .7s var(--ease) .35s, transform .8s var(--ease) .35s; }
.stage-glow { transition: background 1.2s ease, opacity .8s ease, transform 1s var(--ease); }
.stage.is-entering .deck-card { transition-delay: calc(var(--i) * 70ms); transition-duration: 1.1s; }

/* Focus on the current card */
.deck-card[data-pos="0"] { --s: 1.06; }
.deck-card[data-pos="0"] .deck-face { box-shadow: 0 60px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .18), 0 0 60px -10px var(--glow, transparent); }
.deck-card[data-pos="-1"] .deck-face, .deck-card[data-pos="1"] .deck-face { filter: brightness(.42) saturate(.55) blur(1px); }
.deck-card[data-pos="-2"] .deck-face, .deck-card[data-pos="2"] .deck-face { filter: brightness(.3) saturate(.4) blur(2.5px); }
.deck-card:not([data-pos="0"]):hover .deck-face { filter: brightness(.8) saturate(.9) blur(0); }
.stage.is-ready .stage-glow { opacity: .55; }

.stage-chip { position: absolute; z-index: 6; }
.stage-chip.tl { left: clamp(14px, 3vw, 36px); top: clamp(14px, 3vw, 36px); }
.stage-chip.tr { right: clamp(14px, 3vw, 36px); top: clamp(14px, 3vw, 36px); }
.stage-bar { position: absolute; left: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.now {
  display: inline-flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 6px 6px 16px; border-radius: 999px;
  background: rgba(20, 20, 20, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff;
}
.now-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none; transition: background .6s; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
.now-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.now-txt small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.now-txt b { font-weight: 600; }
.now-txt .cat { color: var(--on-dark); }
.now .go { flex: none; display: grid; place-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; transition: transform .3s var(--ease); }
.now:hover .go { transform: scale(1.05); }
.ctrl { display: flex; align-items: center; gap: 8px; flex: none; }
.ctrl .count { font-size: 13px; color: var(--on-dark-2); margin-right: 6px; }
.ctrl .count b { color: #fff; font-weight: 600; }
.ctrl button {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 16px;
  background: rgba(20, 20, 20, .72); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background .25s, color .25s, transform .3s var(--ease);
}
.ctrl button:hover { background: #fff; color: var(--ink); transform: scale(1.06); }
@media (max-width: 760px) {
  .stage { height: 500px; }
  .deck { top: 20%; }
  .deck-card { --w: min(52vw, 230px); }
  .deck-card[data-pos="-1"] { --x: -66%; }
  .deck-card[data-pos="1"] { --x: 66%; }
  .deck-card[data-pos="-2"], .deck-card[data-pos="2"] { --o: 0; }
  .stage-chip, .ctrl .count, .now-txt .cat, .now-txt small { display: none; }
}

.ticker { margin-top: clamp(18px, 3vw, 30px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); width: max-content; padding-right: clamp(18px, 2.4vw, 32px); animation: ticker 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tk { font-size: clamp(30px, 4.4vw, 64px); font-weight: 600; letter-spacing: -.045em; white-space: nowrap; line-height: 1.1; }
.tk.serif { font-weight: 400; letter-spacing: -.01em; }
.tk-sep { font-size: clamp(16px, 2vw, 26px); color: var(--faint); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   Phone frame (from the edupression case study) + case study panel cover
   ========================================================================== */
.phone { position: relative; width: 100%; aspect-ratio: 429 / 888; }
.phone i, .phone .ps { position: absolute; display: block; }
.phone .pb { width: 1.4%; background: linear-gradient(90deg, #1c1e22, #4a4e55); border-radius: 3px 0 0 3px; left: -.9%; }
.phone .pb1 { top: 17%; height: 4.2%; }
.phone .pb2 { top: 24.5%; height: 7.5%; }
.phone .pb3 { top: 33.5%; height: 7.5%; }
.phone .pb4 { left: auto; right: -.9%; top: 27%; height: 11%; border-radius: 0 3px 3px 0; background: linear-gradient(270deg, #1c1e22, #4a4e55); }
.phone .pf { inset: 0; border-radius: 15.9% / 7.7%; background: linear-gradient(155deg, #6b7078 0%, #2b2e33 14%, #18191c 48%, #2b2e33 84%, #585c63 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 0 0 2.5px #0c0d0f; }
.phone .pi { left: 1.6%; right: 1.6%; top: .78%; bottom: .78%; border-radius: 14.6% / 7.05%; background: #050506; }
.phone .ps { left: 4.2%; right: 4.2%; top: 2.03%; bottom: 2.03%; border-radius: 12.7% / 5.9%; overflow: hidden; background: #050506; }
.phone .ps img { width: 100%; height: 100%; object-fit: cover; }
.phone .island { left: 50%; top: 1.35%; width: 31%; height: 4.1%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.phone .glare { inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 34%); pointer-events: none; }

.cs-panel { position: absolute; inset: 0; overflow: hidden; }
.cs-panel .orb { position: absolute; border-radius: 50%; transition: transform 1.4s var(--ease); }
.cs-panel .orb.lg { left: 50%; top: 22%; width: 66%; aspect-ratio: 1; margin-left: -33%; }
.cs-panel .orb.sm { left: 7%; top: 12%; width: 11%; aspect-ratio: 1; opacity: .5; }
.project-card:hover .cs-panel .orb.lg { transform: scale(1.06); }
.cs-stage {
  position: absolute; left: 50%; top: 13%; width: min(64%, 760px); translate: -50% 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr); gap: clamp(10px, 3vw, 44px); align-items: start;
  transition: transform 1.1s var(--ease);
}
.project-card:hover .cs-stage { transform: translateY(-3%); }
.cs-stage .side { margin-top: 16%; }
.cs-stage .side .phone { rotate: -6deg; }
.cs-stage .side.r .phone { rotate: 6deg; }
.cs-stage .phone { filter: drop-shadow(0 40px 50px rgba(4, 16, 44, .55)); }
.cs-chip { position: absolute; z-index: 3; }
.cs-chip.c0 { left: clamp(10px, 5%, 80px); top: clamp(60px, 34%, 240px); }
.cs-chip.c1 { right: clamp(10px, 5%, 80px); top: clamp(90px, 48%, 340px); }
.cs-chip-in {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: #fff; color: #1d3d6b;
  font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: 0 20px 40px -16px rgba(4, 16, 44, .5);
}
.cs-chip-in small { display: block; font-weight: 500; color: #4f6a93; font-size: 12.5px; }
.cs-chip-in .ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff98d; color: #1d3d6b; font-weight: 800; }
.cs-chip-in.navy { background: #1d3d6b; color: #fff; }
.cs-chip-in.navy small { color: #cbd9f5; }
.cs-chip-in.navy .ic { background: #ec7948; color: #fff; }
@media (max-width: 760px) {
  .cs-stage { width: 88%; top: 16%; }
  .cs-chip { display: none; }
}

/* ==========================================================================
   Services bento + tools marquee
   ========================================================================== */
.bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); gap: 14px;
  grid-template-areas: "brand brand ux framer" "brand brand ux webapps" "landing motion motion d3";
}
.b-brand { grid-area: brand; } .b-ux { grid-area: ux; } .b-framer { grid-area: framer; } .b-webapps { grid-area: webapps; }
.b-landing { grid-area: landing; } .b-motion { grid-area: motion; } .b-d3 { grid-area: d3; }
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "ux framer" "ux webapps" "landing d3" "motion motion"; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "brand" "ux" "framer" "webapps" "landing" "motion" "d3"; }
}
.b-card {
  position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 22px; border-radius: 28px; overflow: hidden;
  background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line);
  transition: transform .5s var(--ease), box-shadow .4s, background .4s, color .4s;
}
.b-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line), 0 34px 60px -38px rgba(0, 0, 0, .5); }
.b-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; }
.b-top .n { font-size: 11px; font-weight: 600; color: var(--faint); }
.b-copy { position: relative; z-index: 2; margin-top: auto; padding-top: 28px; padding-right: 44px; }
.b-copy h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.b-copy p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 440px; }
.b-card .go {
  position: absolute; right: 18px; bottom: 18px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: #fff; transform: scale(.5) rotate(-45deg); opacity: 0; transition: transform .5s var(--ease), opacity .3s;
}
.b-card:hover .go { transform: none; opacity: 1; }
.b-card.plain:hover { background: var(--ink); color: #fff; }
.b-card.plain:hover p { color: var(--on-dark); }
.b-card.plain:hover .tile-icon, .b-card.plain:hover .go { background: #fff; color: var(--ink); }
.b-card.dark { background: #0c0c0c; color: #fff; box-shadow: none; }
.b-card.dark p { color: var(--on-dark); }
.b-card.dark .go { background: #fff; color: var(--ink); }

.b-fan { position: absolute; left: 50%; top: 9%; width: 70%; height: 58%; translate: -50% 0; }
.b-fan img {
  position: absolute; left: 50%; top: 10%; width: 56%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px;
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9); transition: transform .9s var(--ease);
}
.b-fan img:nth-child(1) { transform: translateX(-92%) rotate(-10deg); }
.b-fan img:nth-child(2) { transform: translateX(-50%) translateY(-6%); z-index: 2; }
.b-fan img:nth-child(3) { transform: translateX(-8%) rotate(10deg); }
.b-card:hover .b-fan img:nth-child(1) { transform: translateX(-112%) rotate(-14deg) translateY(4%); }
.b-card:hover .b-fan img:nth-child(2) { transform: translateX(-50%) translateY(-12%) scale(1.04); }
.b-card:hover .b-fan img:nth-child(3) { transform: translateX(12%) rotate(14deg) translateY(4%); }

.b-ux { background: var(--panel); }
.b-ux .b-copy { margin-top: 18px; padding-top: 0; order: 0; }
.b-ux .b-top { order: -1; }
.b-phone { position: absolute; left: 50%; bottom: -44%; width: 62%; translate: -50% 0; rotate: -7deg; transition: transform .9s var(--ease); }
.b-card:hover .b-phone { transform: translateY(-8%) rotate(3deg); }

.b-video { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 50%; border-radius: 20px; overflow: hidden; background: var(--panel); }
.b-video video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.b-card:hover .b-video video { transform: scale(1.05); }
.b-motion .b-copy { max-width: 48%; }
@media (max-width: 620px) {
  .b-video { position: relative; inset: auto; width: auto; height: 190px; margin: -10px -10px 16px; order: -2; }
  .b-motion .b-copy { max-width: none; }
}

.b-bolt { position: absolute; right: 9%; top: 4%; width: 58%; aspect-ratio: 1; }

.tools { display: flex; align-items: center; gap: 20px; margin-top: 14px; padding: 12px 12px 12px 22px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.tools .kicker { flex: none; }
.tools-rail { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tools-track { display: flex; gap: 10px; width: max-content; padding-right: 10px; animation: ticker 30s linear infinite; }
.tools:hover .tools-track { animation-play-state: paused; }
.tool { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--bg); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tool .logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
@media (max-width: 620px) { .tools { border-radius: 24px; flex-direction: column; align-items: stretch; padding: 16px; } }

/* ==========================================================================
   About
   ========================================================================== */
.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }
.about-photo { position: relative; overflow: hidden; border-radius: 32px; aspect-ratio: 19 / 20; max-height: 660px; background: var(--panel); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .55); }
/* square crop from the top: head and shoulders down to the hands */
.about-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.about-tag { position: absolute; left: 18px; top: 18px; }
.about-cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 80px 20px 20px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff;
}
.about-cap b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.about-cap span { font-size: 14px; color: #d6d6d0; }
.about-cap .social { width: 38px; height: 38px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(8px); }
.about-cap .social:hover { background: #fff; color: var(--ink); }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 0 20px; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .v { display: flex; align-items: flex-start; font-size: clamp(40px, 4.4vw, 60px); line-height: .9; font-weight: 600; letter-spacing: -.06em; }
.stat .v sup { margin-left: 2px; font-size: .45em; line-height: 1; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.stat p { margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 420px) { .stat { padding: 0 12px; } .stat .v { font-size: 34px; } }
.work-tiles { margin-top: 28px; }
.wt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.wt { display: flex; flex-direction: column; padding: 16px 18px 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .4s var(--ease), box-shadow .3s; }
.wt:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 18px 30px -22px rgba(0, 0, 0, .35); }
.wt-years { align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 4px 9px; border-radius: 999px; background: var(--bg); }
.wt b { margin-top: 22px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.wt-role { margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.wt.dark { background: var(--ink); color: #fff; box-shadow: none; }
.wt.dark .wt-years { background: rgba(255, 255, 255, .1); color: var(--on-dark); }
.wt.dark .wt-role { color: var(--on-dark-2); }
@media (max-width: 520px) { .wt-grid { grid-template-columns: 1fr; } .wt b { margin-top: 14px; } }

/* ==========================================================================
   Testimonials — two drifting rows of quote cards
   ========================================================================== */
.h2.sm { font-size: clamp(36px, 4.6vw, 60px); }
.rating-card {
  justify-self: end; display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 24px;
  background: #fff; box-shadow: 0 0 0 1px var(--line);
}
.rc-big { font-size: clamp(40px, 4vw, 52px); line-height: 1; font-weight: 600; letter-spacing: -.05em; }
.rating-card .stars { font-size: 13px; letter-spacing: 2px; }
.rating-card p { margin-top: 4px; max-width: 190px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.rating-card .avatars img { width: 30px; height: 30px; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 900px) { .rating-card { justify-self: start; } }
@media (max-width: 480px) { .rating-card { flex-wrap: wrap; } }

.t-rows { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(36px, 4.5vw, 56px); }
.t-row { overflow: hidden; }
.t-track { display: flex; gap: 14px; width: max-content; padding-right: 14px; animation: t-drift 70s linear infinite; }
.t-row.rev .t-track { animation-direction: reverse; animation-duration: 80s; }
.t-row:hover .t-track { animation-play-state: paused; }
@keyframes t-drift { to { transform: translateX(-33.3333%); } }
.t-card {
  flex: none; width: clamp(280px, 26vw, 340px); min-height: 270px; display: flex; flex-direction: column;
  padding: 22px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line);
  transition: transform .5s var(--ease), box-shadow .4s;
}
.t-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 24px 40px -28px rgba(0, 0, 0, .4); }
.t-card.soft { background: var(--panel); box-shadow: none; }
.t-card.dark { background: var(--ink); color: #fff; box-shadow: none; }
.t-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-top .stars { font-size: 12px; letter-spacing: 2px; }
.t-co { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.t-card blockquote { margin-top: 18px; font-size: 16px; line-height: 1.5; letter-spacing: -.01em; color: var(--ink-2); }
.t-card blockquote b { color: var(--ink); font-weight: 600; }
.t-card .person { margin-top: auto; padding-top: 22px; }
.t-card .person img { width: 38px; height: 38px; border-radius: 12px; }
.t-card .person b { font-size: 14px; }
.t-card .person span { font-size: 12.5px; }
.t-card.dark .stars { color: #fff; }
.t-card.dark .t-co { color: var(--on-dark-2); }
.t-card.dark blockquote { color: var(--on-dark); }
.t-card.dark blockquote b { color: #fff; }
.t-card.dark .person span { color: var(--on-dark-2); }
.t-cta { justify-content: space-between; gap: 18px; background: var(--dark); color: #fff; box-shadow: none; }
.t-cta .chip { align-self: flex-start; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.t-cta p { font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; }
.t-cta p .serif { display: block; color: var(--on-dark); font-size: 1.05em; }
.t-cta .btn { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .t-row { overflow-x: auto; } }

/* ==========================================================================
   Footer bolt — white flash, rings, glow, mouse tilt (as on the current site)
   ========================================================================== */
.footer-bolt { position: absolute; right: clamp(-10px, 3vw, 60px); top: clamp(10px, 3vw, 50px); width: clamp(150px, 26vw, 380px); aspect-ratio: 1; z-index: 0; will-change: translate; }
.footer-cols, .footer-bottom { position: relative; z-index: 1; }
.footer-card .footer-title { position: relative; z-index: 1; }
.bolt-layer { position: absolute; inset: 0; }
.bolt-img { width: 100%; height: 100%; object-fit: contain; rotate: 20deg; user-select: none; -webkit-user-drag: none;
  filter: grayscale(1) brightness(6.5) contrast(.92); animation: bolt-flash 4s ease-out 1.2s infinite; }
.bolt-float { animation: bolt-float 4.5s ease-in-out infinite; }
.bolt-hover:hover { animation: bolt-wiggle .6s ease; }
.bolt-glow {
  position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, 0) 70%);
  animation: bolt-glow 4s ease-in-out infinite;
}
.bolt-ring {
  position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 0 24px rgba(255, 255, 255, .18);
  animation: bolt-ring 4s ease-out 1.2s infinite;
}
.bolt-ring.r2 { animation-delay: 1.55s; }
.bolt-art { position: absolute; }
.bolt-art .bolt-float { position: absolute; inset: 0; }
@keyframes bolt-flash {
  0%, 35%, 100% { filter: grayscale(1) brightness(6.5) contrast(.92) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); scale: 1; }
  17.5% { filter: grayscale(1) brightness(10) contrast(.92) drop-shadow(0 0 28px rgba(255, 255, 255, .55)); scale: 1.06; }
}
@keyframes bolt-ring { 0% { scale: .5; opacity: .7; } 35%, 100% { scale: 1.7; opacity: 0; } }
@keyframes bolt-glow { 0%, 100% { opacity: .55; scale: .95; } 50% { opacity: 1; scale: 1.08; } }
@keyframes bolt-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes bolt-wiggle { 0% { rotate: 0deg; scale: 1; } 25% { rotate: -8deg; scale: 1.1; } 50% { rotate: 6deg; scale: 1.1; } 75% { rotate: -3deg; scale: 1.05; } 100% { rotate: 0deg; scale: 1; } }
@media (max-width: 700px) { .footer-bolt { right: -14px; top: 8px; opacity: .8; } }

/* ==========================================================================
   Hero text area
   ========================================================================== */
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-lead { max-width: 430px; justify-self: start; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.hero-lead b { color: var(--ink); font-weight: 600; }
.hero-trust { display: flex; align-items: center; gap: 12px; }
.hero-trust .avatars img { width: 34px; height: 34px; box-shadow: 0 0 0 2.5px var(--bg); }
.hero-trust .stars { display: block; font-size: 11px; letter-spacing: 2px; line-height: 1.3; }
.hero-trust b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.status {
  position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 6px 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.status::after {
  content: ""; width: 28px; height: 1px; background: var(--ink); opacity: .35;
  transform-origin: left; transition: width .5s var(--ease), opacity .3s;
}
.status:hover::after { width: 48px; opacity: 1; }
.status:hover { color: var(--ink); }
.status-dot { position: relative; display: grid; place-items: center; width: 14px; height: 14px; }
.status-dot::before, .status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2fbf4a; animation: status-ping 2.4s var(--ease) infinite; }
.status-dot::after { animation-delay: 1.2s; }
.status-dot i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #2fbf4a; box-shadow: 0 0 0 3px rgba(47, 191, 74, .18); }
@keyframes status-ping { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }

.stage-wrap { position: relative; }
.hero-badge {
  position: absolute; z-index: 8; right: clamp(20px, 4vw, 56px); top: 0; translate: 0 -50%;
  display: grid; place-items: center; width: clamp(70px, 5.8vw, 82px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; color: var(--ink);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--line), 0 18px 32px -18px rgba(0, 0, 0, .45);
  transition: transform .5s var(--ease), box-shadow .4s;
}
.hero-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.hero-badge text { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; fill: var(--ink); }
.hero-badge .hb-line { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.hb-core {
  position: relative; display: grid; place-items: center; width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 12px; font-family: var(--sans); transition: transform .5s var(--ease), background .3s;
}
.hb-core::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(20, 20, 20, .14); animation: hb-pulse 2.6s ease-out infinite; }
@keyframes hb-pulse { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.hero-badge:hover { transform: scale(1.06); box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--ink), 0 22px 36px -18px rgba(0, 0, 0, .5); }
.hero-badge:hover svg { animation-duration: 6s; }
.hero-badge:hover .hb-core { transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) { .hero-badge { width: 66px; right: 16px; } }

/* Hero: two columns that share the same height */
.hero-home .hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); row-gap: 28px;
  align-items: stretch; padding: clamp(24px, 4vw, 60px) 0 clamp(80px, 10vw, 144px);
}
.hero-left, .hero-right { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.hero-left .hero-title { margin-top: 22px; }
.hero-right .hero-lead { margin: 0; }
.hero-right .hero-actions { margin-top: 24px; }
.hero-right .hero-trust { margin-top: 32px; }

@media (max-width: 900px) {
  .hero-home .hero-grid { grid-template-columns: 1fr; }
  .hero-right .hero-trust { margin-top: 26px; }
}

/* Slider ambience: runs from page load, then settles behind the cards once the deck fans out */
.stage-sweep {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 36%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .06) 55%, transparent);
  animation: stage-sweep 5.5s cubic-bezier(.45, 0, .2, 1) 1s infinite; transition: opacity .8s ease;
}
@keyframes stage-sweep { 0% { left: -40%; } 70%, 100% { left: 110%; } }
.stage.is-ready .stage-sweep { opacity: 0; }
.motion .stage:not(.is-ready) .deck-card { animation: pile-breathe 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); }
@keyframes pile-breathe { from { rotate: -2.5deg; translate: 0 0; } to { rotate: 2.5deg; translate: 0 -10px; } }

.stage-marquee { position: absolute; left: 0; right: 0; top: 11%; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity 1.2s ease, transform 1.4s var(--ease); }
.sm-track {
  display: flex; align-items: center; gap: .35em; width: max-content; padding-right: .35em; animation: ticker 40s linear infinite;
  font-size: clamp(56px, 9.5vw, 148px); font-weight: 600; line-height: 1.05; letter-spacing: -.05em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .24);
}
.sm-track .serif { font-weight: 400; letter-spacing: -.01em; color: rgba(255, 255, 255, .12); -webkit-text-stroke: 0; }
.sm-sep { font-size: .3em; color: rgba(255, 255, 255, .35); -webkit-text-stroke: 0; }
.stage.is-ready .stage-marquee { opacity: .35; transform: translateY(-14%); }


/* Footer as a folder: a short tab with a slanted edge that flows into the card */
.footer-folder { position: relative; max-width: var(--wrap-wide); margin: 0 auto; padding-top: 31px; --tab-h: 32px; --tab-tan: .4452; }
.footer-folder .footer-card { border-top-left-radius: 0; }
.footer-tab {
  position: absolute; left: 0; top: 0; z-index: 1; height: var(--tab-h); display: inline-flex; align-items: center; gap: 12px;
  padding: 4px 4px 0 18px; border-radius: 22px 0 0 0; background: #000; color: #fff; white-space: nowrap;
}
/* right side of the tab: one smooth S-curve from the tab top down into the card */
.footer-tab::after {
  content: ""; position: absolute; z-index: -1; top: 0; left: calc(100% - 1px); width: 68px; height: calc(100% + 1px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 38' preserveAspectRatio='none'%3E%3Cpath d='M0 0H6C22 0 25 8 29 16L33 23C38 33 44 38 58 38H0Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.ft-lights { display: inline-flex; gap: 6px; padding-right: 12px; border-right: 1px solid rgba(255, 255, 255, .12); }
.ft-lights i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.ft-lights i:nth-child(2) { background: rgba(255, 255, 255, .5); }
.ft-lights i:nth-child(3) { background: rgba(255, 255, 255, .25); }
.ft-file { display: inline-flex; align-items: center; gap: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .01em; color: var(--on-dark); }
.ft-caret { width: 6px; height: 12px; margin-left: 3px; background: #fff; border-radius: 1px; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.footer-card .footer-title { max-width: 68%; }
@media (max-width: 700px) { .footer-card .footer-title { max-width: none; } }

/* Pinned left columns: stay in view while the right side scrolls, release at the end of the section */
.about { align-items: start; }
.about-photo { position: sticky; top: 104px; max-height: min(540px, calc(100vh / var(--z) - 140px)); }
.pin-left > :first-child { position: sticky; top: 104px; align-self: start; }
@media (max-width: 860px) {
  .about-photo, .pin-left > :first-child { position: relative; top: auto; }
}

/* ==========================================================================
   My work: filters + project grid
   ========================================================================== */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
.wk { display: flex; flex-direction: column; min-width: 0; }
.wk.featured { grid-column: 1 / -1; }
.wk-media {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: clamp(20px, 2.4vw, 32px); background: var(--panel);
  box-shadow: 0 0 0 0 var(--accent); transition: box-shadow .45s var(--ease), transform .6s var(--ease);
}
.wk.featured .wk-media { aspect-ratio: 16 / 7.2; }
.wk-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.wk:hover .wk-media { box-shadow: 0 0 0 3px var(--accent), 0 40px 70px -40px rgba(0, 0, 0, .5); }
.wk:hover .wk-media > img { transform: scale(1.05); }
.wk-num {
  position: absolute; left: 18px; top: 16px; z-index: 3; font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1;
  color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}
.wk-open {
  position: absolute; left: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px 0 16px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600;
  opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .5s var(--ease);
}
.wk-open i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--ink); font-style: normal; font-size: 13px; }
.wk:hover .wk-open { opacity: 1; transform: none; }
.wk-info { padding: 18px 4px 0; }
.wk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.wk-head h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.wk-cat { font-size: 13.5px; color: var(--muted); }
.wk-year { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.wk-title { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; color: var(--ink-2); }
.wk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.wk-tags span { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--line-2); font-size: 12px; font-weight: 500; color: var(--ink-2); }
@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
  .wk.featured .wk-media { aspect-ratio: 4 / 3.4; }
  .wk-open { opacity: 1; transform: none; }
}
.wk:hover .cs-stage { transform: translateY(-3%); }
.wk:hover .cs-panel .orb.lg { transform: scale(1.06); }

.wk-metric {
  position: absolute; right: 14px; top: 14px; z-index: 3; display: flex; flex-direction: column; max-width: 190px; padding: 10px 14px 11px;
  border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 11.5px; line-height: 1.3; color: var(--ink-2); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .45);
}
.wk-metric b { font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -.04em; color: var(--ink); margin-bottom: 4px; }

.cut-cover { position: absolute; inset: 0; overflow: hidden; }
.cut-cover .orb { position: absolute; left: 50%; top: 30%; width: 90%; aspect-ratio: 1; margin-left: -45%; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: transform 1.2s var(--ease); }
.cut-cover img { position: absolute; left: 50%; bottom: -4%; height: 92%; width: auto; max-width: none; translate: -50% 0; transition: transform 1.1s var(--ease); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.wk:hover .cut-cover img, .project-card:hover .cut-cover img { transform: translateY(-3%); }
.wk:hover .cut-cover .orb { transform: scale(1.08); }
.face-cut { position: absolute; left: 50%; bottom: -6%; height: 96%; width: auto; max-width: none; translate: -50% 0; }

.soon-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; padding: clamp(18px, 2vw, 26px); color: var(--accent-ink); overflow: hidden; }
.soon-cover::before {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 14px);
}
.soon-cover::after { content: ""; position: absolute; right: -20%; top: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.soon-name { position: relative; z-index: 1; font-family: var(--serif); font-style: italic; font-size: clamp(40px, 4.4vw, 64px); line-height: .95; letter-spacing: -.01em; }
.soon-chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(0, 0, 0, .18); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.soon-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: live 2.2s ease-in-out infinite; }
.wk.soon { cursor: default; }
.wk.soon .wk-cat { padding: 3px 10px; border-radius: 999px; background: var(--line-2); font-size: 12px; font-weight: 600; }

.text-cta { display: inline-flex; gap: 8px; font-size: 14px; color: var(--muted); }
.text-cta span { font-weight: 600; color: var(--ink); background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 0 1.5px; transition: background-size .45s var(--ease); }
.text-cta:hover span { background-size: 100% 1.5px; }

.deck-card[data-pos="-3"], .deck-card[data-pos="3"] { --o: 0; --s: .6; --z: 1; }

/* My work: filters (restored) + group dividers + case study badge */
.work-filters {
  position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; align-self: flex-start;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px var(--line), 0 8px 24px -12px rgba(0, 0, 0, .18);
}
.wf-ind { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--ink); opacity: 0; pointer-events: none; transition: translate .5s var(--ease), width .5s var(--ease), height .3s, opacity .3s; }
.wf { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background .25s, color .3s; }
.wf span { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--line-2); font-size: 11px; font-weight: 600; color: var(--muted); transition: background .3s, color .3s; }
.wf:hover { background: var(--line-2); color: var(--ink); }
.wf:hover span { background: #fff; }
.wf.is-active { background: var(--ink); color: #fff; font-weight: 600; }
.wf.is-active span { background: rgba(255, 255, 255, .16); color: #fff; }
/* with JS the black pill slides between tabs instead of each tab painting its own */
.work-filters.has-ind .wf.is-active { background: none; }
.work-filters.has-ind .wf-ind { opacity: 1; }
.work-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.work-group + .wk { margin-top: -8px; }
.wk + .work-group { margin-top: clamp(16px, 3vw, 40px); }
.wg-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.wg-line { flex: 1; height: 1px; background: var(--line); }
.wg-count { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1; color: var(--faint); }
.wk-badge { padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; letter-spacing: .02em; }

/* ==========================================================================
   Process page: journey track, scroll story, planner
   ========================================================================== */
.story { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.story-left { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: flex-start; }
.story-now { margin: 36px 0 28px; width: 100%; max-width: 380px; padding: 22px 24px; border-radius: 24px; background: var(--ink); color: #fff; }
.sn-n { display: flex; align-items: baseline; gap: 8px; }
.sn-n b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(64px, 7vw, 96px); line-height: .9; }
.sn-n small { font-size: 14px; color: var(--on-dark-2); }
.sn-t { display: block; margin-top: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.sn-bar { display: block; margin-top: 18px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.sn-bar i { display: block; height: 100%; background: #fff; border-radius: 3px; transition: width .7s var(--ease); }
.story-now.flip .sn-n b, .story-now.flip .sn-t { animation: sn-flip .5s var(--ease); }
@keyframes sn-flip { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

.story-right { position: relative; display: flex; flex-direction: column; gap: clamp(18px, 3vw, 28px); padding-left: 44px; }
.story-rail { position: absolute; left: 11px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--line); }
.story-rail i { position: absolute; left: 0; right: 0; top: 0; height: 0; background: var(--ink); border-radius: 2px; transition: height .2s linear; }
.story-step { position: relative; }
.ss-dot { position: absolute; left: -44px; top: 26px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .4s, background .4s; }
.story-step.is-active .ss-dot, .story-step.is-done .ss-dot { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 5px rgba(20, 20, 20, .08); }
.ss-card {
  padding: clamp(22px, 2.6vw, 32px); border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line);
  opacity: .5; transform: scale(.98); transition: opacity .5s var(--ease), transform .6s var(--ease), box-shadow .5s;
}
.story-step.is-active .ss-card { opacity: 1; transform: none; box-shadow: 0 0 0 1.5px var(--ink), 0 30px 60px -40px rgba(0, 0, 0, .45); }
.story-step.is-done .ss-card { opacity: .85; }
.ss-top { display: flex; align-items: center; gap: 12px; }
.ss-card h3 { margin-top: 18px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.ss-card p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.ss-card ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ss-card li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 500; }
.ss-card li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; }
.ss-card li svg { width: 11px; height: 11px; }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
  .story-left { position: relative; top: auto; }
  .story-now { display: none; }
}

/* Working together: live UI vignettes, each replays its little story while on screen */
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 760px) { .trust-grid { grid-template-columns: 1fr; } }
.tv { --cyc: 8s; padding: 14px 14px 22px; border-radius: 28px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); transition: background .4s, box-shadow .4s; }
.tv:hover { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.tv h4 { margin: 20px 10px 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.tv > p { margin: 6px 10px 0; font-size: 14.5px; line-height: 1.55; color: var(--on-dark); }
.tv-ui {
  position: relative; height: 270px; display: grid; place-items: center; padding: 44px 20px 20px; border-radius: 20px; color: var(--ink); overflow: hidden;
  background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .07) 1px, transparent 0) 0 0 / 16px 16px, #f4f4f1;
}
.tv-ui > .chat, .tv-ui > .files, .tv-ui > .ticket, .tv-ui > .cv-frame { transition: transform .6s var(--ease); }
.tv:hover .tv-ui > .chat, .tv:hover .tv-ui > .files, .tv:hover .tv-ui > .ticket, .tv:hover .tv-ui > .cv-frame { transform: translateY(-4px) scale(1.015); }
.tv-tag { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.tv-tag i { width: 6px; height: 6px; border-radius: 50%; background: #2fbf4a; animation: live 2.2s ease-in-out infinite; }

/* 1 · weekly update chat */
.chat { width: 100%; max-width: 410px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; gap: 12px; }
.msg > img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.msg-body { position: relative; flex: 1; }
.msg-in { padding: 13px 15px; border-radius: 4px 18px 18px 18px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .3); }
.msg b { display: block; font-size: 13.5px; font-weight: 600; }
.msg b small { margin-left: 6px; font-size: 11.5px; font-weight: 500; color: var(--faint); }
.msg p { margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.msg-file { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 7px 7px 11px; border-radius: 12px; background: var(--bg); font-size: 12px; font-weight: 600; }
.msg-file svg { width: 14px; height: 14px; flex: none; }
.msg-file em { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-style: normal; font-size: 11px; }
.typing { position: absolute; left: 0; top: 0; display: flex; gap: 4px; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .3); opacity: 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: tv-dot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.reply { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.reply span { padding: 9px 13px; border-radius: 16px 4px 16px 16px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; }
.reply small { font-size: 10.5px; color: var(--muted); }

/* 2 · comments on the canvas */
.tv-canvas { place-items: start; }
.cv-frame { position: absolute; left: 24px; right: 76px; top: 50px; bottom: -24px; display: flex; flex-direction: column; gap: 9px; padding: 12px 16px 36px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .3); }
.cv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cv-dots { display: flex; gap: 4px; } .cv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.cv-ver { display: grid; font-size: 10.5px; }
.cv-ver b { grid-area: 1 / 1; padding: 2px 7px; border-radius: 999px; background: var(--bg); font-weight: 700; }
.cv-ver b + b { background: var(--ink); color: #fff; opacity: 0; }
.cv-head { height: 12px; width: 62%; border-radius: 6px; background: #cfcfca; transform-origin: left center; }
.cv-line { height: 7px; width: 80%; border-radius: 6px; background: var(--line); }
.cv-line.s { width: 55%; }
.cv-block { position: relative; flex: 1; min-height: 60px; margin-top: 4px; border-radius: 10px; background: var(--ink); overflow: hidden; }
.cv-block i { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); translate: -100% 0; }
.pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; }
.pin.p1 { left: 52%; top: 78px; } .pin.p2 { left: 34%; top: 170px; }
.cmt { position: absolute; z-index: 2; max-width: 180px; padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .4); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.cmt b { display: block; font-size: 11.5px; color: var(--ink); }
.cmt.c1 { right: 14px; top: 54px; }
.cmt.c2 { right: 26px; top: 150px; background: var(--ink); color: #e8e8e4; }
.cmt.c2 b { color: #fff; }
.cursor { position: absolute; z-index: 4; left: 0; top: 0; display: flex; align-items: flex-start; color: #2f6bff; opacity: 0; pointer-events: none; }
.cursor svg { width: 18px; height: 18px; }
.cursor em { margin: 14px 0 0 -2px; padding: 2px 7px; border-radius: 999px; background: #2f6bff; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 600; }

/* 3 · handover files */
.files { width: 100%; max-width: 380px; padding: 6px 0; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .3); overflow: hidden; }
.fl-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 10px; font-size: 13.5px; }
.fl-tag { padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; }
.fl-prog { display: block; height: 2px; background: var(--line-2); }
.fl-prog i { display: block; height: 100%; background: #2fbf4a; transform-origin: left; }
.fl-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; }
.fl-row + .fl-row { border-top: 1px solid var(--line-2); }
.fl-row small { color: var(--muted); font-size: 12px; }
.fl-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2fbf4a; color: #fff; }
.fl-ic svg { width: 11px; height: 11px; }

/* 4 · support ticket */
.ticket { width: 100%; max-width: 380px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .3); }
.tk-row { display: flex; justify-content: space-between; align-items: center; }
.tk-row small, .tk-foot small { font-size: 11.5px; color: var(--muted); }
.tk-status { display: grid; }
.tk-status b { grid-area: 1 / 1; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; }
.tk-open { background: rgba(242, 169, 59, .18); color: #a76508; opacity: 0; }
.tk-done { background: rgba(47, 191, 74, .14); color: #1f8a33; }
.tk-q { display: block; margin-top: 10px; font-size: 14.5px; font-weight: 600; }
.tk-reply { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); font-size: 12.5px; color: var(--ink-2); }
.tk-reply img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.tk-time { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); }
.tk-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; font-weight: 600; }
.tk-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.tk-bar i { display: block; width: 40%; height: 100%; background: var(--ink); transform-origin: left; }

/* The loops (only while .is-play, so the static layout is the fallback) */
@keyframes tv-dot { 0%, 100% { translate: 0 0; opacity: .5; } 50% { translate: 0 -3px; opacity: 1; } }
@keyframes tv-typing { 0%, 3% { opacity: 0; scale: .8; } 7%, 20% { opacity: 1; scale: 1; } 24%, 100% { opacity: 0; scale: .9; } }
@keyframes tv-in-a { 0%, 22% { opacity: 0; translate: 0 14px; } 28%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 -6px; } }
@keyframes tv-in-b { 0%, 34% { opacity: 0; translate: 0 10px; } 40%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 -6px; } }
@keyframes tv-in-c { 0%, 52% { opacity: 0; translate: 0 14px; scale: .92; } 58%, 90% { opacity: 1; translate: 0 0; scale: 1; } 97%, 100% { opacity: 0; translate: 0 -6px; } }
.tv.is-play .typing { animation: tv-typing var(--cyc) ease infinite; }
.tv.is-play .msg-in { animation: tv-in-a var(--cyc) var(--ease) infinite; }
.tv.is-play .msg-file { animation: tv-in-b var(--cyc) var(--ease) infinite; }
.tv.is-play .reply { animation: tv-in-c var(--cyc) var(--ease) infinite; }

@keyframes tv-cursor { 0% { opacity: 0; translate: 340px 240px; } 6% { opacity: 1; } 22%, 27% { translate: 214px 88px; scale: 1; } 30% { translate: 214px 88px; scale: .82; } 33% { scale: 1; } 48%, 51% { translate: 142px 180px; scale: 1; } 54% { translate: 142px 180px; scale: .82; } 57%, 88% { opacity: 1; scale: 1; translate: 160px 214px; } 94%, 100% { opacity: 0; translate: 160px 214px; } }
@keyframes tv-pin-a { 0%, 29% { opacity: 0; scale: 0; } 34%, 90% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: .6; } }
@keyframes tv-pin-b { 0%, 53% { opacity: 0; scale: 0; } 58%, 90% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: .6; } }
@keyframes tv-cmt-a { 0%, 33% { opacity: 0; translate: 0 8px; scale: .9; } 39%, 90% { opacity: 1; translate: 0 0; scale: 1; } 97%, 100% { opacity: 0; } }
@keyframes tv-cmt-b { 0%, 66% { opacity: 0; translate: 0 8px; scale: .9; } 72%, 90% { opacity: 1; translate: 0 0; scale: 1; } 97%, 100% { opacity: 0; } }
@keyframes tv-head { 0%, 60% { scale: 1 1; background: #cfcfca; } 66%, 92% { scale: 1.12 1.6; background: #141414; } 100% { scale: 1 1; background: #cfcfca; } }
@keyframes tv-ver { 0%, 62% { opacity: 0; } 66%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tv-shine { 0%, 62% { translate: -100% 0; } 78%, 100% { translate: 100% 0; } }
.tv.is-play .cursor { animation: tv-cursor var(--cyc) cubic-bezier(.45, .05, .25, 1) infinite; }
.tv.is-play .pin.p1 { animation: tv-pin-a var(--cyc) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.tv.is-play .pin.p2 { animation: tv-pin-b var(--cyc) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.tv.is-play .cmt.c1 { animation: tv-cmt-a var(--cyc) var(--ease) infinite; }
.tv.is-play .cmt.c2 { animation: tv-cmt-b var(--cyc) var(--ease) infinite; }
.tv.is-play .cv-head { animation: tv-head var(--cyc) var(--ease) infinite; }
.tv.is-play .cv-ver b + b { animation: tv-ver var(--cyc) ease infinite; }
.tv.is-play .cv-block i { animation: tv-shine var(--cyc) ease infinite; }

@keyframes tv-prog { 0%, 4% { scale: 0 1; opacity: 1; } 46%, 90% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
@keyframes tv-row-fade { 0%, 6% { opacity: .35; } 12%, 86% { opacity: 1; } 96%, 100% { opacity: .35; } }
@keyframes tv-row-check { 0%, 6% { scale: 0; } 12%, 86% { scale: 1; } 96%, 100% { scale: 0; } }
@keyframes tv-tag { 0%, 50% { opacity: 0; scale: .6; } 56%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
.tv.is-play .fl-prog i { animation: tv-prog var(--cyc) var(--ease) infinite; }
.tv.is-play .fl-row { animation: tv-row-fade var(--cyc) ease infinite; animation-delay: calc(var(--k) * .7s); }
.tv.is-play .fl-ic { animation: tv-row-check var(--cyc) cubic-bezier(.34, 1.56, .64, 1) infinite; animation-delay: calc(var(--k) * .7s); }
.tv.is-play .fl-tag { animation: tv-tag var(--cyc) cubic-bezier(.34, 1.56, .64, 1) infinite; }

@keyframes tv-open { 0%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tv-done { 0%, 46% { opacity: 0; scale: .7; } 52%, 94% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes tv-reply { 0%, 30% { opacity: 0; translate: 0 10px; } 38%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes tv-bar { 0%, 10% { scale: 0 1; } 50%, 100% { scale: 1 1; } }
.tv.is-play .tk-open { animation: tv-open var(--cyc) ease infinite; }
.tv.is-play .tk-done { animation: tv-done var(--cyc) cubic-bezier(.34, 1.56, .64, 1) infinite; }
.tv.is-play .tk-reply { animation: tv-reply var(--cyc) var(--ease) infinite; }
.tv.is-play .tk-bar i { animation: tv-bar var(--cyc) var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .tv.is-play * { animation: none !important; } }


/* Inner page heroes: same split + headline size as the home hero */
.hero-page .hero-title .ln { white-space: normal; }
.hero-page .hero-title { text-wrap: balance; }
/* Inner-page heroes: one centred column */
.page-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: clamp(56px, 7vw, 96px); }
.page-hero .hero-title { max-width: 1000px; }
.page-hero .hero-lead { max-width: 560px; margin-top: 24px; justify-self: auto; }
.page-hero .hero-actions { justify-content: center; margin-top: 28px; }
/* The section straight after an inner-page hero starts at the hero's own bottom spacing */
.hero-page + .section { padding-top: 0; }

/* Process: one designer, every stage (stats, pinned stage rail, stage cards that light up as you scroll) */
.ur-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 4.5vw, 56px); padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ur-stats .stat:first-child { padding-left: 0; }
.ur { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }

/* rail */
.ur-rail { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 22px; padding: 22px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-lift); }
.ur-steps { position: relative; }
.ur-steps ol { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ur-fill { position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: var(--line-2); }
.ur-fill i { display: block; width: 100%; height: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--ink); transition: height .2s linear; }
.ur-steps li { position: relative; display: flex; align-items: center; gap: 14px; padding: 6px 10px 6px 0; border-radius: 14px; }
.ur-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 12px; font-weight: 600; color: var(--muted); transition: background .4s, color .4s, box-shadow .4s, transform .5s var(--ease); }
.ur-dot .num, .ur-dot svg { grid-area: 1 / 1; transition: opacity .3s, transform .45s var(--ease); }
.ur-dot svg { width: 15px; height: 15px; opacity: 0; transform: scale(.4); }
.ur-st b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--muted); transition: color .4s; }
.ur-st small { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); transition: color .4s; }
.ur-steps li.is-active .ur-dot { background: var(--ink); color: #fff; box-shadow: 0 0 0 6px rgba(20, 20, 20, .08); transform: scale(1.06); }
.ur-steps li.is-active .ur-st b { color: var(--ink); font-size: 18px; }
.ur-steps li.is-active .ur-st small { color: var(--muted); }
.ur-steps li.is-done .ur-dot { background: var(--ink); color: #fff; box-shadow: none; }
.ur-steps li.is-done .ur-dot .num { opacity: 0; transform: scale(.4); }
.ur-steps li.is-done .ur-dot svg { opacity: 1; transform: none; }
.ur-steps li.is-done .ur-st b { color: var(--ink); }
.ur-me { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--bg); font-size: 13px; line-height: 1.45; color: var(--muted); }
.ur-me img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.ur-me b { display: block; font-size: 14px; color: var(--ink); }

/* cards */
.ur-list { display: flex; flex-direction: column; gap: 16px; }
.ur-card {
  position: relative; display: flex; flex-direction: column; min-height: 470px; padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate;
  opacity: .35; transform: scale(.965); filter: saturate(.6); transition: opacity .6s, transform .8s var(--ease), filter .6s, box-shadow .6s;
}
.ur-card.is-active { opacity: 1; transform: none; filter: none; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .55); }
.ur-card.is-done { opacity: .55; }
.ur-ring { position: absolute; z-index: -1; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); animation: ur-spin 40s linear infinite; }
.ur-ring::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.ur-ring.r2 { right: -40px; top: -40px; width: 260px; height: 260px; animation-duration: 26s; animation-direction: reverse; }
@keyframes ur-spin { to { rotate: 360deg; } }
.ur-card .ur-big { position: absolute; z-index: -1; right: 6px; bottom: -48px; font-size: clamp(180px, 20vw, 300px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14); translate: 0 60px; opacity: 0; transition: opacity 1s, translate 1.2s var(--ease); }
.ur-card.is-seen .ur-big { opacity: 1; translate: 0 0; }
.ur-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.ur-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: #2fbf4a; animation: live 2.2s ease-in-out infinite; }
.ur-title { margin-top: 14px; font-size: clamp(44px, 5vw, 72px); line-height: .95; font-weight: 600; letter-spacing: -.055em; }
.ur-line { max-width: 440px; margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--on-dark); }
.ur-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: 28px; }
.ur-cols .kicker, .ur-toolrow .kicker { display: block; margin-bottom: 12px; color: var(--on-dark-2); }
.ur-svc { display: flex; flex-wrap: wrap; gap: 6px; }
.ur-svc a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; font-weight: 600; transition: background .3s, color .3s; }
.ur-svc a span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.ur-svc svg { width: 14px; height: 14px; }
.ur-svc a:hover { background: #fff; color: var(--ink); }
.ur-svc a:hover span { background: var(--bg); }
.ur-get { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ur-get li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #e8e8e4; }
.ur-get svg { width: 14px; height: 14px; flex: none; color: #2fbf4a; }
.ur-toolrow { margin-top: auto; padding-top: 26px; }
.ur-toolrow > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ur-tool { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 6px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; }
.ur-tool i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 700; }

/* every element plays in the first time its card reaches the middle of the screen */
.motion .ur-card > :is(.ur-kicker, .ur-title, .ur-line, .ur-cols > div, .ur-toolrow), .motion .ur-get li, .motion .ur-tool { opacity: 0; translate: 0 22px; filter: blur(6px); transition: opacity .55s, translate .8s var(--ease), filter .6s; }
.motion .ur-cols > div { opacity: 0; translate: 0 22px; filter: blur(6px); transition: opacity .55s, translate .8s var(--ease), filter .6s; }
.motion .ur-card.is-seen > :is(.ur-kicker, .ur-title, .ur-line, .ur-toolrow), .motion .ur-card.is-seen .ur-cols > div { opacity: 1; translate: 0 0; filter: blur(0); transition-delay: calc(var(--k, 0) * 80ms + 60ms); }
.motion .ur-card.is-seen .ur-get li { opacity: 1; translate: 0 0; filter: blur(0); transition-delay: calc(var(--g) * 90ms + 420ms); }
.motion .ur-card.is-seen .ur-tool { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .5s, translate .7s cubic-bezier(.34, 1.56, .64, 1), filter .5s; transition-delay: calc(var(--t) * 90ms + 560ms); }
.motion .ur-get li { translate: -14px 0; }

@media (max-width: 1000px) {
  .ur { grid-template-columns: 1fr; }
  .ur-rail { display: none; }
  .ur-card, .ur-card.is-done { min-height: 0; opacity: 1; transform: none; filter: none; }
}
@media (max-width: 640px) {
  .ur-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .ur-stats .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .ur-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ur-ring { animation: none; } }

/* How we work: warm panel that holds the section (also used by the Services toolkit) */
.pt-panel {
  position: relative; padding: clamp(28px, 5vw, 72px); border-radius: clamp(28px, 3.5vw, 44px); overflow: clip; isolation: isolate;
  background: radial-gradient(60% 70% at 85% 0%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .06) 1px, transparent 0) 0 0 / 18px 18px, #ebeae5;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.pt-trust { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pt-trust .avatars img { width: 26px; height: 26px; box-shadow: 0 0 0 2px #fff; }
.pt-trust .stars { font-size: 12px; letter-spacing: 1px; }
.pt-foot { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.pt-foot .btn-row { justify-content: center; }
.pt-foot p { font-size: 15px; color: var(--muted); }
.pt-foot b { color: var(--ink); font-weight: 600; }
.pt-trust > span:last-child { white-space: nowrap; }
@media (max-width: 480px) { .pt-panel { padding: 24px 14px; } .pt-trust .stars { display: none; } }

/* How we work: three stages with live mini illustrations */
.pt-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pt-head .pt-trust { margin-bottom: 22px; }
.pt-head .h2 { margin-top: 14px; max-width: 900px; }
.pt-head .body { max-width: 560px; margin-top: 18px; }
.pt-rail { display: flex; align-items: center; margin: clamp(36px, 4.5vw, 52px) 0 0; padding: 0 calc(100% / 6 - 46px); }
.pt-node { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .4s, color .4s; }
.pt-node b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); font-size: 11px; transition: background .4s, color .4s; }
.pt-link { flex: 1; height: 1.5px; margin: 0 10px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.pt-link i { display: block; height: 100%; background: var(--ink); transform-origin: left; scale: 0 1; transition: scale 1.2s var(--ease); }
.pt-rail.is-in .pt-node:nth-child(1), .pt-rail.is-in.n2 .pt-node:nth-child(3), .pt-rail.is-in.n3 .pt-node:nth-child(5) { background: var(--ink); color: #fff; box-shadow: none; }
.pt-rail.is-in .pt-node:nth-child(1) b, .pt-rail.is-in.n2 .pt-node:nth-child(3) b, .pt-rail.is-in.n3 .pt-node:nth-child(5) b { background: rgba(255, 255, 255, .15); color: #fff; }
.pt-rail.n2 .pt-link:nth-child(2) i, .pt-rail.n3 .pt-link i { scale: 1 1; }
.pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.pt-card { position: relative; padding: 12px 12px 24px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 44px -34px rgba(0, 0, 0, .35); transition: transform .5s var(--ease), box-shadow .4s; }
.pt-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 34px 54px -34px rgba(0, 0, 0, .45); }
.pt-card h3 { display: flex; align-items: baseline; gap: 10px; margin: 22px 12px 0; font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.pt-n { font-size: 28px; line-height: 1; color: var(--faint); transition: color .4s; }
.pt-card:hover .pt-n { color: var(--ink); }
.pt-card > p { margin: 8px 12px 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.pt-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 18px 12px 0; }
.pt-card li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.pt-card li svg { width: 20px; height: 20px; padding: 4px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; }
.pt-art { position: relative; height: 230px; display: grid; place-items: center; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .07) 1px, transparent 0) 0 0 / 16px 16px, #f4f4f1; }
.pt-when { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 11px; font-weight: 600; color: var(--ink-2); }

/* 1 · the brief */
.brief { position: relative; width: 74%; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .35); rotate: -3deg; transition: rotate .6s var(--ease); }
.pt-card:hover .brief { rotate: 0deg; }
.brief p { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.05; letter-spacing: -.01em; }
.brief em { position: relative; font-style: italic; }
.brief em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--ink); transform-origin: left; scale: 0 1; }
.brief-dot { position: absolute; right: 16px; top: 16px; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); }
.brief-chip { position: absolute; right: 16px; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; }
.brief-chip svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #2fbf4a; }

/* 2 · design, build, motion windows */
.win { position: absolute; display: flex; flex-direction: column; gap: 7px; width: 52%; height: 44%; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .35); transition: translate .7s var(--ease), rotate .7s var(--ease); }
.win span { font-size: 12px; font-weight: 700; }
.win i { height: 6px; width: 70%; border-radius: 6px; background: var(--line); }
.win i + i { width: 50%; } .win i + i + i { width: 60%; }
.win.w1 { left: 9%; top: 16%; rotate: -4deg; }
.win.w2 { left: 26%; top: 33%; background: var(--ink); color: #fff; rotate: 1deg; }
.win.w2 i { background: rgba(255, 255, 255, .18); }
.win.w3 { left: 40%; top: 49%; rotate: 4deg; box-shadow: 0 0 0 1.5px var(--ink), 0 22px 40px -22px rgba(0, 0, 0, .45); }
.win-play { position: absolute; right: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.win-play::after { content: ""; position: absolute; left: 8px; top: 6px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pt-card:hover .w1 { translate: -10px -6px; rotate: -7deg; } .pt-card:hover .w3 { translate: 10px 6px; rotate: 7deg; }
.art-stack .cursor { opacity: 1; left: 0; top: 0; translate: 210px 150px; }

/* 3 · growth chart */
.grow { position: relative; width: 82%; margin-top: 18px; padding: 14px 16px 10px; border-radius: 18px; background: #fff; box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .35); }
.grow-top { display: flex; align-items: center; justify-content: space-between; }
.grow-up { padding: 3px 9px; border-radius: 999px; background: #2fbf4a; color: #fff; font-size: 11px; font-weight: 700; }
.grow svg { display: block; width: 100%; height: 104px; margin-top: 10px; overflow: visible; }
.g-area { fill: rgba(20, 20, 20, .06); }
.g-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.g-dot { position: absolute; right: 12px; top: 46px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 6px rgba(20, 20, 20, .08); }

/* loops while on screen (the static, finished state is the fallback) */
@keyframes pt-underline { 0%, 15% { scale: 0 1; } 35%, 85% { scale: 1 1; } 100% { scale: 0 1; } }
@keyframes pt-chip { 0%, 30% { opacity: 0; scale: .6; translate: 0 8px; } 40%, 88% { opacity: 1; scale: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes pt-cursor { 0% { translate: 260px 210px; } 25%, 32% { translate: 90px 74px; } 36% { translate: 90px 74px; scale: .85; } 40% { scale: 1; } 60%, 66% { translate: 170px 114px; } 70% { translate: 170px 114px; scale: .85; } 74% { scale: 1; } 92%, 100% { translate: 260px 210px; } }
@keyframes pt-w1 { 0%, 30% { translate: 0 0; } 36%, 90% { translate: -6px -6px; } 100% { translate: 0 0; } }
@keyframes pt-w3 { 0%, 64% { translate: 0 0; } 70%, 92% { translate: 6px 4px; } 100% { translate: 0 0; } }
@keyframes pt-line { 0%, 8% { stroke-dashoffset: 1; opacity: 1; } 60%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pt-area { 0%, 30% { opacity: 0; } 60%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pt-dot { 0%, 55% { opacity: 0; scale: 0; } 62%, 90% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
.pt-card.is-play .brief em::after { animation: pt-underline 6s var(--ease) infinite; }
.pt-card.is-play .brief-chip { animation: pt-chip 6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.pt-card.is-play .art-stack .cursor { animation: pt-cursor 6s cubic-bezier(.45, .05, .25, 1) infinite; }
.pt-card.is-play .w1 { animation: pt-w1 6s var(--ease) infinite; }
.pt-card.is-play .w3 { animation: pt-w3 6s var(--ease) infinite; }
.pt-card.is-play .g-line { animation: pt-line 6s var(--ease) infinite; }
.pt-card.is-play .g-area { animation: pt-area 6s ease infinite; }
.pt-card.is-play .g-dot { animation: pt-dot 6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.pt-card:not(.is-play) .brief em::after { scale: 1 1; }
@media (max-width: 900px) { .pt-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } .pt-rail { display: none; } }


/* Services page: richer bento cards (what you get + design/build/motion), same layout */
.b-more { margin-top: 14px; margin-right: -44px; padding-top: 12px; border-top: 1px dashed rgba(0, 0, 0, .12); }
.b-card.dark .b-more { border-color: rgba(255, 255, 255, .16); }
.b-more .kicker { display: block; margin-bottom: 8px; }
.b-more ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.b-more li { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; background: rgba(20, 20, 20, .05); font-size: 12px; font-weight: 600; white-space: nowrap; }
.b-card.dark .b-more li, .b-card.plain:hover .b-more li { background: rgba(255, 255, 255, .1); }
.b-more li svg { width: 14px; height: 14px; padding: 2.5px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .3s; }
.b-card.dark .b-more li svg, .b-card.plain:hover .b-more li svg { background: #fff; color: var(--ink); }
.b-caps { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.b-caps span { height: 26px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); transition: background .35s, color .35s, box-shadow .35s; }
.b-caps span.on { color: var(--ink); background: rgba(20, 20, 20, .06); box-shadow: none; }
.b-caps em { margin-left: auto; margin-right: 46px; font-style: normal; font-size: 12.5px; font-weight: 600; opacity: 0; translate: -6px 0; transition: opacity .35s, translate .5s var(--ease); }
.b-card.dark .b-caps span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .4); }
.b-card.dark .b-caps span.on { background: rgba(255, 255, 255, .12); color: #fff; }
.b-card.plain:hover .b-caps span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .4); }
.b-card.plain:hover .b-caps span.on, .b-card.plain:hover .b-caps span.on { background: #fff; color: var(--ink); }
.b-card:hover .b-caps span.on { background: var(--ink); color: #fff; transition-delay: calc(var(--k) * 70ms); }
.b-card.dark:hover .b-caps span.on, .b-card.plain:hover .b-caps span.on { background: #fff; color: var(--ink); }
.b-card:hover .b-caps em { opacity: 1; translate: 0 0; }
.b-card:hover .b-more li svg { transform: rotate(-12deg) scale(1.12); transition-delay: calc(var(--k) * 60ms); }
/* shine sweep on hover */
.b-card::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); translate: -120% 0; }
.b-card:hover::after { animation: b-shine 1.1s var(--ease); }
@keyframes b-shine { to { translate: 120% 0; } }
/* list items rise in one by one when the card is revealed */
.motion .b-card .b-more li { opacity: 0; translate: 0 8px; transition: opacity .45s, translate .6s var(--ease); }
.motion .b-card.is-seen .b-more li { opacity: 1; translate: 0 0; transition-delay: calc(var(--k) * 90ms + 350ms); }
.motion .b-card .b-caps span { opacity: 0; scale: .8; }
.motion .b-card.is-seen .b-caps span { opacity: 1; scale: 1; transition: opacity .4s, scale .5s cubic-bezier(.34, 1.56, .64, 1), background .35s, color .35s, box-shadow .35s; transition-delay: calc(var(--k) * 80ms + 700ms); }
.motion .b-card.is-seen:hover .b-caps span { transition-delay: calc(var(--k) * 70ms); }


/* Services page bento: every card is one row tall; wide cards put their visual on the right */
.svc-bento { grid-auto-rows: auto; grid-template-areas: "brand brand framer webapps" "ux ux landing d3" "motion motion cta cta"; }
.svc-bento .b-card { min-height: 0; }
.svc-bento .b-brand .b-copy, .svc-bento .b-ux .b-copy, .svc-bento .b-motion .b-copy { max-width: 50%; padding-right: 0; }
.svc-bento :is(.b-brand, .b-ux, .b-motion) .b-more { margin-right: 0; }
.svc-bento :is(.b-brand, .b-ux, .b-motion) .b-caps em { margin-right: 0; }
.svc-bento .b-brand .b-fan { left: auto; right: 12px; top: 12px; bottom: 12px; width: calc(50% - 28px); height: auto; translate: none; border-radius: 20px; overflow: hidden; background: radial-gradient(70% 60% at 50% 45%, #2b2b29, #151515 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.svc-bento .b-brand .b-fan img { top: 50%; width: min(74%, 300px); translate: -50% -50%; margin: 0; }
.svc-bento .b-brand .b-fan img:nth-child(1) { transform: translateY(-58%) rotate(-7deg) scale(.86); }
.svc-bento .b-brand .b-fan img:nth-child(2) { transform: none; z-index: 2; }
.svc-bento .b-brand .b-fan img:nth-child(3) { transform: translateY(58%) rotate(7deg) scale(.86); }
.svc-bento .b-brand:hover .b-fan img:nth-child(1) { transform: translate(-8%, -74%) rotate(-11deg) scale(.88); }
.svc-bento .b-brand:hover .b-fan img:nth-child(2) { transform: scale(1.05); }
.svc-bento .b-brand:hover .b-fan img:nth-child(3) { transform: translate(8%, 74%) rotate(11deg) scale(.88); }
.svc-bento .b-ux .b-copy { margin-top: auto; padding-top: 28px; }
.svc-bento .b-ux .b-phone { left: auto; right: 8%; bottom: auto; top: 14%; width: 30%; translate: none; rotate: -6deg; }
.svc-bento .b-ux::before { content: ""; position: absolute; right: -60px; top: -60px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .8), transparent 70%); pointer-events: none; }
.b-cta { grid-area: cta; background: radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .9), transparent 70%), radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .06) 1px, transparent 0) 0 0 / 16px 16px, #ebeae5; box-shadow: none; }
.b-cta .b-copy { padding-right: 0; }
.b-cta .b-copy p { max-width: 420px; }
.b-cta .btn-row { margin-top: 20px; }
.b-cta:hover { transform: translateY(-6px); }
@media (max-width: 1000px) {
  .svc-bento { grid-template-areas: "brand brand" "framer webapps" "ux ux" "landing d3" "motion motion" "cta cta"; }
}
@media (max-width: 620px) {
  .svc-bento { grid-template-areas: "brand" "framer" "webapps" "ux" "landing" "d3" "motion" "cta"; }
  .svc-bento .b-brand .b-copy, .svc-bento .b-ux .b-copy, .svc-bento .b-motion .b-copy { max-width: none; }
  .svc-bento .b-brand .b-fan { position: relative; inset: auto; width: 100%; height: 200px; margin: 6px 0 4px; order: -1; }
  .svc-bento .b-brand .b-fan img { width: 52%; }
  .svc-bento .b-ux .b-phone { position: relative; inset: auto; width: 54%; margin: 18px auto -46%; order: 5; }
  .svc-bento .b-ux::before { display: none; }
}
.svc-bento .b-motion .b-copy { max-width: calc(50% - 32px); }
@media (max-width: 620px) { .svc-bento .b-motion .b-copy { max-width: none; } }

/* "Not sure where to start?" card: a booking widget that books itself while on screen */
.svc-bento .b-cta .b-copy { max-width: calc(50% - 16px); }
.cta-cal { position: absolute; right: 18px; top: 50%; translate: 0 -50%; width: min(44%, 290px); padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 50px -30px rgba(0, 0, 0, .4); rotate: 2deg; transition: rotate .6s var(--ease); }
.b-cta:hover .cta-cal { rotate: 0deg; }
.cc-head { display: flex; align-items: center; gap: 10px; }
.cc-head img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.cc-head b { display: block; font-size: 13px; } .cc-head small { font-size: 11.5px; color: var(--muted); }
.cc-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 12px; }
.cc-days span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: 10px; background: var(--bg); font-size: 13px; font-weight: 700; }
.cc-days small { font-size: 9.5px; font-weight: 600; color: var(--muted); }
.cc-days span.off { opacity: .4; }
.cc-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 8px; }
.cc-slots span { display: grid; place-items: center; height: 30px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; }
.cc-days span.pick, .cc-slots span.pick { background: var(--ink); color: #fff; box-shadow: none; }
.cc-days span.pick small { color: rgba(255, 255, 255, .7); }
.cc-done { display: flex; align-items: center; gap: 7px; margin-top: 10px; height: 32px; padding: 0 10px 0 5px; border-radius: 10px; background: rgba(47, 191, 74, .12); color: #1f8a33; font-size: 12px; font-weight: 700; }
.cc-done svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #2fbf4a; color: #fff; }
.cta-cal .cursor { left: 0; top: 0; opacity: 0; }
@keyframes cc-cursor { 0% { opacity: 0; translate: 250px 230px; } 8% { opacity: 1; } 22%, 26% { translate: 128px 74px; scale: 1; } 29% { translate: 128px 74px; scale: .82; } 32% { scale: 1; } 46%, 50% { translate: 192px 126px; scale: 1; } 53% { translate: 192px 126px; scale: .82; } 56% { scale: 1; } 80% { opacity: 1; translate: 250px 230px; } 88%, 100% { opacity: 0; translate: 250px 230px; } }
@keyframes cc-day { 0%, 27% { background: var(--bg); color: var(--ink); } 30%, 94% { background: var(--ink); color: #fff; } 100% { background: var(--bg); color: var(--ink); } }
@keyframes cc-slot { 0%, 51% { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } 54%, 94% { background: var(--ink); color: #fff; box-shadow: none; } 100% { background: transparent; color: var(--ink); } }
@keyframes cc-done { 0%, 56% { opacity: 0; translate: 0 8px; scale: .9; } 62%, 92% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; } }
.b-cta.is-play .cta-cal .cursor { animation: cc-cursor 6s cubic-bezier(.45, .05, .25, 1) infinite; }
.b-cta.is-play .cc-days span.pick { animation: cc-day 6s ease infinite; }
.b-cta.is-play .cc-slots span.pick { animation: cc-slot 6s ease infinite; }
.b-cta.is-play .cc-done { animation: cc-done 6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@media (max-width: 620px) {
  .svc-bento .b-cta .b-copy { max-width: none; }
  .cta-cal { position: relative; right: auto; top: auto; translate: none; width: 100%; margin-top: 20px; rotate: 0deg; }
  .svc-bento .b-brand .b-fan { width: 100%; right: auto; top: auto; bottom: auto; height: 220px; }
}

/* Services page: copy sits under the icon (no empty band on top), tags anchor to the bottom */
.svc-bento .b-top { order: 0; }
.svc-bento .b-mini { order: 1; }
.svc-bento .b-card:not(.b-d3):not(.b-cta) .b-copy { order: 2; flex: 1; display: flex; flex-direction: column; margin-top: 20px; padding-top: 0; }
.svc-bento .b-card:not(.b-d3):not(.b-cta) .b-more { flex: 1; display: flex; flex-direction: column; }
.svc-bento .b-card:not(.b-d3):not(.b-cta) .b-caps { margin-top: auto; padding-top: 16px; }
.svc-bento .b-ux .b-copy { margin-top: 20px; }

/* mini UI sketches (framer / web apps / landing) */
.b-mini { position: relative; height: 88px; margin-top: 18px; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .07) 1px, transparent 0) 0 0 / 14px 14px, #f4f4f1; transition: background .4s; }
.b-card.plain:hover .b-mini { background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 0) 0 0 / 14px 14px, #1f1f1f; }
/* framer: a site that publishes itself */
.mini-framer .mn-bar { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 8px 8px 0 0; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.mini-framer .mn-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.mini-framer .mn-bar span { margin-left: 8px; font-size: 9.5px; font-weight: 600; color: var(--muted); }
.mini-framer .mn-body { position: absolute; left: 14px; right: 14px; top: 34px; bottom: -6px; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.mn-h { width: 60%; height: 9px; border-radius: 5px; background: var(--ink); }
.mn-l { width: 80%; height: 6px; border-radius: 4px; background: var(--line); } .mn-l.s { width: 55%; }
.mini-framer .mn-h { transform-origin: left; animation: mn-type 4.8s var(--ease) infinite; }
.mn-pub { position: absolute; right: 22px; bottom: 12px; display: grid; }
.mn-pub b { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 12px; border-radius: 999px; background: #2f6bff; color: #fff; font-size: 11px; font-weight: 700; }
.mn-pub b.live { background: #2fbf4a; opacity: 0; }
.mn-pub b.live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.mn-pub b:first-child { animation: mn-pub 4.8s ease infinite; }
.mn-pub b.live { animation: mn-live 4.8s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes mn-type { 0% { scale: 0 1; } 30%, 100% { scale: 1 1; } }
@keyframes mn-pub { 0%, 38% { opacity: 1; scale: 1; } 42% { scale: .9; } 46%, 92% { opacity: 0; scale: .9; } 100% { opacity: 1; scale: 1; } }
@keyframes mn-live { 0%, 44% { opacity: 0; scale: .6; } 50%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
/* web apps: a dashboard whose bars keep growing */
.mn-dash { position: absolute; left: 14px; right: 14px; top: 12px; bottom: -8px; display: flex; gap: 8px; padding: 10px; border-radius: 10px 10px 0 0; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.mn-side { display: flex; flex-direction: column; gap: 6px; width: 22%; } .mn-side i { height: 6px; border-radius: 4px; background: var(--line); } .mn-side i:first-child { background: var(--ink); width: 70%; }
.mn-bars { flex: 1; display: flex; align-items: flex-end; gap: 5px; padding-bottom: 8px; }
.mn-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: var(--ink); transform-origin: bottom; animation: mn-bar 4.2s var(--ease) infinite; animation-delay: calc(var(--k) * 90ms); }
.mn-bars i:nth-child(odd) { background: #cfcfca; }
@keyframes mn-bar { 0% { scale: 1 .1; } 35%, 85% { scale: 1 1; } 100% { scale: 1 .1; } }
.mn-kpi { position: absolute; right: 22px; top: 20px; display: flex; flex-direction: column; padding: 5px 9px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 18px -12px rgba(0, 0, 0, .35); font-size: 9.5px; font-weight: 600; color: var(--muted); }
.mn-kpi b { font-size: 12px; color: #1f8a33; }
/* landing: a CTA that keeps converting */
.mn-page { position: absolute; left: 14px; right: 14px; top: 12px; bottom: -8px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 10px; border-radius: 10px 10px 0 0; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.mn-page .mn-h { width: 54%; } .mn-page .mn-l { width: 70%; }
.mn-cta { position: relative; margin-top: 4px; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; animation: mn-press 3.6s ease infinite; }
.mn-cta::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 1.5px solid var(--ink); opacity: 0; animation: mn-ring 3.6s ease-out infinite; }
.mn-lead { position: absolute; right: 18px; top: 16px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(47, 191, 74, .14); color: #1f8a33; font-size: 10.5px; font-weight: 700; animation: mn-lead 3.6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.mn-lead i { width: 6px; height: 6px; border-radius: 50%; background: #2fbf4a; }
@keyframes mn-press { 0%, 40%, 52%, 100% { scale: 1; } 46% { scale: .9; } }
@keyframes mn-ring { 0%, 46% { opacity: 0; scale: 1; } 50% { opacity: .6; } 80%, 100% { opacity: 0; scale: 1.5; } }
@keyframes mn-lead { 0%, 48% { opacity: 0; translate: 0 8px; scale: .8; } 56%, 90% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; } }
.b-card:hover .b-mini > * { transition: translate .5s var(--ease); }
@media (prefers-reduced-motion: reduce) { .b-mini * { animation: none !important; } .mn-pub b.live { opacity: 1; } .mn-pub b:first-child { opacity: 0; } }

/* brand: a brand kit that builds itself (swatches, type, logo grid) */
.svc-bento .b-brand .b-mini { max-width: calc(50% - 16px); background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0) 0 0 / 14px 14px, #1a1a1a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mn-board { position: absolute; inset: 10px; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }
.mb-tile { position: relative; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
/* logo mark: two shapes that lock together */
.mb-logo i { position: absolute; width: 22px; height: 22px; background: #fff; border-radius: 6px; animation: mb-a 4.8s var(--ease) infinite; }
.mb-logo i + i { width: 14px; height: 14px; border-radius: 50%; background: #e85d3a; animation-name: mb-b; }
@keyframes mb-a { 0%, 10% { translate: -12px 0; rotate: 0deg; border-radius: 6px; } 40%, 85% { translate: -4px 0; rotate: 45deg; border-radius: 4px 12px 4px 12px; } 100% { translate: -12px 0; rotate: 0deg; } }
@keyframes mb-b { 0%, 10% { translate: 14px 0; scale: .6; } 40%, 85% { translate: 9px -8px; scale: 1; } 100% { translate: 14px 0; scale: .6; } }
/* palette: stripes that fill in one by one */
.mb-pal { grid-template-columns: repeat(4, 1fr); align-items: end; gap: 4px; padding: 10px; place-items: stretch; }
.mb-pal i { height: 100%; border-radius: 6px; background: var(--c); transform-origin: bottom; animation: mb-pal 4.8s var(--ease) infinite; animation-delay: calc(var(--k) * 120ms); }
@keyframes mb-pal { 0%, 6% { scale: 1 0; } 30%, 86% { scale: 1 1; } 100% { scale: 1 0; } }
/* type: sans and serif swap */
.mb-type { color: #fff; }
.mb-type b, .mb-type em { grid-area: 1 / 1; font-size: 26px; line-height: 1; }
.mb-type b { font-weight: 700; letter-spacing: -.03em; animation: mb-t1 4.8s ease infinite; }
.mb-type em { font-family: var(--serif); font-size: 30px; opacity: 0; animation: mb-t2 4.8s ease infinite; }
@keyframes mb-t1 { 0%, 40% { opacity: 1; translate: 0 0; } 48%, 92% { opacity: 0; translate: 0 -8px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes mb-t2 { 0%, 42% { opacity: 0; translate: 0 8px; } 50%, 90% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; } }
.b-brand:hover .mb-tile { background: rgba(255, 255, 255, .1); }
@media (max-width: 620px) { .svc-bento .b-brand .b-mini { max-width: none; } }

/* Process: "What it actually feels like" in the warm panel (light cards instead of dark) */
.tv-panel .h2 { color: var(--ink); }
.tv-panel .h2 .serif { color: var(--ink); }
.tv-panel .tv { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 44px -34px rgba(0, 0, 0, .35); transition: transform .5s var(--ease), box-shadow .4s; }
.tv-panel .tv:hover { background: #fff; transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 34px 54px -34px rgba(0, 0, 0, .45); }
.tv-panel .tv h4 { color: var(--ink); }
.tv-panel .tv > p { color: var(--muted); }

/* UI / UX: an audit whose score climbs while issues get fixed */
.svc-bento .b-ux .b-mini { max-width: calc(50% - 16px); background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .07) 1px, transparent 0) 0 0 / 14px 14px, rgba(255, 255, 255, .7); }
.mn-audit { position: absolute; inset: 10px 14px; display: flex; align-items: center; gap: 14px; }
.ma-ring { position: relative; width: 62px; height: 62px; flex: none; }
.ma-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.ma-ring circle { fill: none; stroke: var(--line); stroke-width: 4; }
.ma-ring .ma-arc { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 94 100; animation: ma-arc 5s var(--ease) infinite; }
.ma-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.ma-ring b span { grid-area: 1 / 1; }
.ma-from { animation: ma-from 5s ease infinite; } .ma-to { opacity: 0; animation: ma-to 5s ease infinite; }
@keyframes ma-arc { 0%, 12% { stroke-dasharray: 62 100; } 55%, 90% { stroke-dasharray: 94 100; } 100% { stroke-dasharray: 62 100; } }
@keyframes ma-from { 0%, 40% { opacity: 1; } 46%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ma-to { 0%, 42% { opacity: 0; scale: .7; } 50%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
.ma-list { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ma-list > span { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; }
.ma-list i { position: relative; display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; }
.ma-list i em, .ma-list i svg { grid-area: 1 / 1; }
.ma-list i em { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #e85d3a; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; animation: ma-bad 5s ease infinite; animation-delay: calc(var(--k) * 260ms); }
.ma-list i svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: #2fbf4a; color: #fff; opacity: 0; animation: ma-good 5s cubic-bezier(.34, 1.56, .64, 1) infinite; animation-delay: calc(var(--k) * 260ms); }
@keyframes ma-bad { 0%, 22% { opacity: 1; scale: 1; } 28%, 94% { opacity: 0; scale: .4; } 100% { opacity: 1; scale: 1; } }
@keyframes ma-good { 0%, 24% { opacity: 0; scale: .4; } 32%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@media (max-width: 620px) { .svc-bento .b-ux .b-mini { max-width: none; } }
/* "Start this" only on wide cards, so it never collides with the arrow button */
.svc-bento .b-card:not(.b-brand):not(.b-ux):not(.b-motion) .b-caps em { display: none; }
.b-caps em { white-space: nowrap; }

/* Process stage rail: bigger, with a live counter, overall progress and the current stage opened up */
@media (min-width: 1001px) { .ur { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); } }
.ur-rail { gap: 16px; padding: 22px 26px 26px; }
.ur-rail-top { display: flex; align-items: center; justify-content: space-between; margin-top: -4px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.ur-count { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.ur-count b { font-size: 34px; font-weight: 400; letter-spacing: -.02em; }
.ur-count small { font-size: 13px; font-weight: 600; color: var(--faint); }
.ur-steps li { padding: 10px 12px 10px 0; align-items: flex-start; border-radius: 18px; transition: background .4s, padding .4s; }
.ur-steps li.is-active { background: var(--bg); padding-left: 0; }
.ur-fill { left: 23px; top: 30px; bottom: 30px; }
.ur-fill i { position: relative; }
.ur-fill i::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; translate: -50% 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px rgba(20, 20, 20, .12); }
.ur-dot { width: 48px; height: 48px; font-size: 13px; }
.ur-dot svg { width: 17px; height: 17px; }
.ur-steps li.is-active .ur-dot { animation: ur-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ur-pop { 0% { scale: .7; } 100% { scale: 1.06; } }
.ur-steps li.is-done .ur-dot { background: #2fbf4a; }
.ur-st { padding-top: 12px; }
.ur-st > b { font-size: 18px; transition: color .4s, font-size .4s; }
.ur-steps li.is-active .ur-st > b { font-size: 22px; }
.ur-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .4s; }
.ur-more > span { min-height: 0; overflow: hidden; }
.ur-steps li.is-active .ur-more { grid-template-rows: 1fr; opacity: 1; }
.ur-more small { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ur-steps li:not(.is-active) .ur-st > b { color: var(--muted); }
.ur-steps li.is-done .ur-st > b { color: var(--ink); }

/* Process rail: the open stage is a card beside the dot (the dot stays on the line) */
.ur-steps li, .ur-steps li.is-active { background: none; padding: 6px 0; }
.ur-st { flex: 1; padding: 10px 14px; border-radius: 18px; transition: background .45s, box-shadow .45s, padding .45s var(--ease); }
.ur-steps li.is-active .ur-st { padding: 14px 16px 16px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.ur-st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ur-more small { margin-top: 4px; }
.ur-steps li.is-active .ur-st > .ur-st-head b, .ur-steps li.is-active .ur-st-head b { font-size: 21px; }
.ur-st-head b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--muted); transition: color .4s, font-size .4s; }
.ur-steps li.is-active .ur-st-head b, .ur-steps li.is-done .ur-st-head b { color: var(--ink); }
/* How we work cards: divider between the description and the checkpoints (same dashed rule as the service cards) */
.pt-card ul { margin-top: 18px; padding-top: 18px; border-top: 1px dashed rgba(0, 0, 0, .12); }

/* My work: filters sit on their own row under the heading, one line, swipeable on small screens */
.work-bar { display: flex; margin-top: clamp(28px, 3.5vw, 40px); }
.work-bar .work-filters { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.work-bar .work-filters::-webkit-scrollbar { display: none; }
.work-bar .wf { flex: none; }
.work-bar + .work-grid { margin-top: 24px; }

/* ==========================================================================
   Home hero v2: centred intro tied to the project slider
   (v1, the two-column version, is kept in index-hero-v1.html)
   ========================================================================== */
.hero-v2 { --hero-glow: #6E4FE0; }
/* dot grid across the whole intro, fading out towards the edges and into the slider */
.hero-v2::before {
  height: 100%; background-image: radial-gradient(rgba(20, 20, 20, .13) 1px, transparent 1.3px); background-size: 22px 22px; background-position: center 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 72% 62% at 50% 30%, #000 30%, transparent 78%);
}
/* a soft wash of the current project's colour behind the headline, changes with the slider */
.hero-v2::after {
  content: ""; position: absolute; left: 50%; top: 150px; z-index: -1; width: min(760px, 90vw); height: 420px; translate: -50% 0;
  border-radius: 50%; background: var(--hero-glow); opacity: .1; filter: blur(110px); pointer-events: none; transition: background 1.2s ease;
}
.hv2 { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(12px, 2.4vw, 32px) 0 clamp(44px, 5vw, 64px); }


.hv2-title { margin-top: 0; }
.hv2-title .ln { white-space: nowrap; }
/* service icon inside the headline: soft line icons, no container. Every 2.4s the current icon lifts away and
   the next one draws itself in stroke by stroke, its shapes fill with a faint wash, then one part keeps a loop */
.hero-title .ln > .hv2-icon { position: relative; top: -.05em; display: inline-grid; width: .8em; height: .8em; margin-left: .1em; vertical-align: middle; cursor: pointer; line-height: 0; }
.hi-ic { grid-area: 1 / 1; visibility: hidden; }
.hi-ic.is-on, .hi-ic.is-out { visibility: visible; }
.hi-ic svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.hi-ic svg * { transform-box: fill-box; transform-origin: 50% 100%; }
.hi-ic [pathLength] { stroke-dasharray: 1 1; }
.hi-ic .s { fill: rgba(20, 20, 20, .09); }
.hi-ic .t { fill: rgba(20, 20, 20, .1); stroke: none; }
.hi-ic .hfl { fill: rgba(20, 20, 20, .22); }
.hi-ic .w { stroke-width: 2; }
.hi-ic .ro { stroke-opacity: .3; }
.hi-ic .c { fill: var(--ink); stroke: var(--bg); stroke-width: 1.2; stroke-dasharray: none; filter: drop-shadow(0 .03em .05em rgba(0, 0, 0, .22)); }
/* out: the whole glyph lifts, shrinks and blurs away */
.motion .hi-ic.is-out { animation: hi-leave .5s cubic-bezier(.6, 0, .8, .4) both; }
@keyframes hi-leave { to { opacity: 0; transform: translateY(-.2em) scale(.75); filter: blur(.03em); } }
/* in: strokes draw in order, then the soft fills fade up */
.motion .hi-ic.is-on svg > *, .motion .hi-ic.is-on svg g > * { animation: hi-draw .9s cubic-bezier(.65, 0, .35, 1) calc(.12s + var(--i, 0) * .1s) both, hi-fill .7s ease calc(.6s + var(--i, 0) * .1s) both; }
.motion .hi-ic.is-on svg > g { animation: none; }
@keyframes hi-draw { from { stroke-dashoffset: 1; } }
@keyframes hi-fill { from { fill-opacity: 0; } }
/* while on show: one small loop per icon */
.motion .hi-ic.is-on .hro { animation: hi-lift 1.6s ease-in-out 1.1s infinite; }
.motion .hi-ic.is-on .hfl { transform-origin: 50% 0; animation: hi-draw .9s cubic-bezier(.65, 0, .35, 1) calc(.12s + var(--i, 0) * .1s) both, hi-fill .7s ease calc(.6s + var(--i, 0) * .1s) both, hi-flame .5s ease-in-out .9s infinite alternate; }
@keyframes hi-lift { 50% { transform: translateY(-7%); } }
@keyframes hi-flame { from { transform: scaleY(.7); opacity: .6; } to { transform: scaleY(1.25); opacity: 1; } }
.motion .hi-ic.is-on .hch { animation: hi-draw .9s cubic-bezier(.65, 0, .35, 1) calc(.12s + var(--i, 0) * .1s) both, hi-fill .7s ease calc(.6s + var(--i, 0) * .1s) both, hi-nudge-x 1.6s ease-in-out 1.1s infinite; }
.motion .hi-ic.is-on .hbk { transform-origin: 0 50%; animation: hi-draw .9s cubic-bezier(.65, 0, .35, 1) calc(.12s + var(--i, 0) * .1s) both, hi-fill .7s ease calc(.6s + var(--i, 0) * .1s) both, hi-blink 1s steps(1) 1.2s infinite; }
@keyframes hi-nudge-x { 50% { transform: translateX(14%); } }
@keyframes hi-blink { 50% { opacity: 0; } }
.motion .hi-ic.is-on .hn { transform-origin: 50% 90%; animation: hi-rock 1.8s ease-in-out 1.2s infinite; }
.motion .hi-ic.is-on .hb { animation: hi-draw .9s cubic-bezier(.65, 0, .35, 1) calc(.12s + var(--i, 0) * .1s) both, hi-fill .7s ease calc(.6s + var(--i, 0) * .1s) both, hi-grow 1.6s ease-in-out 1.4s infinite; }
.motion .hi-ic.is-on .hs { animation: hi-draw .9s cubic-bezier(.65, 0, .35, 1) calc(.12s + var(--i, 0) * .1s) both, hi-fill .7s ease calc(.6s + var(--i, 0) * .1s) both, hi-streak 1.1s ease-in calc(1.1s + var(--s, 0s)) infinite; }
.motion .hi-ic.is-on .hp { transform-origin: 50% 50%; animation: hi-beat 1.1s ease-in-out 1.2s infinite; }
.motion .hi-ic.is-on .hk { animation: hi-float 2s ease-in-out 1.1s infinite; }
.motion .hi-ic.is-on .hsh { transform-origin: 50% 50%; animation: hi-draw .9s cubic-bezier(.65, 0, .35, 1) calc(.12s + var(--i, 0) * .1s) both, hi-fill .7s ease calc(.6s + var(--i, 0) * .1s) both, hi-shadow 2s ease-in-out 1.1s infinite; }
.motion .hi-ic.is-on .hu { transform-origin: 0 0; animation: hi-draw .9s cubic-bezier(.65, 0, .35, 1) calc(.12s + var(--i, 0) * .1s) both, hi-fill .7s ease calc(.6s + var(--i, 0) * .1s) both, hi-tap 1.6s ease-in-out 1.2s infinite; }
.motion .hi-ic.is-on .hr { transform-origin: 50% 50%; animation: hi-draw .9s cubic-bezier(.65, 0, .35, 1) calc(.12s + var(--i, 0) * .1s) both, hi-fill .7s ease calc(.6s + var(--i, 0) * .1s) both, hi-ripple 1.6s ease-out calc(1.3s + var(--s, 0s)) infinite; }
@keyframes hi-rock { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes hi-grow { 50% { transform: scaleY(.7); } }
@keyframes hi-streak { 0% { transform: translateX(40%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(-70%); opacity: 0; } }
@keyframes hi-beat { 0%, 100% { transform: scale(1); } 40% { transform: scale(.92); } 60% { transform: scale(1.03); } }
@keyframes hi-float { 50% { transform: translateY(-9%); } }
@keyframes hi-shadow { 50% { transform: scaleX(.75); opacity: .5; } }
@keyframes hi-tap { 0%, 30%, 100% { transform: none; } 15% { transform: scale(.86); } }
@keyframes hi-ripple { 0% { transform: scale(.3); opacity: .9; } 70%, 100% { transform: scale(1.15); opacity: 0; } }
.hi-ic.is-on svg { transition: transform .5s var(--ease); }
.hv2-icon:hover .hi-ic.is-on svg { transform: scale(1.06) rotate(-5deg); }
.motion .hv2-icon { animation: hi-in .6s ease .5s both; }
@keyframes hi-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hv2-icon, .hi-ic, .hi-ic * { animation: none !important; } .hi-ic [pathLength] { stroke-dasharray: none; } }

.hv2-lead { max-width: 560px; margin-top: 20px; white-space: nowrap; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.hv2-lead b { color: var(--ink); font-weight: 600; }
/* two lines, each about as wide as the headline above */
.hv2-lead b, .hv2-lead span { display: block; }
@media (max-width: 620px) { .hv2-lead { white-space: normal; } .hv2-lead b, .hv2-lead span { display: inline; } }
.hv2-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.hv2-proof { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 0; margin-top: 30px; }
.hv2-p { display: inline-flex; align-items: center; gap: 12px; padding: 0 clamp(16px, 2vw, 26px); text-align: left; }
.hv2-p + .hv2-p { border-left: 1px solid var(--line); }
.hv2-p .avatars img { width: 32px; height: 32px; }
.hv2-p .stars { display: block; font-size: 11px; letter-spacing: 2px; line-height: 1.3; }
.hv2-p b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.hv2-stat b { font-size: 26px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.hv2-stat small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }

@media (max-width: 560px) {
  .hv2-title .ln { white-space: normal; }
  .hv2-actions { width: 100%; }
  .hv2-actions .btn { width: 100%; justify-content: space-between; }
  .hv2-actions .btn.ghost { justify-content: center; }
  .hv2-proof { gap: 18px 0; }
  .hv2-p { padding: 0 14px; }
  .hv2-p:first-child { flex-basis: 100%; justify-content: center; }
  .hv2-p:nth-child(2) { border-left: 0; }
}


/* ==========================================================================
   Case studies: "Explore more work" cards. One white container holds the inset cover and all the text
   ========================================================================== */
.mc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(36px, 4.5vw, 56px); }
.mc {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 6px; border-radius: 24px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -36px rgba(0, 0, 0, .35);
  transition: transform .6s var(--ease), box-shadow .5s;
}
.mc:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px #dcdcd6, 0 40px 70px -40px rgba(0, 0, 0, .45); }
.mc-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 19px; background: var(--accent); isolation: isolate; }
.mc-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mc:hover .mc-media > img { transform: scale(1.05); }
.mc-media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.mc-kind {
  position: absolute; left: 10px; top: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 600; color: var(--ink);
}
.mc-kind::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mc-metric {
  position: absolute; right: 14px; top: 14px; z-index: 4; display: flex; flex-direction: column; max-width: 170px; padding: 10px 12px 11px;
  border-radius: 16px; background: rgba(255, 255, 255, .94); font-size: 11.5px; line-height: 1.35; color: var(--muted);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .45); transition: transform .6s var(--ease);
}
.mc-metric b { margin-bottom: 3px; font-size: 22px; line-height: 1; font-weight: 600; letter-spacing: -.04em; color: var(--ink); }
.mc:hover .mc-metric { transform: translateY(-3px) rotate(-2deg); }
.mc-body { display: flex; flex: 1; flex-direction: column; padding: 14px 10px 8px; }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); }
.mc-cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-n { flex: none; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--faint); }
.mc h3 { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
.mc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.mc p { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.3; color: var(--ink-2); }
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mc-tags span { height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: var(--bg); font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.mc-tags span:nth-child(n+3) { display: none; }
.mc-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; transition: transform .5s var(--ease), background .3s; }
.mc:hover .mc-go { transform: rotate(45deg); }
/* the result chip only fits on the wider cards */
.mc-metric { display: none; }
@media (max-width: 900px) { .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mc-grid { grid-template-columns: 1fr; } }
.mc-media::before { content: ""; position: absolute; left: 50%; top: 58%; z-index: 0; width: 86%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, .13); pointer-events: none; transition: scale 1.2s var(--ease); }
.mc:hover .mc-media::before { scale: 1.08; }
.mc-ph { position: absolute; left: 50%; top: 14%; z-index: 1; width: 34%; translate: -50% 0; transition: translate .9s var(--ease); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .35)); }
.mc:hover .mc-ph { translate: -50% -6px; }
.mc-shot { position: absolute; left: 9%; right: 9%; top: 17%; bottom: -8%; z-index: 1; overflow: hidden; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 24px 40px -18px rgba(0, 0, 0, .55); transition: translate .9s var(--ease); }
.mc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.mc:hover .mc-shot { translate: 0 -6px; }
.mc-down { position: absolute; inset: 0; z-index: 1; overflow: hidden; background-image: var(--down); background-repeat: no-repeat; background-position: top center; background-size: 100% 3000%; }
.mc-down img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: translateY(7%); transition: transform 1.2s var(--ease); }
.mc:hover .mc-down img { transform: translateY(7%) scale(1.04); }
.mc-media > img { position: relative; z-index: 1; }
.mc-media .cut-cover { z-index: 1; }
.mc-media .cut-cover .orb { display: none; }
/* Selected projects: tabs straight under the hero, and a note when a tab has nothing yet */
.work-bar.is-first { margin-top: 0; }
.work-empty { grid-column: 1 / -1; padding: clamp(48px, 7vw, 88px) 24px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.2vw, 28px); color: var(--muted); }
/* no heading block above the grid: it sits straight under the hero */
#projects .wrap > .work-grid:first-child { margin-top: 0; }

/* Browser + phone cover (Trade Raiders): the pair keeps its proportions and is contained by whatever card it sits in */
.br-cover { position: absolute; inset: 0; overflow: hidden; container-type: size; isolation: isolate; }
.br-cover .orb { position: absolute; left: 50%; top: 52%; z-index: -1; width: 82cqmax; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: transform 1.2s var(--ease); }
.br-stage { position: absolute; left: 50%; top: 54%; width: min(86cqw, 76cqh * 1.62); aspect-ratio: 1.62; translate: -50% -50%; transition: transform 1s var(--ease); }
.br-win { position: absolute; left: 0; top: 0; width: 86%; overflow: hidden; border-radius: 1.6cqmin; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 30px 60px -24px rgba(0, 0, 0, .6); }
.br-bar { display: flex; align-items: center; gap: 1cqmin; height: 5.4cqmin; padding: 0 2cqmin; background: #f2f3f7; }
.br-bar i { width: 1.4cqmin; height: 1.4cqmin; border-radius: 50%; background: #d6d9e2; }
.br-bar i:nth-child(1) { background: #ff6159; } .br-bar i:nth-child(2) { background: #ffbd2e; } .br-bar i:nth-child(3) { background: #28c941; }
.br-bar span { margin-left: 1.4cqmin; padding: 0 2.4cqmin; height: 3.2cqmin; display: inline-flex; align-items: center; border-radius: 99px; background: #fff; font-size: max(8px, 2cqmin); color: #6b7284; }
.br-win img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.br-ph { position: absolute; right: 0; bottom: -4%; width: 24%; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .5)); transition: transform 1s var(--ease); }
.wk:hover .br-stage, .mc:hover .br-stage { transform: translateY(-1.5%); }
.wk:hover .br-ph, .mc:hover .br-ph { transform: translateY(-4%) rotate(-2deg); }
.wk:hover .br-cover .orb { transform: scale(1.08); }
/* the same cards two to a row (home: Latest projects): wider covers, and room for the result chip */
.mc-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.mc-grid.two .mc { padding: 8px; border-radius: 28px; }
.mc-grid.two .mc-media { aspect-ratio: 16 / 10; border-radius: 21px; }
.mc-grid.two .mc-metric { display: flex; }
.mc-grid.two .mc-body { padding: 18px 14px 10px; }
.mc-grid.two .mc h3 { font-size: clamp(20px, 1.8vw, 26px); }
.mc-grid.two .mc p { font-size: 18px; }
.mc-grid.two .mc-tags span:nth-child(n+3) { display: inline-flex; }
@media (max-width: 560px) { .mc-grid.two { grid-template-columns: 1fr; } }
/* the summary line only shows on the one-per-row cards */
.mc-sum { display: none; }
/* one per row (Case studies page): cover on the left, the story on the right */
.mc-grid.one { grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); }
.mc-grid.one .mc { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); padding: 10px; border-radius: 32px; }
.mc-grid.one .mc-media { aspect-ratio: 16 / 10.5; border-radius: 24px; }
.mc-grid.one .mc-metric { display: flex; }
.mc-grid.one .mc-body { padding: clamp(20px, 2.6vw, 40px) clamp(16px, 2.4vw, 36px) clamp(16px, 2vw, 28px); }
.mc-grid.one .mc-top { font-size: 13px; }
.mc-grid.one .mc h3 { margin-top: 14px; gap: 12px; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.045em; }
.mc-grid.one .mc-dot { width: 10px; height: 10px; }
.mc-grid.one .mc p { margin-top: 10px; font-size: clamp(20px, 1.8vw, 24px); }
.mc-grid.one .mc .mc-sum { display: block; margin-top: 16px; max-width: 420px; font-family: var(--sans); font-style: normal; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.mc-grid.one .mc-tags span { height: 30px; padding: 0 12px; font-size: 12.5px; }
.mc-grid.one .mc-tags span:nth-child(n+3) { display: inline-flex; }
.mc-grid.one .mc-go { width: 48px; height: 48px; font-size: 16px; }
.mc.is-soon { cursor: default; }
.mc.is-soon:hover { transform: none; }
@media (max-width: 860px) { .mc-grid.one .mc { grid-template-columns: 1fr; } }
/* My work: the Selected projects cards sit in their own two-up grid inside the page grid */
.work-grid > .mc-grid { grid-column: 1 / -1; margin-top: 0; }
.work-grid > .mc-grid:not(:has(.mc:not([hidden]))) { display: none; }
/* second window instead of a phone (web-only products such as QI-Tech) */
.br-win2 { left: auto; right: -2%; top: 26%; width: 46%; z-index: 2; }
.br-win2 img { aspect-ratio: 4 / 3; }
.wk:hover .br-win2, .mc:hover .br-win2 { transform: translateY(-4%) rotate(1deg); }
.br-win2 { transition: transform 1s var(--ease); }

/* ---------- Quick view: a selected project opened in place ----------
   Built from the site's own pieces: an off-white panel holding the shots and a white brief card,
   the eyebrow, a sans name over an italic serif line with the ink underline, and the black arrow button.
   Laptop (1440 × 900): a 1360 × 852 panel with a 456px brief; smaller windows shrink it, big screens zoom it. */
.qv { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.qv[hidden] { display: none; }
.qv-scrim { position: absolute; inset: 0; background: rgba(20, 20, 20, .46); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); opacity: 0; transition: opacity .35s; }
.qv-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 456px; gap: 12px;
  width: min(1360px, 100%); max-height: min(852px, 100%); padding: 12px; border-radius: 30px; background: var(--bg); overflow: hidden;
  box-shadow: 0 60px 120px -40px rgba(20, 20, 20, .55), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  opacity: 0; transform: translateY(28px) scale(.975); transition: opacity .35s, transform .6s var(--ease);
}
.qv.is-open .qv-scrim, .qv.is-open .qv-panel { opacity: 1; }
.qv.is-open .qv-panel { transform: none; }
html.qv-lock, html.qv-lock body { overflow: hidden; }

/* shots */
.qv-media { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
/* the frame takes each shot's own proportions (site.js sizes it), centred in the space beside the brief */
.qv-area { position: relative; flex: none; height: var(--ah, 640px); display: grid; place-items: center; transition: height .45s var(--ease); }
.qv-stage { position: relative; width: var(--sw, 100%); height: var(--sh, 100%); border-radius: 22px; overflow: hidden; background: var(--panel); transition: width .45s var(--ease), height .45s var(--ease); }
.qv-bg { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(44px) saturate(1.2); opacity: .5; transform: scale(1.1); }
/* shots fill the frame edge to edge, no bands above or below */
.qv-stage > img, .qv-stage > video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.015); transition: opacity .45s, transform .7s var(--ease); }
.qv-stage > .on { opacity: 1; transform: none; }
.qv-page { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; opacity: 0; transition: opacity .45s; }
.qv-page.on { opacity: 1; }
.qv-page img { display: block; width: min(100%, 560px); margin: 0 auto; box-shadow: 0 0 0 1px rgba(20, 20, 20, .06), 0 30px 60px -30px rgba(20, 20, 20, .4); }
.qv-hint { position: sticky; bottom: 16px; left: 0; display: table; margin: -46px auto 16px; padding: 7px 12px; border-radius: 999px; background: rgba(20, 20, 20, .78); color: #fff; font-size: 12px; font-weight: 600; transition: opacity .3s; }
.qv-hint::before { content: "↓ "; }
.qv-page.scrolled .qv-hint { opacity: 0; }
.qv-th.pg img { object-position: 50% 0; }
.qv-nav {
  position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  background: #fff; color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -16px rgba(20, 20, 20, .45); transition: transform .3s var(--ease), background .25s, color .25s;
}
.qv-nav svg { width: 18px; height: 18px; }
.qv-nav:hover { background: var(--ink); color: #fff; transform: scale(1.06); }
.qv-prev { left: 18px; }
.qv-next { right: 18px; }
.qv-count { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.qv-count::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.qv-thumbs { display: flex; gap: 8px; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.qv-thumbs::-webkit-scrollbar { display: none; }
.qv-th { position: relative; flex: none; width: 68px; height: 68px; border-radius: 14px; overflow: hidden; background: var(--panel); opacity: .5; transition: opacity .25s, box-shadow .25s, transform .3s var(--ease); }
.qv-th img { width: 100%; height: 100%; object-fit: cover; }
.qv-th:hover { opacity: .9; transform: translateY(-2px); }
.qv-th[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.qv-th i { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--ink); }
.qv-th i::before { content: ''; margin-left: 2px; border: 4px solid transparent; border-left: 6px solid currentColor; border-right: 0; }

/* the brief */
/* the brief takes the height the shot sets and scrolls inside it */
.qv-info { position: relative; display: flex; flex-direction: column; gap: 16px; height: 0; min-height: 100%; overflow-y: auto; padding: 26px 32px 24px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-card); }
.qv-top { display: flex; align-items: center; gap: 12px; }
.qv-eye { font-size: 11.5px; }
.qv-no { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--faint); }
.qv-x { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: background .25s, color .25s, transform .4s var(--ease); }
.qv-x svg { width: 17px; height: 17px; }
.qv-x:focus:not(:focus-visible) { outline: none; }
.qv-x:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.qv-head { margin-top: 6px; }
.qv-info h2 { font-size: clamp(40px, 3.6vw, 54px); line-height: .98; letter-spacing: -.05em; font-weight: 600; color: var(--ink); }
.qv-kind { margin-top: 10px; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; color: var(--ink); }
.qv-line { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.qv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qv-tags span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--bg); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.qv-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qv-fact { display: flex; flex-direction: column; padding: 14px 16px 15px; border-radius: 18px; background: var(--bg); }
.qv-fact.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.qv-fact small { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qv-fact b { margin-top: 10px; font-size: 30px; line-height: 1; font-weight: 600; letter-spacing: -.05em; color: var(--ink); }
.qv-fact.wide b { margin: 0; font-size: 16px; letter-spacing: -.01em; text-align: right; }
.qv-fact em { margin-top: 6px; font-style: normal; font-size: 12px; color: var(--muted); }
.qv-cta { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 6px; }
.qv-go { justify-content: space-between; width: 100%; height: 58px; }
.qv-go .arr { width: 44px; height: 44px; font-size: 15px; }
.qv-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); }
.qv-full { font-weight: 600; color: var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .4s var(--ease); }
.qv-full:hover { background-size: 100% 1px; }
.qv-sub > span { display: inline-flex; align-items: center; gap: 8px; }
.qv-sub .dot { width: 7px; height: 7px; border-radius: 50%; background: #3ccf4e; box-shadow: 0 0 0 4px rgba(60, 207, 78, .18); }

/* tablets and phones: a bottom sheet, shots on top, the brief scrolling under them */
@media (max-width: 1023px) {
  .qv { padding: 0; align-items: flex-end; }
  .qv-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; width: 100%; height: 94vh; height: 94dvh; padding: 10px; border-radius: 24px 24px 0 0; overflow-y: auto; transform: translateY(60px); }
  .qv-media { min-height: auto; }
  .qv-thumbs { flex: none; }
  .qv-info { overflow: visible; height: auto; min-height: auto; padding: 22px 20px 24px; }
  .qv-x { position: fixed; right: 18px; top: calc(6vh + 18px); z-index: 5; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -12px rgba(20, 20, 20, .5); }
  .qv-no { margin-right: 54px; }
  .qv-nav { width: 40px; height: 40px; margin-top: -20px; }
  .qv-th { width: 58px; height: 58px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .qv-panel, .qv-scrim, .qv-stage > img, .qv-stage > video { transition: none; } }

/* project page: a full-page screenshot scrolls inside its tile */
.page-tile { position: relative; height: min(80vh, 900px); }
.page-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); }
.page-scroll img { display: block; width: min(100%, 560px); height: auto; margin: 0 auto; }
.page-hint { position: absolute; right: 16px; bottom: 16px; padding: 7px 12px; border-radius: 999px; background: rgba(20, 20, 20, .78); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }

/* QI-Tech cover: one dashboard frame rising from the bottom, with a KPI, a notification and the urgency ring floating around it */
.qt-cover { position: absolute; inset: 0; overflow: hidden; container-type: size; isolation: isolate; }
.qt-cover .orb { position: absolute; left: 50%; top: 58%; z-index: -1; width: 92cqmax; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: transform 1.2s var(--ease); }
.qt-dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); }
.qt-win { position: absolute; left: 50%; bottom: 0; width: 70cqw; translate: -50% 0; overflow: hidden; border-radius: 2cqmin 2cqmin 0 0; background: #fff; box-shadow: 0 0 0 1.2cqmin rgba(255, 255, 255, .18), 0 30px 60px -24px rgba(20, 8, 60, .7); transition: transform 1s var(--ease); }
.qt-win img { display: block; width: 100%; height: calc(100cqh - 15cqh - 5.4cqmin); object-fit: cover; object-position: 50% 0; }
.qt-card { position: absolute; z-index: 2; border-radius: 2.2cqmin; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 2.6cqmin 5cqmin -1.6cqmin rgba(20, 8, 60, .55); color: #101828; font-family: 'Inter', system-ui, sans-serif; transition: transform 1s var(--ease); }
.qt-kpi { left: 5cqw; bottom: 9cqh; display: flex; flex-direction: column; padding: 2.2cqmin 2.8cqmin; min-width: 20cqw; }
.qt-kpi small { font-size: max(8px, 2.3cqmin); color: #667085; white-space: nowrap; }
.qt-kpi b { margin-top: .6cqmin; font-size: max(14px, 6.4cqmin); line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.qt-kpi em { margin-top: .6cqmin; font-style: normal; font-size: max(8px, 2.2cqmin); font-weight: 600; color: #D92D20; }
.qt-toast { left: 4cqw; top: 36cqh; display: flex; align-items: center; gap: 1.8cqmin; padding: 1.6cqmin 2.4cqmin 1.6cqmin 1.6cqmin; background: #1E1342; color: #fff; }
.qt-toast i { display: grid; place-items: center; width: 6cqmin; height: 6cqmin; border-radius: 1.6cqmin; background: #4EC0DA; font-style: normal; font-weight: 700; font-size: max(9px, 2.8cqmin); color: #1E1342; }
.qt-toast span { font-size: max(8px, 2.1cqmin); color: #C9BEF0; white-space: nowrap; }
.qt-toast b { display: block; font-size: max(9px, 2.6cqmin); color: #fff; }
.qt-ring { right: 6cqw; bottom: 12cqh; width: 18cqmin; padding: 1.8cqmin; }
.qt-ring svg { display: block; width: 100%; rotate: -90deg; }
.qt-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.qt-ring .t { stroke: #F2F4F7; }
.qt-ring .a1 { stroke: #D92D20; stroke-dasharray: 72 100; }
.qt-ring .a2 { stroke: #F79009; stroke-dasharray: 58 100; }
.qt-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: max(7px, 1.8cqmin); color: #667085; }
.qt-ring span b { font-size: max(11px, 3.6cqmin); line-height: 1; color: #101828; }
.mc:hover .qt-win, .wk:hover .qt-win { transform: translateY(-1.5%); }
.mc:hover .qt-kpi, .wk:hover .qt-kpi { transform: translateY(-4%) rotate(-1deg); }
.mc:hover .qt-toast, .wk:hover .qt-toast { transform: translateY(-6%); }
.mc:hover .qt-cover .orb, .wk:hover .qt-cover .orb { transform: scale(1.06); }