/* AD.JUST Studio — Marketing kit styles */

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--canvas); color: var(--body); font-family: var(--font-body); }

/* Italic disabled site-wide — brand uses upright type only. */
em, i, cite, address, dfn { font-style: normal; }

.aj-app { min-height: 100vh; }
.aj-section { max-width: var(--max-width); margin: 0 auto; padding: 96px 32px; }

/* ── Stacked sticky sections (HomePage) ───────────────────────────────────
   Each section pins to the viewport top while the next one rises from
   below and covers it. The wrapper bounds the sticky containment so the
   stack releases cleanly into the footer rather than overlapping it.
   `isolation: isolate` on the wrapper plus ascending z-index per stack
   guarantees later stacks paint above earlier ones — without this, when
   an earlier stack gets opacity<1 (the dim) and forms its own stacking
   context, browsers can render it ABOVE later siblings that don't have
   one, leaking the previous section through the next. */
.aj-stack-wrap { position: relative; isolation: isolate; }
.aj-stack {
  position: sticky;
  top: 0;
  min-height: 100vh;
  background-color: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Stack itself stays at opacity 1 — the inner layer handles dimming so
     the stack's solid background never becomes transparent. */
}
.aj-stack__inner { width: 100%; will-change: opacity; }
.aj-stack-wrap > .aj-stack:nth-child(1) { z-index: 1; }
.aj-stack-wrap > .aj-stack:nth-child(2) { z-index: 2; }
.aj-stack-wrap > .aj-stack:nth-child(3) { z-index: 3; }
.aj-stack-wrap > .aj-stack:nth-child(4) { z-index: 4; }
.aj-stack-wrap > .aj-stack:nth-child(5) { z-index: 5; }
.aj-stack-wrap > .aj-stack:nth-child(6) { z-index: 6; }
/* Hero brings its own gradient + 100vh sizing — let it fill the stack. */
.aj-stack--hero { align-items: stretch; }
/* [ADD: Mobile] 100dvh tracks the current viewport (URL bar collapses).
   100vh fallback stays for older browsers — dvh-supporting engines
   override via the second declaration. */
.aj-stack--hero > .aj-stack__inner { min-height: 100vh; min-height: 100dvh; display: flex; }
.aj-stack--hero > .aj-stack__inner > * { flex: 1; min-height: 100vh; min-height: 100dvh; }
/* Scrollable stack: opt out of the 100vh sticky pin so a tall section
   (e.g. the masonry grid) flows naturally and the user can read all of
   it. Sticky on the surrounding stacks still works because each one's
   sticky bound is the .aj-stack-wrap containing block, not its
   immediate sibling. The next stack covers this one once it scrolls
   past, which keeps the stacked-cover transition into the next section. */
.aj-stack--scrollable {
  position: relative;
  min-height: auto;
  display: block;
}
.aj-stack--scrollable > .aj-stack__inner { padding: 0; }
/* Top-aligned stack: content sits at the top of the 100vh sticky pin
   instead of vertically centered. Used after a scrollable stack so the
   next section's content is visible immediately when the user scrolls
   in, without ~50vh of empty pinned-stack space above it. */
.aj-stack--top { align-items: flex-start; }
.aj-h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 52px; line-height: 1.05; letter-spacing: -0.5px; color: #fff; margin: 16px 0 0; }
.aj-body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--body); }
.aj-meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3px; color: var(--muted); }

/* ── Word + pill mark ─────────────────────────────────────────────────── */
.aj-word { font-family: var(--font-display); color: #fff; letter-spacing: -0.5px; }
.aj-pill-mark { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; color: #fff; padding: 5px 16px; border: 1px solid #fff; border-radius: 9999px; text-transform: uppercase; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.aj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 24px; font-family: var(--font-display); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 4px; border: 0; cursor: pointer; transition: all 200ms var(--ease); color: #fff; white-space: nowrap; }
.aj-btn--primary { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); box-shadow: 0 0 24px rgba(124,58,237,0.4); }
.aj-btn--primary:hover { box-shadow: 0 0 36px rgba(124,58,237,0.6); transform: translateY(-1px); }
.aj-btn--secondary { background: transparent; border: 1px solid var(--hairline); }
.aj-btn--secondary:hover { border-color: var(--accent-border); color: var(--accent-text); }

/* ── Pills ────────────────────────────────────────────────────────────── */
.aj-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; padding: 6px 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--hairline); border-radius: 9999px; color: #fff; cursor: pointer; transition: all 200ms var(--ease); }
.aj-pill--label { font-family: var(--font-display); font-size: 12px; letter-spacing: 2px; padding: 7px 22px; white-space: nowrap; flex-shrink: 0; }
.aj-pill--tag { color: var(--accent-text); background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.3); }
.aj-pill--tab { color: var(--muted); background: transparent; }
.aj-pill--tab:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
.aj-pill--tab.is-active { background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.3); color: var(--accent-text); }

/* ── Section Label ────────────────────────────────────────────────────── */
.aj-section-label { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 0 auto 48px; }
.aj-section-label .aj-rule { flex: 1; height: 1px; background: var(--hairline); }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.aj-nav { position: sticky; top: 0; z-index: 50; height: 72px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(8,5,10,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); will-change: backdrop-filter; }
.aj-nav__logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.aj-nav__logo .aj-word { font-size: 18px; }
.aj-nav__logo .aj-pill-mark { font-size: 9px; padding: 4px 12px; letter-spacing: 1.5px; }
.aj-nav__links { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; flex: 1; justify-content: center; }
.aj-nav__links a { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--body); text-decoration: none; transition: color 200ms var(--ease); }
.aj-nav__links a:hover, .aj-nav__links a.is-active { color: #fff; }
.aj-nav__actions { display: flex; align-items: center; gap: 12px; }
.aj-theme-toggle { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--hairline); background: transparent; color: var(--body); font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: border-color 200ms var(--ease), color 200ms var(--ease); }
.aj-theme-toggle:hover { border-color: var(--accent-border); color: var(--accent-text); }
.aj-theme-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(139,92,246,0.6); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.aj-hero { position: relative; min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); padding: 64px; overflow: hidden; background: var(--gradient-hero); display: flex; align-items: center; justify-content: center; }
.aj-hero--short { min-height: 280px; padding: 40px 32px; }
.aj-hero--short .aj-hero__frame { inset: 24px; }
.aj-hero--short .aj-hero__caption { bottom: 32px; }
.aj-hero__frame { position: absolute; inset: 60px; border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; }
.aj-hero__tag { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: #fff; padding: 8px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px; backdrop-filter: blur(12px); }
.aj-hero__tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); }
.aj-hero__tag { white-space: nowrap; max-width: 30%; }
.aj-hero__tag--l { left: 100px; top: 120px; transform: none; }
.aj-hero__tag--r { right: 100px; top: 120px; transform: none; }
.aj-hero__lockup { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.aj-hero__particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; filter: blur(12px); will-change: opacity, filter; }
.aj-hero__particles.is-ready { animation: aj-hero-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
@keyframes aj-hero-reveal { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .aj-hero__particles.is-ready { animation: none; opacity: 1; filter: none; } }
.aj-hero__word { font-family: var(--font-display); font-size: 80px; letter-spacing: -1px; color: #fff; line-height: 1; }
.aj-hero__pill { font-family: var(--font-display); font-size: 22px; letter-spacing: 6px; color: #fff; padding: 12px 48px; border: 0.75px solid #fff; border-radius: 9999px; text-transform: uppercase; font-weight: 300; }
.aj-hero__caption { position: absolute; bottom: 88px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* ── Project Cards ────────────────────────────────────────────────────── */
.aj-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.aj-card { position: relative; aspect-ratio: 16/10; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface-card); overflow: hidden; text-decoration: none; transition: all 300ms var(--ease); }
.aj-card:hover { border-color: rgba(139,92,246,0.3); box-shadow: 0 0 40px rgba(139,92,246,0.10); transform: translateY(-2px); }
.aj-card__media { position: absolute; inset: 0; overflow: hidden; transition: transform 600ms var(--ease); }
.aj-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aj-card:hover .aj-card__media { transform: scale(1.04); }
.aj-card__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,5,10,0) 40%, rgba(8,5,10,0.9) 100%); }
.aj-card__meta { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.aj-card__title { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; }
.aj-card__loc { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3px; color: var(--muted); }

/* ── Masonry variant (Work page) ──────────────────────────────────────────
   CSS columns give a true masonry layout. Each card breaks-inside-avoid
   so it stays whole inside one column. Per-card aspect-ratios provide
   visual variety with our 6-project set. Default state is pure image —
   meta block fades in on hover so the grid reads as a moodboard. */
.aj-projects--masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: none;
  padding: 0;
}
.aj-projects--masonry .aj-card {
  display: block;
  margin: 0;
  border-radius: 4px;
  border-color: transparent;
  background: var(--canvas);
  aspect-ratio: 4/3;
  overflow: hidden;
}
.aj-projects--masonry .aj-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  display: block;
  aspect-ratio: auto;
}
/* Whole-image reveal: every project sits in B&W until hover, then the
   full image fades to colour. */
.aj-projects--masonry .aj-card__img {
  filter: grayscale(1);
  transition: filter 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aj-projects--masonry .aj-card:hover .aj-card__img { filter: grayscale(0); }
/* No dark gradient overlay — meta floats over the image as a centered panel. */
.aj-projects--masonry .aj-card__overlay { display: none; }
/* Bottom caption: a full-width strip flush against the image's bottom
   edge — no inset, no border-radius. Slides up from below on hover with
   a fade so it reads like a printed caption settling into place. */
.aj-projects--masonry .aj-card__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  transform: translateY(12px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--canvas);
  padding: 14px 18px 16px;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aj-projects--masonry .aj-card:hover .aj-card__meta {
  opacity: 1;
  transform: translateY(0);
}
.aj-projects--masonry .aj-card__title { color: var(--ink); font-size: 18px; }
.aj-projects--masonry .aj-card__loc { color: var(--muted); }
.aj-projects--masonry .aj-card:hover .aj-card__media { transform: none; }
.aj-projects--masonry .aj-card:hover { transform: none; box-shadow: none; }
@media (max-width: 1080px) {
  .aj-projects--masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .aj-projects--masonry { grid-template-columns: 1fr; }
}

/* ── Services editorial mosaic (intro section) ─────────────────────────── */
.aj-section--svcgrid { padding-top: 56px; padding-bottom: 96px; }

.aj-svcgrid__head { display: flex; align-items: center; gap: 18px; padding: 0 0 28px; }
.aj-svcgrid__head-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.aj-svcgrid__head-rule  { flex: 1; height: 1px; background: var(--hairline); }
.aj-svcgrid__head-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 10px rgba(167,139,250,0.6); }

.aj-svcgrid__hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
  padding: 16px 0 56px;
}
.aj-svcgrid__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(34px, 5.9vw, 87px);
  line-height: 0.96;
  letter-spacing: -1.4px;
  color: var(--ink);
  margin: 0;
}
.aj-svcgrid__meta { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; padding-bottom: 8px; }
.aj-svcgrid__sub  { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--body); margin: 0; max-width: 320px; }
.aj-svcgrid__cta {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; line-height: 1;
  color: var(--ink); text-decoration: none;
  transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.aj-svcgrid__cta:hover { background: var(--accent-bright); color: #08050a; border-color: var(--accent-bright); transform: translate(2px, -2px); }

/* mosaic — 4 cols × 3 rows with explicit cell spans set inline.
   `gap: 1px; background: hairline` paints the dividers between opaque cells. */
.aj-svcgrid__mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(180px, auto) minmax(180px, auto) minmax(180px, auto);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.aj-svc {
  position: relative;
  padding: 26px 28px 24px;
  background: #0c0810;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  min-height: 200px;
  overflow: hidden;
  transition: background 220ms var(--ease), box-shadow 220ms var(--ease);
  isolation: isolate;
}
.aj-svc:hover {
  background: rgba(139,92,246,0.08);
  box-shadow: inset 0 0 0 1px rgba(139,92,246,0.35), 0 12px 32px rgba(124,58,237,0.18);
  z-index: 1;
}

.aj-svc__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1;
  color: var(--accent-bright);
}
.aj-svc__title {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 1.5px; line-height: 1.35;
  text-transform: uppercase;
  color: var(--ink);
  align-self: end;
  max-width: 260px;
}
.aj-svc__tag {
  position: absolute;
  right: 28px; bottom: 24px;
  font-family: var(--font-display);
  font-size: 9px; letter-spacing: 2px; line-height: 1.4;
  color: var(--muted);
  text-transform: uppercase;
  text-align: right;
  max-width: 130px;
}
.aj-svc__arrow {
  position: absolute;
  left: 28px; bottom: 22px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--accent-bright);
  opacity: 0.85;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.aj-svc:hover .aj-svc__arrow { opacity: 1; transform: translate(3px, -3px); }

/* photo variant — B&W architectural bg with brand-violet tint overlay */
.aj-svc--photo { background: #1a0d2e; padding-bottom: 28px; }
.aj-svc--photo .aj-svc__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.05) brightness(0.6);
  z-index: -2;
  transition: filter 320ms var(--ease);
}
.aj-svc--photo::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(60,30,120,0.30) 0%, rgba(40,20,80,0.10) 40%, rgba(20,8,40,0.85) 100%),
    linear-gradient(135deg, rgba(124,58,237,0.20) 0%, rgba(0,0,0,0) 60%);
  transition: background 320ms var(--ease);
}
.aj-svc--photo .aj-svc__num   { color: #c4b5fd; }
.aj-svc--photo .aj-svc__title { color: #fff; }
.aj-svc--photo .aj-svc__tag   { color: rgba(196,181,253,0.85); }
.aj-svc--photo .aj-svc__arrow { color: #c4b5fd; opacity: 0.95; }
.aj-svc--photo:hover { background: #1a0d2e; box-shadow: inset 0 0 0 1px rgba(196,181,253,0.45), 0 14px 36px rgba(124,58,237,0.32); }
.aj-svc--photo:hover .aj-svc__bg { filter: grayscale(0.7) contrast(1.1) brightness(0.65); }
.aj-svc--photo:hover::before {
  background:
    linear-gradient(180deg, rgba(124,58,237,0.40) 0%, rgba(60,30,120,0.18) 40%, rgba(20,8,40,0.85) 100%),
    linear-gradient(135deg, rgba(167,139,250,0.30) 0%, rgba(0,0,0,0) 60%);
}

/* filled violet accent — the editorial "slap" card (07), matches the
   active step pill in CreativePipeline so the page reads as one system */
.aj-svc--dark {
  background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow: 0 14px 32px rgba(124,58,237,0.32), inset 0 0 0 1px rgba(255,255,255,0.20);
}
.aj-svc--dark .aj-svc__num   { color: #ffffff; }
.aj-svc--dark .aj-svc__title { color: #ffffff; }
.aj-svc--dark .aj-svc__tag   { color: rgba(255,255,255,0.75); }
.aj-svc--dark .aj-svc__arrow { color: #ffffff; opacity: 1; }
.aj-svc--dark:hover {
  background: linear-gradient(180deg, #9d6fff 0%, #7c3aed 100%);
  box-shadow: 0 18px 40px rgba(124,58,237,0.42), inset 0 0 0 1px rgba(255,255,255,0.25);
}

@media (max-width: 1080px) {
  .aj-svcgrid__hero { grid-template-columns: 1fr; gap: 24px; }
  .aj-svcgrid__mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .aj-svc { grid-area: auto !important; min-height: 160px; }
  .aj-svcgrid__title { font-size: clamp(28px, 7.7vw, 56px); }
}

/* ── Services deck: horizontal accordion ─────────────────────────────────
   9 narrow strips at rest — empty cards with just num + title centred at
   the bottom. On hover one strip expands (flex-grow), its background
   image fades in, the title scales up and a description slides in. The
   image only appears on hover; default state is a clean canvas-coloured
   strip — minimal editorial look that turns rich on interaction. */
.aj-services-h {
  position: relative;
  height: 80vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--canvas);
  display: grid;
  grid-template-rows: auto 1fr;
}
.aj-services-h__head {
  display: flex;
  justify-content: center;
  padding: 28px 0 14px;
}
.aj-services-h__track {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.aj-services-h__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--canvas);
  border-right: 1px solid var(--hairline);
  cursor: pointer;
  transition: flex-grow 720ms cubic-bezier(0.16, 1, 0.3, 1);
  isolation: isolate;
}
.aj-services-h__card:last-child { border-right: none; }
.aj-services-h__card:hover { flex-grow: 2.1; }

/* Background image: faint B&W preview by default, full colour on hover */
.aj-services-h__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.18;
  filter: grayscale(1) brightness(0.55) contrast(0.95);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 720ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aj-services-h__card:hover .aj-services-h__media {
  opacity: 1;
  filter: grayscale(0) brightness(0.78) contrast(1);
}

/* Dark overlay: only present when image is showing */
.aj-services-h__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,5,10,0.85) 0%,
    rgba(8,5,10,0.4) 55%,
    rgba(8,5,10,0) 100%
  );
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aj-services-h__card:hover .aj-services-h__overlay { opacity: 1; }

/* Body sits near the top of each strip; content reflows as the card widens */
.aj-services-h__body {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 32px;
  bottom: auto;
  z-index: 1;
  color: var(--ink);
  transition: color 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aj-services-h__card:hover .aj-services-h__body { color: #fff; }

.aj-services-h__num {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  transition: color 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aj-services-h__card:hover .aj-services-h__num { color: rgba(255,255,255,0.7); }

.aj-services-h__title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.2px;
  line-height: 1.18;
  margin: 0;
  color: inherit;
  text-transform: uppercase;
  font-weight: 400;
  transition: font-size 720ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aj-services-h__card:hover .aj-services-h__title { font-size: 30px; }

.aj-services-h__desc {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 16px 0 0;
  max-width: 480px;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  /* On unhover: fast fade-out (220ms, no delay) so it disappears as the
     card starts collapsing — no awkward lingering text. */
  transition:
    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aj-services-h__card:hover .aj-services-h__desc {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  /* On hover: wait for the 720ms card-expansion to finish, then play a
     focus-pull (blur 4px → 0) over 720ms for a cinematic settle. */
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1) 760ms,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1) 760ms,
    filter 720ms cubic-bezier(0.16, 1, 0.3, 1) 760ms;
}

@media (max-width: 1080px) {
  .aj-services-h__card:hover { flex-grow: 1.6; }
  .aj-services-h__card:hover .aj-services-h__title { font-size: 24px; }
  .aj-services-h__desc { font-size: 13px; }
}
/* [ADD: Mobile] On phones the horizontal accordion becomes a simple
   vertical block list — each service is a full-width row with number,
   title and description always visible. No hover-expansion (touch
   doesn't have hover anyway). */
@media (max-width: 720px) {
  /* Container — drop the 100vw full-bleed + fixed 80vh */
  .aj-services-h {
    height: auto;
    width: 100%;
    margin-left: 0;
    background: transparent;
  }
  .aj-services-h__head { padding: 20px 0 12px; }

  /* Track — column flow */
  .aj-services-h__track {
    flex-direction: column;
    height: auto;
  }

  /* Cards — full-width rows, hairline divider, padding for content */
  .aj-services-h__card {
    flex: 0 0 auto;
    height: auto;
    min-height: 96px;
    padding: 22px 20px;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    transition: none;
  }
  .aj-services-h__card:last-child { border-bottom: none; }
  .aj-services-h__card:hover { flex-grow: unset; }

  /* Body — normal flow inside card padding */
  .aj-services-h__body {
    position: relative;
    inset: auto;
    color: var(--ink);
  }

  /* Number — small label above title */
  .aj-services-h__num {
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--muted);
    transition: none;
  }
  .aj-services-h__card:hover .aj-services-h__num { color: var(--muted); }

  /* Title — readable, fixed size, no scaling on hover */
  .aj-services-h__title {
    font-size: 18px;
    line-height: 1.25;
    transition: none;
  }
  .aj-services-h__card:hover .aj-services-h__title { font-size: 18px; }

  /* Description — always visible, no blur/scroll-in */
  .aj-services-h__desc {
    display: block;
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    max-width: none;
    color: var(--body);
  }
  .aj-services-h__card:hover .aj-services-h__desc {
    transition: none;
    transform: none;
    filter: none;
  }

  /* Image bg — subtle constant tint, no hover flash */
  .aj-services-h__media {
    opacity: 0.15;
    filter: grayscale(1) brightness(0.55) contrast(0.95);
    transition: none;
  }
  .aj-services-h__card:hover .aj-services-h__media {
    opacity: 0.15;
    filter: grayscale(1) brightness(0.55) contrast(0.95);
  }
  .aj-services-h__overlay { display: none; }
}

/* ── Manifesto ────────────────────────────────────────────────────────── */
.aj-manifesto { max-width: 880px; margin: 0 auto; text-align: center; }
.aj-manifesto p { font-family: var(--font-display); font-size: 36px; line-height: 1.2; color: #fff; text-transform: uppercase; margin: 0 0 12px; letter-spacing: -0.5px; }
.aj-manifesto p em { font-style: normal; color: var(--accent-bright); }
/* Word-by-word reveal target: each manifesto word is wrapped in this
   span by JS so transforms can apply without breaking line layout. */
.aj-word-rev { display: inline-block; will-change: opacity, transform, filter; }
.aj-manifesto__sub { font-family: var(--font-body) !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--body) !important; text-transform: none !important; letter-spacing: 0 !important; margin-top: 32px !important; max-width: 580px; margin-left: auto !important; margin-right: auto !important; }

/* ── About (home page editorial section) ──────────────────────────────── */
.aj-about { position: relative; isolation: isolate; padding-bottom: 64px; }

.aj-about__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-bottom: 28px; }
.aj-about__head .aj-section-label { margin: 0 !important; max-width: none !important; flex: 0 0 auto; }
.aj-about__head .aj-section-label .aj-rule { display: none; }
.aj-about__meta {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted);
}

.aj-about__topline { height: 1px; background: var(--hairline); margin: 0 0 56px; }

/* Headline — overrides centered manifesto defaults */
.aj-about__manifesto { max-width: none !important; margin: 0 !important; text-align: left !important; position: relative; z-index: 1; }
.aj-about__manifesto .aj-about__h {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.7vw, 70px) !important;
  line-height: 1.0 !important;
  letter-spacing: -1px !important;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0 0 4px !important;
  max-width: 92%;
}
/* em color falls through to .aj-manifesto p em — keeps light/dark flip working */

/* Body — Poppins description with violet left-rule */
.aj-about__body {
  margin: 56px 0 0;
  max-width: 460px;
  position: relative; z-index: 1;
  border-left: 1px solid var(--accent-bright);
  padding: 4px 0 4px 22px;
}
.aj-about__body p { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--body); margin: 0; }

/* Pillars row */
.aj-about__pillars {
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.4fr;
  gap: 32px;
  align-items: start;
  position: relative; z-index: 1;
}
.aj-about__pillar { position: relative; padding-left: 14px; }
.aj-about__pillar::before,
.aj-about__tagline::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-bright);
}
.aj-about__pillar-n { font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--ink); margin-bottom: 12px; letter-spacing: 0.5px; }
.aj-about__pillar-l { font-family: var(--font-display); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 10px; }
.aj-about__pillar-d { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--body); max-width: 220px; }

.aj-about__tagline { position: relative; padding-left: 14px; display: flex; gap: 16px; align-items: flex-start; }
.aj-about__globe { width: 32px; height: 32px; color: var(--accent-bright); flex-shrink: 0; opacity: 0.9; }
.aj-about__tagline p {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink); line-height: 1.55; margin: 0;
}

@media (max-width: 1080px) {
  .aj-about__manifesto .aj-about__h { font-size: clamp(20px, 5.5vw, 32px) !important; }
  .aj-about__pillars { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .aj-about__head { flex-direction: column; gap: 14px; }
  .aj-about__meta { align-items: flex-start; }
}

/* ── Clients ──────────────────────────────────────────────────────────── */
.aj-clients { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 32px 48px; padding: 40px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.aj-client { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.5); transition: color 200ms var(--ease); filter: grayscale(1); }
.aj-client:hover { color: #fff; }
.aj-client__mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; flex: 0 0 auto; opacity: 0.85; }
.aj-client__mark svg { width: 100%; height: 100%; }

/* VIVA wordmark — letter-by-letter reveal triggered on hover.
   Idle = fully visible bold logo (no animation). On hover each letter
   replays from opacity 0 + 8px Y, staggered so the V-I-V-A glyphs lead
   and DEVELOPMENT letters chase after a small pause. 4 + 11 = 15 paths.
   Animation runs `both`, so post-animation state is fully visible; on
   un-hover, the animation simply detaches and the logo returns to idle. */
.aj-viva-svg > g > * {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
/* Cinematic focus-pull per letter: opacity + 8px Y + blur 5px → clear.
   The blur removal is what gives each letter its silky, defocused-to-
   sharp feel — same trick used in luxury-brand intros. */
@keyframes aj-viva-letter {
  from { opacity: 0; transform: translateY(8px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0);   }
}
/* 1000ms per letter, 220ms stagger — heavy overlap (each next glyph
   enters at ~22% of the previous one's fade) for a continuous flow.
   ease-out-expo curve so opacity/blur land softly. */
.aj-client:hover .aj-viva-svg > g > * {
  animation: aj-viva-letter 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.aj-client:hover .aj-viva-svg > g > *:nth-child(1) { animation-delay: 0ms; }
.aj-client:hover .aj-viva-svg > g > *:nth-child(2) { animation-delay: 220ms; }
.aj-client:hover .aj-viva-svg > g > *:nth-child(3) { animation-delay: 440ms; }
.aj-client:hover .aj-viva-svg > g > *:nth-child(4) { animation-delay: 660ms; }
/* DEVELOPMENT — single soft fade, blends into the V-I-V-A tail. */
.aj-client:hover .aj-viva-svg > g > *:nth-child(n+5) {
  animation-duration: 1100ms;
  animation-delay: 1100ms;
}
@media (prefers-reduced-motion: reduce) {
  .aj-client:hover .aj-viva-svg > g > * { animation: none; }
}

/* ── Team ─────────────────────────────────────────────────────────────── */
/* ── Team / Dossier grid ──────────────────────────────────────────────── */
.aj-section--flush { padding: 96px 0; max-width: none; }

.aj-team-dossier {
  --dossier-fg: #fff;
  --dossier-mute: rgba(255,255,255,0.55);
  --dossier-faint: rgba(255,255,255,0.32);
  --dossier-line: rgba(255,255,255,0.10);
  --dossier-line-strong: rgba(255,255,255,0.22);
  --dossier-bg-hover: rgba(255,255,255,0.025);
  --dossier-bg-active: rgba(139,92,246,0.06);
  /* Brand restricts the site to two faces: Michroma (display) + Poppins
     (body). The dossier was originally designed against Cormorant Garamond
     and DM Mono; we re-map those tokens here so only the approved families
     are used. */
  --serif: var(--font-body);     /* Poppins — for italic editorial body */
  --mono:  var(--font-display);  /* Michroma — for uppercase tracked tags */
  position: relative;
  padding: 0 32px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Editorial heading block */
.aj-team-dossier__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 0 0 56px;
  border-bottom: 1px solid var(--dossier-line);
  align-items: end;
  margin-bottom: 0;
}
.aj-team-dossier__eyebrow {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--dossier-mute);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.aj-team-dossier__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--dossier-faint);
}
.aj-team-dossier__h {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 64px;
  line-height: 1.02;
  color: var(--dossier-fg);
  letter-spacing: -0.5px;
  margin: 0;
  text-transform: none;
}
.aj-team-dossier__h em {
  font-weight: 300;
}
.aj-team-dossier__h span {
  font-style: normal;
  color: var(--dossier-mute);
}
.aj-team-dossier__note {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.85;
  color: var(--dossier-mute);
  letter-spacing: 0.2px;
  max-width: 360px;
  justify-self: end;
  text-align: left;
}

/* The 7-column dossier grid */
.aj-team-dossier__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}

/* Vertical hairlines between columns */
.aj-dossier__col {
  all: unset;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px 18px 28px;
  cursor: none;
  text-align: left;
  transition: background 240ms var(--ease);
  min-height: 440px;
  isolation: isolate;
}
.aj-dossier__col + .aj-dossier__col {
  border-left: 1px solid var(--dossier-line);
}
.aj-dossier__col:hover {
  background: var(--dossier-bg-hover);
}
.aj-dossier__col.is-active {
  background: var(--dossier-bg-active);
}

/* Role at the top of each card — uniform 2-line min-height so 1-line
   and 2-line roles align across the row. */
.aj-dossier__role-top {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--dossier-mute);
  min-height: calc(10.5px * 1.5 * 2);
  display: flex;
  align-items: flex-start;
  transition: color 200ms var(--ease);
}
.aj-dossier__col:hover .aj-dossier__role-top,
.aj-dossier__col.is-active .aj-dossier__role-top { color: var(--accent-bright); }

/* index header line (legacy, retained for the panel — currently unused) */
.aj-dossier__index {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dossier-mute);
}
.aj-dossier__num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--dossier-fg);
  line-height: 1;
}
.aj-dossier__dash { color: var(--dossier-faint); }
.aj-dossier__hint {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: 1.8px;
  color: var(--dossier-faint);
  transition: color 200ms var(--ease);
}
.aj-dossier__col:hover .aj-dossier__hint,
.aj-dossier__col.is-active .aj-dossier__hint { color: var(--accent-bright); }

/* Avatar — 3:4 portrait card with hairline ring + crop corners */
.aj-dossier__avatar-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px 8px 6px;
}
.aj-dossier__avatar {
  position: relative;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  display: grid;
  place-items: center;
  border: 0.5px solid var(--dossier-line-strong);
  background:
    radial-gradient(120% 120% at 30% 25%,
      hsl(var(--tone, 220) 22% 14%) 0%,
      hsl(var(--tone, 220) 14% 6%) 70%,
      #050308 100%);
  transition: border-color 260ms var(--ease), transform 400ms var(--ease);
  overflow: hidden;
}
.aj-dossier__avatar::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  border: 0.5px solid rgba(255,255,255,0.06);
  z-index: 2;
  pointer-events: none;
}
.aj-dossier__col:hover .aj-dossier__avatar { border-color: rgba(255,255,255,0.55); }
.aj-dossier__col.is-active .aj-dossier__avatar { border-color: var(--accent-bright); }
.aj-dossier__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
  line-height: 1;
  z-index: 0;
}
.aj-dossier__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: grayscale(1) contrast(1.05);
  z-index: 1;
}
.aj-dossier__col:hover .aj-dossier__photo { filter: grayscale(1) contrast(1.1) brightness(1.05); }
.aj-dossier__col.is-active .aj-dossier__photo { filter: grayscale(1) contrast(1.1) brightness(1.05); }

/* Crosshair "crop" corners around the avatar — editorial print mark */
.aj-dossier__corner {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.aj-dossier__corner--tl {
  top: 4px; left: 8px;
  border-top: 0.5px solid var(--dossier-faint);
  border-left: 0.5px solid var(--dossier-faint);
}
.aj-dossier__corner--br {
  bottom: 0; right: 8px;
  border-bottom: 0.5px solid var(--dossier-faint);
  border-right: 0.5px solid var(--dossier-faint);
}
.aj-dossier__col:hover .aj-dossier__corner,
.aj-dossier__col.is-active .aj-dossier__corner { opacity: 1; }

/* Identity */
.aj-dossier__id { display: flex; flex-direction: column; gap: 6px; }
.aj-dossier__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.2px;
  color: var(--dossier-fg);
  text-transform: none;
}
.aj-dossier__role {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dossier-mute);
  line-height: 1.5;
}

.aj-dossier__foot {
  margin-top: auto;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: 2.4px;
  color: var(--dossier-faint);
  text-transform: uppercase;
  text-align: center;
}
.aj-dossier__foot-num {
  font-size: 1.3em;
  letter-spacing: 1px;
  color: var(--dossier-mute);
}

/* ── Expanded panel — spans all 7 columns ─────────────────────────────── */
.aj-dossier__panel {
  grid-column: 1 / -1;
  border-top: 1px solid var(--dossier-line);
  border-bottom: 1px solid var(--dossier-line);
  padding: 36px 18px 44px;
  background:
    linear-gradient(180deg, rgba(139,92,246,0.04) 0%, rgba(139,92,246,0) 60%);
  animation: ajDossierIn 320ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ajDossierIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.aj-dossier__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--dossier-line);
  margin-bottom: 32px;
}
.aj-dossier__panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dossier-mute);
}
.aj-dossier__bullet {
  width: 6px; height: 6px;
  background: var(--accent-bright);
  border-radius: 9999px;
  display: inline-block;
}
.aj-dossier__close {
  all: unset;
  cursor: none;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dossier-mute);
  padding: 6px 14px;
  border: 0.5px solid var(--dossier-line-strong);
  border-radius: 9999px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.aj-dossier__close:hover { color: var(--dossier-fg); border-color: var(--dossier-fg); }

.aj-dossier__panel-body {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.2fr 1.2fr;
  gap: 64px;
}
.aj-dossier__panel-eyebrow {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dossier-faint);
  margin-bottom: 16px;
}
.aj-dossier__portrait {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  border-radius: 40px;
  overflow: hidden;
  border: 1px solid var(--dossier-line-strong);
  background: rgba(255,255,255,0.03);
  margin: 0 0 24px;
  position: relative;
}
.aj-dossier__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
}
.aj-dossier__panel-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--dossier-fg);
  margin: 0 0 6px;
  text-transform: none;
}
.aj-dossier__panel-role {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dossier-mute);
}
.aj-dossier__years {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--dossier-line);
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.aj-dossier__years-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 96px;
  line-height: 0.85;
  color: var(--dossier-fg);
  letter-spacing: -2px;
}
.aj-dossier__years-label {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dossier-mute);
  line-height: 1.5;
  padding-bottom: 10px;
}

.aj-dossier__bio {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0;
  margin: 0 0 32px;
  max-width: 56ch;
  text-wrap: pretty;
}
.aj-dossier__signature {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 1px;
  color: var(--dossier-faint);
  text-transform: uppercase;
}

.aj-dossier__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.aj-dossier__facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--dossier-line);
}
.aj-dossier__facts li:last-child { border-bottom: 1px solid var(--dossier-line); }
.aj-dossier__fact-k {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dossier-faint);
}
.aj-dossier__fact-v {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--dossier-fg);
}

/* legend strip below */
.aj-team-dossier__legend {
  display: flex;
  justify-content: space-between;
  padding: 18px 0 0;
  border-top: 1px solid var(--dossier-line);
  font-family: var(--mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dossier-faint);
}

/* ── Tablet / mobile collapse ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .aj-team-dossier__h { font-size: 48px; }
  .aj-team-dossier__grid { grid-template-columns: repeat(3, 1fr); }
  .aj-dossier__col { border-left: 1px solid var(--dossier-line); padding: 28px 16px; min-height: auto; }
  .aj-dossier__col:nth-child(3n+1) { border-left: 0; }
  .aj-dossier__col + .aj-dossier__col { border-left: 1px solid var(--dossier-line); }
  .aj-dossier__col:nth-child(n+4) { border-top: 1px solid var(--dossier-line); }
  .aj-dossier__panel-body { grid-template-columns: 1fr; gap: 32px; }
  .aj-team-dossier__head { grid-template-columns: 1fr; }
  .aj-team-dossier__note { justify-self: start; }
}
@media (max-width: 480px) {
  .aj-team-dossier__h { font-size: 36px; }
  .aj-team-dossier__grid { grid-template-columns: repeat(2, 1fr); }
  .aj-dossier__col:nth-child(3n+1) { border-left: 1px solid var(--dossier-line); }
  .aj-dossier__col:nth-child(odd) { border-left: 0; }
  .aj-dossier__col:nth-child(n+3) { border-top: 1px solid var(--dossier-line); }
  .aj-dossier__years-num { font-size: 72px; }
}

/* light mode */
html[data-theme="light"] .aj-team-dossier {
  --dossier-fg: var(--ink);
  --dossier-mute: var(--muted);
  --dossier-faint: var(--muted-soft);
  --dossier-line: rgba(0,0,0,0.10);
  --dossier-line-strong: rgba(0,0,0,0.22);
  --dossier-bg-hover: rgba(0,0,0,0.025);
  --dossier-bg-active: rgba(124,58,237,0.05);
}
html[data-theme="light"] .aj-dossier__avatar {
  background:
    radial-gradient(120% 120% at 30% 25%,
      hsl(var(--tone, 220) 24% 88%) 0%,
      hsl(var(--tone, 220) 16% 70%) 70%,
      #cfc8d8 100%);
}
html[data-theme="light"] .aj-dossier__initials { color: rgba(0,0,0,0.62); }
html[data-theme="light"] .aj-dossier__bio { color: rgba(0,0,0,0.78); }

/* ── Creative Production Pipeline ─────────────────────────────────────── */
.aj-section--pipeline { padding-top: 64px; padding-bottom: 96px; }
.aj-pipeline-wrap { position: relative; isolation: isolate; }
.aj-pipeline-bg {
  position: absolute; inset: -40px -32px -40px -32px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 12% 30%, rgba(139,92,246,0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 92% 70%, rgba(139,92,246,0.08), transparent 60%);
  border-radius: 24px;
}

.aj-pipeline-head { text-align: center; margin-bottom: 56px; }
.aj-pipeline-head__title { margin: 8px 0 14px; }
.aj-pipeline-head__sub { font-family: var(--font-body); font-size: 14px; color: var(--muted); margin: 0 0 28px; letter-spacing: 0.2px; }

.aj-pipeline-phase { display: inline-flex; align-items: center; gap: 14px; user-select: none; }
.aj-pipeline-phase__lbl { font-family: var(--font-display); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.aj-pipeline-phase__bar {
  position: relative; width: 320px; height: 4px;
  border-radius: 9999px;
  background: rgba(139,92,246,0.18);
  overflow: visible;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.aj-pipeline-phase__bar:focus-visible { box-shadow: 0 0 0 3px rgba(196,181,253,0.4); }
.aj-pipeline-phase__bar.is-dragging .aj-pipeline-phase__fill,
.aj-pipeline-phase__bar.is-dragging .aj-pipeline-phase__dot { transition: none; }
/* extended pointer hit area without affecting visible bar */
.aj-pipeline-phase__bar::after { content: ''; position: absolute; inset: -14px 0; }
.aj-pipeline-phase__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(139,92,246,0.4), rgba(196,181,253,0.95));
  transition: width 280ms var(--ease);
  pointer-events: none;
}
.aj-pipeline-phase__tick {
  position: absolute; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(196,181,253,0.35);
  transform: translate(-50%, -50%);
  transition: background 220ms var(--ease), box-shadow 220ms var(--ease);
  pointer-events: none;
}
.aj-pipeline-phase__tick.is-on {
  background: rgba(196,181,253,0.95);
  box-shadow: 0 0 6px rgba(196,181,253,0.7);
}
.aj-pipeline-phase__dot {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(196,181,253,0.25), 0 0 18px rgba(196,181,253,0.7);
  transition: left 280ms var(--ease);
  pointer-events: none;
}

.aj-pipeline { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; }
.aj-pipeline__step {
  position: relative;
  padding: 22px 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 280ms var(--ease), transform 280ms var(--ease), background 280ms var(--ease);
  will-change: opacity, transform;
}
.aj-pipeline__step { cursor: pointer; }
.aj-pipeline__step:hover {
  border-color: var(--accent-border);
  background: linear-gradient(180deg, rgba(139,92,246,0.10), rgba(139,92,246,0.02));
}
.aj-pipeline__step.is-active {
  border-color: rgba(196,181,253,0.85);
  background: linear-gradient(180deg, rgba(139,92,246,0.18), rgba(139,92,246,0.04));
  box-shadow: 0 10px 28px rgba(139,92,246,0.28), inset 0 0 0 1px rgba(196,181,253,0.35);
  transform: translateY(-2px);
}
.aj-pipeline__step.is-active .aj-pipeline__icon {
  color: #fff;
  background: rgba(139,92,246,0.30);
  border-color: rgba(196,181,253,0.85);
  box-shadow: 0 0 18px rgba(196,181,253,0.45);
}
.aj-pipeline__step.is-active .aj-pipeline__num,
.aj-pipeline__step.is-active .aj-pipeline__name { color: #fff; }
.aj-pipeline__step:focus-visible { outline: none; border-color: var(--accent-bright); }
.aj-pipeline__step + .aj-pipeline__step::before {
  content: '';
  position: absolute;
  top: 50%; left: -18px; width: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,181,253,0.55) 30%, rgba(196,181,253,0.55) 70%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}
.aj-pipeline__step + .aj-pipeline__step::after {
  content: '';
  position: absolute;
  top: 50%; left: -3px;
  width: 6px; height: 6px;
  border-right: 1px solid rgba(196,181,253,0.85);
  border-top: 1px solid rgba(196,181,253,0.85);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.aj-pipeline__icon {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  color: var(--accent-bright);
  background: rgba(139,92,246,0.10);
  border: 1px solid rgba(139,92,246,0.22);
}
.aj-pipeline__num { font-family: var(--font-display); font-size: 22px; color: var(--accent-bright); letter-spacing: 0.5px; }
.aj-pipeline__name { font-family: var(--font-display); font-size: 12px; letter-spacing: 1.4px; color: var(--ink, #fff); text-transform: uppercase; }
.aj-pipeline__desc { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--body); margin-top: 2px; }

/* feedback-loop arcs row */
.aj-pipeline-loops { display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; margin-top: 28px; }
.aj-pipeline-loop { display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(196,181,253,0.55); }
.aj-pipeline-loop__arc { width: 100%; height: 36px; display: block; }
.aj-pipeline-loop__lbl { font-family: var(--font-display); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); text-align: center; }

@media (max-width: 1080px) {
  .aj-pipeline { grid-template-columns: repeat(2, 1fr); }
  .aj-pipeline__step + .aj-pipeline__step::before,
  .aj-pipeline__step + .aj-pipeline__step::after { display: none; }
  .aj-pipeline-loops { display: none; }
  .aj-pipeline-phase__bar { width: 200px; }
}

/* ── CTA Band ─────────────────────────────────────────────────────────── */
.aj-cta-band { background: linear-gradient(135deg, rgba(124,58,237,0.15) 0%, rgba(8,5,10,0) 60%); border: 1px solid var(--hairline-accent); border-radius: 10px; padding: 80px 64px; text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.aj-cta-band__h { font-family: var(--font-display); font-size: 42px; line-height: 1.1; letter-spacing: 0; color: #fff; text-transform: uppercase; margin: 0; }
.aj-cta-band__sub { font-family: var(--font-body); font-size: 15px; color: var(--body); max-width: 540px; line-height: 1.6; margin: 0; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.aj-footer { background: #060408; border-top: 1px solid var(--hairline); padding: 64px 32px 32px; }
.aj-footer__top { max-width: var(--max-width); margin: 0 auto 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.aj-footer__caption { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.aj-footer__grid { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-top: 32px; border-top: 1px solid var(--hairline); }
.aj-footer__col h6 { font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; margin: 0 0 14px; font-weight: 400; }
.aj-footer__col p, .aj-footer__col a { font-family: var(--font-body); font-size: 13px; color: var(--body); line-height: 1.7; text-decoration: none; display: block; margin: 0 0 6px; }
.aj-footer__col a:hover { color: var(--accent-bright); }

/* ── Page head ────────────────────────────────────────────────────────── */
.aj-page-head { max-width: var(--max-width); margin: 0 auto; padding: 96px 32px 32px; text-align: center; }
.aj-page-head__sub { font-family: var(--font-body); font-size: 16px; color: var(--body); max-width: 580px; margin: 24px auto 0; line-height: 1.7; }

/* ── Filters ──────────────────────────────────────────────────────────── */
.aj-filters { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.aj-empty { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 80px 32px; text-align: center; color: var(--muted); border: 1px dashed var(--hairline); border-radius: var(--radius-lg, 10px); max-width: 720px; margin: 0 auto; }
.aj-empty p { margin: 0; font-family: var(--font-display); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--body); }

/* ── Render slide template ────────────────────────────────────────────── */
.aj-render-bar { height: 56px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; background: #000; border-bottom: 1px solid var(--hairline); }
.aj-render-bar__l, .aj-render-bar__r { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
.aj-render-bar__r { color: var(--muted); }
.aj-render-hero { position: relative; height: 70vh; min-height: 480px; overflow: hidden; }
.aj-render-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%, rgba(8,5,10,0.9) 100%); }
.aj-render-hero__title { position: absolute; left: 32px; bottom: 48px; font-family: var(--font-display); font-size: 64px; letter-spacing: -0.5px; text-transform: uppercase; color: #fff; }
.aj-render-slide { width: 100%; aspect-ratio: 16/9; }
.aj-render-slide + .aj-render-slide { margin-top: 24px; }

/* ── Project meta ─────────────────────────────────────────────────────── */
.aj-project-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 880px; margin: 0 auto; padding: 32px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-card); }
.aj-project-meta h6 { font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; margin: 0 0 8px; font-weight: 400; }
.aj-project-meta p { font-family: var(--font-body); font-size: 14px; color: #fff; margin: 0; }

.aj-next-cta { display: flex; justify-content: space-between; align-items: center; max-width: 720px; margin: 0 auto; }

/* ── Contact ──────────────────────────────────────────────────────────── */
.aj-section.aj-contact { padding-top: 48px; }
.aj-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.aj-contact__info .aj-section-label { margin: 0 0 32px; max-width: none; justify-content: flex-start; }
.aj-contact__info .aj-section-label .aj-rule:last-child { display: none; }
.aj-contact__email { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.5px; color: #fff; text-transform: uppercase; margin-bottom: 24px; word-break: break-word; }
.aj-glass-card { background: var(--surface-glass); border: 1px solid var(--surface-glass-border); backdrop-filter: blur(12px); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.aj-glass-card label { display: flex; flex-direction: column; gap: 6px; }
.aj-glass-card label > span { font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; color: var(--ink); text-transform: uppercase; }
.aj-input { background: rgba(255,255,255,0.04); border: 1px solid var(--hairline); color: #fff; font-family: var(--font-body); font-size: 14px; padding: 12px 16px; border-radius: 4px; height: 44px; outline: none; width: 100%; box-sizing: border-box; transition: all 200ms var(--ease); }
textarea.aj-input { height: auto; resize: vertical; min-height: 96px; }
.aj-input::placeholder { color: var(--muted); }
.aj-input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px rgba(139,92,246,0.10); }
.aj-form-sent { text-align: center; padding: 32px 0; }
.aj-form-sent__h { font-family: var(--font-display); font-size: 22px; color: #fff; text-transform: uppercase; margin-bottom: 8px; }

/* responsive trim */
@media (max-width: 720px) {
  .aj-hero__word { font-size: 56px; }
  .aj-hero__tag { display: none; }
  .aj-projects, .aj-services, .aj-process, .aj-team, .aj-footer__grid, .aj-contact, .aj-project-meta { grid-template-columns: 1fr; }
  .aj-h2, .aj-cta-band__h { font-size: 32px; }
  .aj-manifesto p { font-size: 24px; }
}

/* [ADD: Mobile] Adaptive padding + Hero scaling on three standardised
   breakpoints: 1080 (tablet), 720 (mobile-l), 480 (mobile-s).
   Existing `@media (max-width: 880px)` block above continues to handle
   the in-between range — Step 4 will unify everything. */
@media (max-width: 1080px) {
  .aj-section   { padding: 80px 24px; }
  .aj-page-head { padding: 80px 24px 24px; }
  .aj-cta-band  { padding: 72px 48px; }
  .aj-hero      { padding: 48px; }
  .aj-hero__frame { inset: 36px; }
  /* [ADD: Mobile] Project page — slightly tighter render-hero on tablet */
  .aj-render-hero { height: 60vh; min-height: 380px; }
  .aj-render-hero__title { font-size: 48px; }
}
@media (max-width: 720px) {
  .aj-section   { padding: 56px 20px; }
  .aj-page-head { padding: 56px 20px 20px; }
  .aj-cta-band  { padding: 56px 32px; }
  .aj-hero      { padding: 24px; }
  .aj-hero__frame { inset: 18px; border-radius: 18px; }
  .aj-hero__word { font-size: 44px; letter-spacing: -0.5px; }
  .aj-hero__pill { font-size: 15px; padding: 9px 26px; letter-spacing: 4px; }
  .aj-hero__caption { bottom: 36px; font-size: 10px; letter-spacing: 1.5px; }
  .aj-hero__lockup { gap: 14px; }

  /* [ADD: Mobile] Stacks flow naturally on phone — no sticky pin, no
     forced 100vh. Hero keeps 100vh via its own `__inner` rule, so it
     still reads as a hero. Cover-on-scroll transition is dropped here
     (it doesn't add value on small viewports). */
  .aj-stack {
    position: relative;
    min-height: auto;
    display: block;
  }

  /* [ADD: Mobile] Project page chrome */
  .aj-render-bar { padding: 0 20px; height: 48px; }
  .aj-render-bar__l, .aj-render-bar__r { font-size: 10px; letter-spacing: 1.5px; }
  .aj-render-hero { height: 50vh; min-height: 280px; }
  .aj-render-hero__title { font-size: 36px; left: 20px; bottom: 32px; letter-spacing: 0; }
  .aj-project-meta { padding: 20px; gap: 16px; }
  .aj-next-cta { flex-direction: column; gap: 16px; align-items: stretch; }
  .aj-next-cta .aj-btn { width: 100%; }
}
@media (max-width: 480px) {
  .aj-section   { padding: 40px 16px; }
  .aj-page-head { padding: 40px 16px 16px; }
  .aj-cta-band  { padding: 40px 20px; }
  .aj-hero      { padding: 16px; }
  .aj-hero__frame { inset: 12px; border-radius: 14px; }
  .aj-hero__word { font-size: 36px; }
  .aj-hero__pill { font-size: 12px; padding: 7px 20px; letter-spacing: 3px; }
  .aj-hero__caption { bottom: 24px; }
  .aj-hero__lockup { gap: 12px; }
  /* [ADD: Mobile] Project page — tightest paddings, smallest title */
  .aj-render-bar { padding: 0 16px; height: 44px; }
  .aj-render-hero__title { font-size: 28px; left: 16px; bottom: 24px; }
  .aj-project-meta { padding: 16px; }
}

/* [ADD: Mobile] Burger button — hidden on desktop, fades into the
   nav-actions slot on mobile next to ThemeToggle. Three bars morph into
   an X via CSS transforms when drawer is open. */
.aj-nav__burger {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  width: 40px;
  height: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  transition: border-color 200ms var(--ease);
}
.aj-nav__burger:hover { border-color: var(--accent-border); }
.aj-nav__burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 240ms var(--ease), opacity 200ms var(--ease);
}
.aj-nav__burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.aj-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.aj-nav__burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* [ADD: Mobile] Fullscreen drawer — sits below the nav (z 49) so the
   burger inside the nav (z 50 sticky) stays clickable to close. Solid
   canvas bg covers everything underneath. */
.aj-nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--canvas);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 96px 32px 64px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.aj-nav__drawer.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.aj-nav__drawer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}
.aj-nav__drawer-link {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 44px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
  transition: color 200ms var(--ease);
}
.aj-nav__drawer-link:hover,
.aj-nav__drawer-link.is-active {
  color: var(--accent-bright);
}

/* [ADD: Mobile] Mobile nav activates at 1080 — that's where the desktop
   row of 4 links + logo + actions starts to squeeze and the link words
   wrap onto two lines. Switch to burger before the wrap happens. */
@media (max-width: 1080px) {
  .aj-nav__links  { display: none; }
  .aj-nav__brief  { display: none; }
  .aj-nav__burger { display: inline-flex; }
  .aj-nav__drawer { display: flex; }
}