/* =========================================================
   SHAIVY BHATIA — Portfolio
   Dark editorial system. Instrument Serif + DM Sans.
   ========================================================= */

:root {
  /* Palette */
  --bg: #0A0A0A;
  --bg-2: #0d0d0d;
  --surface: #111111;
  --surface-2: #161616;
  --text: #F0EDE6;
  --muted: rgba(240, 237, 230, 0.45);
  --faint: rgba(240, 237, 230, 0.28);
  --accent: #A86FD6;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --line: rgba(240, 237, 230, 0.10);
  --line-strong: rgba(240, 237, 230, 0.18);

  /* Radii */
  --r-card: 16px;
  --r-pill: 100px;

  /* Rhythm */
  --section-gap: 120px;
  --pad-x: clamp(20px, 5vw, 88px);
  --maxw: 1240px;

  /* Type — Bricolage Grotesque for display/headings, DM Sans for body & UI */
  --serif: "Bricolage Grotesque", system-ui, sans-serif;
  --hero-font: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* Faint film-grain / vignette atmosphere */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(168,111,214,0.07), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(168,111,214,0.04), transparent 55%);
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  position: relative;
  z-index: 1;
}

section { position: relative; z-index: 1; }

.section-pad { padding-block: var(--section-gap); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
}

.section-head { margin-bottom: 56px; }
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-top: 18px;
  max-width: 16ch;
}
.section-title em { font-style: italic; color: var(--accent); }

/* ---------- Expanding "cursor" pills ---------- */
.xpill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border: 0.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  color: var(--text);
  cursor: default;
  overflow: hidden;
  transition: border-color .45s var(--ease), color .45s var(--ease), background .45s var(--ease), padding .45s var(--ease);
}
.xpill__ico {
  display: inline-flex;
  color: var(--accent);
  flex: none;
  transition: transform .45s var(--ease);
}
.xpill__ico svg { width: 15px; height: 15px; display: block; }
.xpill__label { white-space: nowrap; }
.xpill__more {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 500;
  overflow: hidden;
  transition: max-width .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease);
}
.xpill__more::before { content: "·\00a0"; color: var(--muted); }
.xpill:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  padding-right: 19px;
}
.xpill:hover .xpill__ico { transform: scale(1.18) rotate(-6deg); }
.xpill:hover .xpill__more { max-width: 220px; opacity: 1; margin-left: 2px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill--dot::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--pad-x) 14px;
  transition: padding .5s var(--ease);
  border-bottom: 0;
}
/* Adaptive shell: full bar at top, confined pill on scroll, re-expands on hover / scroll-up */
.nav__shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 8px 8px 4px;
  border-radius: var(--r-pill);
  border: 0.5px solid transparent;
  background: transparent;
  /* Width is content-driven (max-content) so the pill grows/shrinks by following
     the links' own expansion — no max-content↔length snap, no jerk. */
  transition: padding .6s var(--ease),
    background .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.nav.scrolled .nav__shell {
  max-width: max-content;      /* confined + compact — only as wide as it needs */
  padding: 7px 8px 7px 20px;
  background: rgba(12, 11, 10, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--line);
  box-shadow: 0 14px 38px rgba(0,0,0,0.42);
}
/* Expand again ONLY on hover (never on scroll direction). Stay content-driven
   (max-content) so the shell width tracks the links' transition smoothly. */
.nav.scrolled:hover .nav__shell {
  padding: 8px 8px 8px 16px;
}
/* Center links collapse away in the confined state, return on hover */
.nav.scrolled .nav__links {
  opacity: 0;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
  overflow: hidden;
  transform: translateX(8px) scale(0.98);
  pointer-events: none;
  transition: opacity .4s var(--ease), max-width .7s var(--ease),
    padding .6s var(--ease), transform .6s var(--ease);
}
.nav.scrolled:hover .nav__links {
  opacity: 1;
  max-width: 760px;
  padding: 5px;
  transform: none;
  pointer-events: auto;
  transition: opacity .55s var(--ease) .08s, max-width .7s var(--ease),
    padding .6s var(--ease), transform .6s var(--ease);
}
/* Resume link — always visible (top, compact AND expanded), with an icon */
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__resume {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__resume svg { width: 15px; height: 15px; flex: none; }
.nav__resume:hover { color: var(--text); background: rgba(255,255,255,0.04); }
@media (max-width: 760px){
  .nav.scrolled .nav__shell { max-width: 92%; }
  .nav__resume span { display: none; }
  .nav__resume { padding: 9px 11px; }
}
.nav__logo {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  color: var(--text);
}
.nav__logo-svg { height: 26px; width: auto; display: block; }
.nav__logo span { color: var(--accent); }
.nav__links {
  display: flex;
  gap: 6px;
  background: rgba(255,255,255,0.02);
  border: 0.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px;
}
.nav__links a {
  font-size: 14px;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__links a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav__links a.is-active { color: var(--text); background: rgba(168,111,214,0.16); }
.nav__links a.is-active::after { display: none; }
.nav__links a.nav__ext { display: inline-flex; align-items: center; gap: 5px; }
.nav__links a.nav__ext svg {
  width: 13px; height: 13px; flex: none;
  opacity: 0.6;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__links a.nav__ext:hover svg { transform: translate(2px, -2px); opacity: 1; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 0.5px solid var(--line-strong);
  background: rgba(255,255,255,0.02);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Floating "The gist" FAB */
.gist-fab {
  position: fixed;
  bottom: 26px; right: 26px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 13px 18px;
  border-radius: var(--r-pill);
  border: 0.5px solid var(--line-strong);
  background: rgba(17,17,17,0.78);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 16px 50px rgba(0,0,0,0.5);
  white-space: nowrap;
  transition: border-color .4s var(--ease), transform .35s var(--ease), background .4s var(--ease);
  will-change: transform;
}
.gist-fab:hover { border-color: var(--accent); background: rgba(168,111,214,0.16); }
.gist-fab__dot {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.gist-fab__dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s var(--ease) infinite;
}

.tldr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 16px;
  border-radius: var(--r-pill);
  border: 0.5px solid var(--line-strong);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .25s var(--ease);
  will-change: transform;
}
.tldr-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.tldr-btn__dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.tldr-btn__dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding-top: 154px;
  padding-bottom: 96px;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.hero__greet {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 auto 38px;
  padding: 6px 18px 6px 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 0.5px solid var(--line-strong);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  max-width: 100%;
}
.hero__greet:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong));
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--accent-soft);
}
.hero__greet-av {
  position: relative;
  flex: none;
  width: clamp(38px, 4vw, 46px);
  height: clamp(38px, 4vw, 46px);
}
.hero__greet-av image-slot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 0.5px solid var(--line-strong);
  background: var(--surface);
}
.hero__greet-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 0.5px solid var(--line);
  pointer-events: none;
}
.hero__greet-text {
  font-family: var(--display);
  font-size: clamp(13.5px, 1.2vw, 16px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
}
.hero__greet-text b { font-weight: 700; }
.hero__greet-muted { color: var(--muted); font-weight: 400; }
.hero__greet .wave {
  display: inline-block;
  transform-origin: 70% 70%;
}
.hero__greet .wave { animation: heroWave 1.4s var(--ease) .5s 1 both; }
.hero__greet:hover .wave { animation: heroWaveHover 1.4s var(--ease); }
@keyframes heroWaveHover {
  0%,100% { transform: rotate(0); } 20% { transform: rotate(16deg); }
  40% { transform: rotate(-8deg); } 60% { transform: rotate(12deg); } 80% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .hero__greet .wave, .hero__greet:hover .wave { animation: none; } }
@keyframes heroWave {
  0%,100% { transform: rotate(0); } 20% { transform: rotate(16deg); }
  40% { transform: rotate(-8deg); } 60% { transform: rotate(12deg); } 80% { transform: rotate(-4deg); }
}
@media (max-width: 560px) {
  .hero__greet { gap: 11px; padding: 7px 16px 7px 7px; }
  .hero__greet-text { white-space: normal; font-size: 14.5px; line-height: 1.25; }
}
.hero__main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
}
.hero__sub { margin-inline: auto; }
.hero__pills { justify-content: center; }
.hero__stats { justify-content: center; }
.avail-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--accent);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 6px 14px 6px 12px;
}
.avail-inline__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.hero__eyebrow { margin-bottom: 28px; }
.hero__title {
  font-family: var(--hero-font);
  font-weight: 600;
  font-size: clamp(46px, 7.4vw, 104px);
  line-height: 1.08;
  letter-spacing: -0.032em;
}
.hero__title em {
  font-style: italic;
  color: var(--accent);
  position: relative;
}
.hero__sub {
  margin-top: 30px;
  max-width: 56ch;
  font-size: clamp(16px, 1.15vw, 18.5px);
  color: rgba(240,237,230,0.66);
  line-height: 1.62;
}
.hero__sub b { color: var(--text); font-weight: 600; }

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}

.hero__stats {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 48px;
  padding-top: 36px;
  border-top: 0.5px solid var(--line);
  flex-wrap: wrap;
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat__num span { color: var(--accent); }
.stat__label {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Avatar frame */
.hero__aside {
  display: flex;
  justify-content: center;
}
.avatar-parallax {
  width: min(360px, 86%);
  display: flex;
  justify-content: center;
  will-change: transform;
}
.avatar-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: rotate(-5deg);
  transition: transform .7s var(--ease);
  will-change: transform;
}
.avatar-frame:hover { transform: rotate(0deg); }
.avatar-frame image-slot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 0.5px solid var(--line-strong);
  background: var(--surface);
}
.avatar-frame__ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 0.5px solid var(--line);
  pointer-events: none;
}
.avatar-frame__ring::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 0.5px dashed rgba(240,237,230,0.08);
}
.avail-badge {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 40px rgba(168,111,214,0.4);
}
.avail-badge .spark { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Hand-drawn scribble annotations ---------- */
.avatar-stage { position: relative; width: 100%; }
.avatar-spark {
  position: absolute;
  top: -6px; right: 2px;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--accent);
  z-index: 4;
  animation: floaty 5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(14deg); }
}
.scribble {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.scribble__note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) rotate(-4deg);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.scribble__note .accent { color: var(--accent); font-style: normal; }
.scribble--top { top: -40px; left: -44px; }
.scribble--bottom { bottom: -34px; right: -40px; flex-direction: row-reverse; }
.scribble--bottom .scribble__note { transform: translateY(6px) rotate(3deg); }
.scribble__arrow { width: 78px; height: 64px; overflow: visible; flex: none; }
.scribble__arrow path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hero__aside.in .scribble__arrow path { animation: drawScribble 1s var(--ease) forwards; }
.hero__aside.in .scribble--top .scribble__arrow path { animation-delay: .5s; }
.hero__aside.in .scribble--bottom .scribble__arrow path { animation-delay: .85s; }
.hero__aside.in .scribble--top .scribble__note { opacity: 1; transform: rotate(-5deg); transition-delay: .35s; }
.hero__aside.in .scribble--bottom .scribble__note { opacity: 1; transform: rotate(3deg); transition-delay: .7s; }
@keyframes drawScribble { to { stroke-dashoffset: 0; } }

@media (max-width: 1080px) {
  .scribble, .avatar-spark { display: none; }
}

/* =========================================================
   CASE STUDIES
   ========================================================= */
.cases__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  transition: transform .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease);
  will-change: transform;
}
.case-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.case-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #161616, #0e0e0e);
}
.case-card__cover image-slot {
  width: 100%; height: 100%;
  transition: transform .7s var(--ease);
}
.case-card:hover .case-card__cover image-slot { transform: scale(1.04); }
.case-card__read {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: var(--r-pill);
  background: rgba(8,8,8,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(243,239,231,0.22);
  font-family: var(--display);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  color: #f3efe7;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.case-card__read svg { width: 13px; height: 13px; color: var(--accent); }
.case-card:hover .case-card__read { opacity: 1; transform: translateY(0); }
.case-card__num {
  position: absolute;
  top: 16px; left: 18px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.04em;
  z-index: 2;
}
.case-card__body { padding: 26px 28px 30px; }
.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.tag {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  white-space: nowrap;
}
.case-card__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.14;
  letter-spacing: -0.025em;
}
.case-card__desc {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  max-width: 40ch;
}
.case-card__link {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.case-card__link .arr {
  display: inline-flex;
  transition: transform .4s var(--ease), color .4s var(--ease);
  color: var(--muted);
}
.case-card:hover .case-card__link .arr { transform: translateX(6px); color: var(--accent); }

/* =========================================================
   AI EXPERIMENTATION
   ========================================================= */
.exp__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-bottom: 48px; }
.exp__intro { max-width: 46ch; color: var(--muted); font-size: 16px; }
.exp__scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 31vw, 380px);
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.exp__scroller::-webkit-scrollbar { display: none; }
.exp-card {
  scroll-snap-align: start;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.exp-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.exp-card__thumb {
  aspect-ratio: 4 / 3;
  position: relative;
}
.exp-card__thumb image-slot { width: 100%; height: 100%; }
.exp-card__meta { padding: 20px 22px 24px; }
.exp-card__kicker {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: 10px;
}
.exp-card__title { font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.18; letter-spacing: -0.02em; }
.exp-card__note { margin-top: 9px; font-size: 14px; color: var(--muted); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.quote-card {
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.quote-card:hover { border-color: var(--line-strong); transform: translateY(-9px) scale(1.012); box-shadow: 0 28px 64px rgba(0,0,0,0.42); background: var(--surface-2); }
.quote-card__mark {
  font-family: var(--serif);
  font-size: 60px;
  line-height: 0.5;
  color: var(--accent);
  height: 26px;
}
.quote-card__text {
  font-family: var(--sans);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 22px 0 32px;
}
.quote-card__person { display: flex; align-items: center; gap: 13px; }
.quote-card__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #b8431a);
  flex: none;
  display: grid; place-items: center;
  font-weight: 600; font-size: 15px; color: #fff;
}
.quote-card__name { font-size: 15px; font-weight: 600; }
.quote-card__role { font-size: 13px; color: var(--muted); }

/* =========================================================
   SKILLS & TOOLS
   ========================================================= */
.skills__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.skills__col { padding: 40px 42px; }
.skills__col + .skills__col { border-left: 0.5px solid var(--line); }
.skills__label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 26px;
}
.skills__set { display: flex; flex-wrap: wrap; gap: 10px; }
.tool-tag {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 9px 16px 9px 14px;
  font-size: 14px;
  white-space: nowrap;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.tool-tag:hover { border-color: var(--accent); }
.tool-tag__logo {
  height: 16px; width: auto; flex: none; display: block;
}
.tool-tag .dot {
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent); opacity: .85;
}

/* =========================================================
   MOTION TEASER
   ========================================================= */
.motion__head { display:flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-bottom: 46px; }
.motion__strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 620px;
  margin-inline: auto;
}
.motion-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: none;
  cursor: pointer;
  transition: transform .55s var(--ease);
}
.motion-card:nth-child(1) { aspect-ratio: 772 / 1622; }
.motion-card:nth-child(2) { aspect-ratio: 772 / 1622; }
.motion-card:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 960 / 720; }
.motion-card:hover { transform: translateY(-5px); }
.motion-card image-slot { width: 100%; height: 100%; }
.motion-card__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 2; pointer-events: none;
}
.play-orb {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  box-shadow: 0 14px 40px rgba(168,111,214,0.45);
  transition: transform .5s var(--ease);
}
.motion-card:hover .play-orb { transform: scale(1.12); }
.play-orb svg { margin-left: 3px; }
/* (motion-card label pills removed) */

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  border-top: 0.5px solid var(--line);
  padding-block: 72px 40px;
  margin-top: var(--section-gap);
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}
.footer__name { font-family: var(--serif); font-size: 30px; }
.footer__name + p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.footer__nav { display: flex; gap: 28px; justify-content: center; }
.footer__nav a { font-size: 14px; color: var(--muted); transition: color .3s var(--ease); }
.footer__nav a:hover { color: var(--text); }
.footer__social { display: flex; justify-content: flex-end; }
.social-link {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: 14px;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.social-link:hover { border-color: var(--accent); color: var(--accent); }
.footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 0.5px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 13px; color: var(--faint);
  flex-wrap: wrap;
}

/* =========================================================
   TL;DR POPUP
   ========================================================= */
.tldr-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(6,6,6,0.62);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.tldr-overlay.open { opacity: 1; visibility: visible; }
.tldr-modal {
  width: min(880px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: linear-gradient(180deg, #131313, #0e0e0e);
  border: 0.5px solid var(--line-strong);
  border-radius: 24px;
  padding: 36px 38px 34px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.tldr-overlay.open .tldr-modal { transform: none; opacity: 1; }
.tldr-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.tldr-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}
.tldr-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tldr-close {
  width: 34px; height: 34px; border-radius: 50%;
  border: 0.5px solid var(--line-strong);
  background: transparent; color: var(--muted);
  cursor: pointer; font-size: 16px;
  display: grid; place-items: center;
  transition: border-color .3s, color .3s;
}
.tldr-close:hover { border-color: var(--accent); color: var(--text); }
.tldr-modal__title {
  font-family: var(--serif);
  font-size: 30px; line-height: 1.1;
  margin-bottom: 18px;
}
.tldr-modal__title em { font-style: italic; color: var(--accent); }
.tldr-line {
  font-size: 16px; line-height: 1.62;
  color: rgba(240,237,230,0.78);
  opacity: 0;
  transform: translateY(8px);
}
.tldr-line + .tldr-line { margin-top: 14px; }
.tldr-line.show { animation: lineIn .6s var(--ease) forwards; }
@keyframes lineIn { to { opacity: 1; transform: none; } }
.tldr-line b { color: var(--text); font-weight: 600; }
.tldr-line .hl { color: var(--accent); font-weight: 600; }

/* ---- Quick-intro visual map ---- */
.qi-intro .tldr-modal__title { margin-bottom: 10px; }
.qi-sub {
  font-size: 15px; line-height: 1.55;
  color: rgba(240,237,230,0.7);
  max-width: 56ch;
}
.qi-map {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: clamp(6px, 1.6vw, 18px);
  row-gap: 18px;
  margin-top: 32px;
}
.qi-center { grid-column: 2; grid-row: 1 / span 2; justify-self: center; text-align: center; }
.qi-note--a { grid-column: 1; grid-row: 1; justify-self: end; }
.qi-note--b { grid-column: 3; grid-row: 1; justify-self: start; }
.qi-note--c { grid-column: 1; grid-row: 2; justify-self: end; }
.qi-note--d { grid-column: 3; grid-row: 2; justify-self: start; }
.qi-note--e { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
.qi-map .tldr-line + .tldr-line { margin-top: 0; }
.qi-map .tldr-line { font-size: inherit; color: inherit; }

.qi-photo {
  position: relative;
  width: clamp(118px, 13vw, 152px);
  height: clamp(118px, 13vw, 152px);
  margin: 0 auto 14px;
  border-radius: 50%;
  padding: 5px;
  background: conic-gradient(from 200deg, var(--accent), #6F6BFF, #17B890, var(--accent));
}
.qi-photo image-slot { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: block; }
.qi-photo__spark { position: absolute; top: -4px; right: 2px; color: var(--accent); font-size: 18px; z-index: 3; }
.qi-center__name { font-family: var(--serif); font-size: 19px; color: var(--text); }
.qi-center__role { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.qi-note { display: flex; align-items: center; gap: 6px; }
.qi-note--a { transform: rotate(-1.2deg); }
.qi-note--b { transform: rotate(1.2deg); }
.qi-note--c { transform: rotate(1deg); }
.qi-note--d { transform: rotate(-1deg); }
.qi-note--e { flex-direction: column; gap: 5px; text-align: center; transform: rotate(-0.6deg); margin-top: 4px; }

.qi-note__card {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  max-width: 248px;
  padding: 12px 15px;
  background: rgba(255,255,255,0.035);
  border: 0.5px solid var(--line-strong);
  border-radius: 14px;
}
.qi-note__ic {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px;
}
.qi-note__body { display: flex; flex-direction: column; gap: 2px; }
.qi-note__body b { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.qi-note__body small { font-size: 11.5px; color: rgba(240,237,230,0.6); line-height: 1.35; }

.qi-note__card--live { flex-direction: column; align-items: center; gap: 5px; max-width: 300px; text-align: center; }
.qi-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.qi-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #17e08a; box-shadow: 0 0 0 4px rgba(23,224,138,0.18); }
.qi-note__card--live small { font-size: 11.5px; color: rgba(240,237,230,0.6); }

.qi-arrow { width: 44px; height: auto; flex: none; }
.qi-arrow path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.82; }
.qi-arrow--flip { transform: scaleX(-1); }
.qi-arrow--up { width: 22px; }

@media (max-width: 720px) {
  .qi-map { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .qi-note { flex-direction: column; gap: 6px; transform: none; }
  .qi-arrow { display: none; }
  .qi-note__card { max-width: 340px; }
}

.qi-simple { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 480px; margin: 0 auto; }
.qi-simple__photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: conic-gradient(from 200deg, var(--accent), #6F6BFF, #17B890, var(--accent)); padding: 2px; }
.qi-simple__photo image-slot { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: block; }
.qi-simple__name { font-family: var(--serif); font-size: 20px; color: var(--text); margin-top: 4px; }
.qi-simple__role { font-size: 13px; color: var(--muted); }
.qi-simple__pitch { font-size: 15.5px; line-height: 1.6; color: rgba(240,237,230,0.82); margin: 6px 0 4px; }
.qi-simple__stats { display: flex; gap: 28px; padding: 16px 0; border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); width: 100%; justify-content: center; }
.qi-stat { display: flex; flex-direction: column; gap: 3px; }
.qi-stat b { font-size: 22px; font-weight: 700; color: var(--text); }
.qi-stat span { font-size: 12px; color: var(--muted); }
.qi-simple__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); margin-top: 6px; }

.tldr-modal__foot {
  margin-top: 28px; padding-top: 22px;
  border-top: 0.5px solid var(--line);
  display: flex; gap: 12px; flex-wrap: wrap;
}
.tldr-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: var(--r-pill);
  white-space: nowrap;
  font-size: 14px; font-weight: 500; cursor: pointer;
  border: 0.5px solid transparent;
}
.tldr-cta--primary { background: var(--accent); color: #fff; }
.tldr-cta--primary:hover { filter: brightness(1.08); }
.tldr-cta--ghost { border-color: var(--line-strong); color: var(--text); }
.tldr-cta--ghost:hover { border-color: var(--accent); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px) scale(0.974); }
.reveal.in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.05s var(--ease); }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(22px) scale(0.974); }
[data-reveal-stagger].in > * { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .95s var(--ease); }

/* =========================================================
   TWEAK VARIANTS
   ========================================================= */
/* Hero layout */
[data-hero="left"] .hero__grid { grid-template-columns: 0.9fr 1.35fr; }
[data-hero="left"] .hero__aside { order: -1; }
[data-hero="text"] .hero__grid { grid-template-columns: 1fr; max-width: 900px; }
[data-hero="text"] .hero__aside { display: none; }
[data-hero="text"] .hero__sub { max-width: 60ch; }

/* Centered, stacked hero */
[data-hero="center"] .hero { padding-top: 150px; padding-bottom: 80px; }
[data-hero="center"] .hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  max-width: 840px;
  margin-inline: auto;
}
[data-hero="center"] .hero__aside { order: -1; margin-bottom: 30px; }
[data-hero="center"] .avatar-parallax { width: min(208px, 56vw); }
[data-hero="center"] .avatar-frame { transform: rotate(-4deg); }
[data-hero="center"] .hero__main { display: flex; flex-direction: column; align-items: center; }
[data-hero="center"] .hero__eyebrow { justify-content: center; }
[data-hero="center"] .hero__title { max-width: 18ch; }
[data-hero="center"] .hero__sub { margin-inline: auto; max-width: 56ch; }
[data-hero="center"] .hero__pills { justify-content: center; }
[data-hero="center"] .hero__stats { justify-content: center; width: 100%; max-width: 560px; }
/* keep one scribble, reposition so it flanks the centered avatar */
[data-hero="center"] .scribble--bottom { display: none; }
[data-hero="center"] .scribble--top { top: 38%; left: -116px; }
[data-hero="center"] .avatar-spark { top: -12px; right: -10px; }

/* Case card style */
[data-cards="minimal"] .case-card__cover { display: none; }
[data-cards="minimal"] .case-card__body { padding: 34px 30px 34px; }
[data-cards="minimal"] .case-card { min-height: 220px; justify-content: space-between; }
[data-cards="minimal"] .case-card__num {
  position: static; display: block; margin-bottom: 14px;
}

/* Motion off — kill long transitions/animations */
[data-motion="off"] * { animation: none !important; }
[data-motion="off"] .tldr-btn__dot::after { display: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__aside { order: -1; }
  .avatar-frame { width: min(300px, 70%); }
  .cases__grid, .quotes__grid, .motion__strip { grid-template-columns: 1fr; }
  .skills__grid { grid-template-columns: 1fr; }
  .skills__col + .skills__col { border-left: none; border-top: 0.5px solid var(--line); }
  .footer__top { grid-template-columns: 1fr; text-align: left; gap: 28px; }
  .footer__nav { justify-content: flex-start; }
  .footer__social { justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --section-gap: 84px; }
  .quotes__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   v10 ADDITIONS — micro-credentials, marquee, richer cards,
   process, currently, contact CTA, structured TL;DR
   ========================================================= */

/* ---- Hero micro-credentials ---- */
.hero__creds {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 0.5px solid var(--line);
  width: 100%;
  max-width: 520px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.62);
  font-weight: 500;
}
.hero__creds-sep { color: var(--accent); }

/* ---- Hero scroll-down indicator ---- */
.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin: 56px auto 0;
  width: max-content;
  color: var(--muted);
  transition: color .4s var(--ease);
}
.hero__scroll-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero__scroll-arrow {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 0.5px solid var(--line-strong);
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.hero__scroll-arrow svg { width: 17px; height: 17px; animation: scrollNudge 1.8s var(--ease) infinite; }
.hero__scroll:hover { color: var(--accent); }
.hero__scroll:hover .hero__scroll-arrow { border-color: var(--accent); background: var(--accent-soft); transform: translateY(2px); }
@keyframes scrollNudge { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
[data-motion="off"] .hero__scroll-arrow svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero__scroll-arrow svg { animation: none; } }

/* ---- Hero keyword marquee ---- */
.hero-marquee {
  margin-top: 70px;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-marquee__track {
  display: inline-flex;
  animation: marquee 38s linear infinite;
}
.hero-marquee:hover .hero-marquee__track { animation-play-state: paused; }
.hero-marquee__item {
  display: inline-flex;
  align-items: center;
  padding: 20px 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  color: rgba(240,237,230,0.4);
  white-space: nowrap;
}
.hero-marquee__item .sep { color: var(--accent); font-style: normal; padding: 0 22px; font-size: 0.6em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[data-motion="off"] .hero-marquee__track { animation: none; }

/* ---- Case card extras ---- */
.case-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid var(--line);
}
.case-card__role { font-size: 13px; color: var(--muted); }
.case-card__impact {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.case-card__link {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color .4s var(--ease), gap .4s var(--ease);
}
.case-card:hover .case-card__link { color: var(--text); gap: 12px; }
.case-card__link .arr { color: var(--accent); transition: transform .4s var(--ease); }
.case-card:hover .case-card__link .arr { transform: translateX(4px); }

/* ---- How I think / Process ---- */
.process { padding-block: var(--section-gap); }
.process__head { margin-bottom: 48px; }
.process__flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
}
.process__step {
  padding: 30px 28px 34px;
  position: relative;
}
.process__step + .process__step { border-left: 0.5px solid var(--line); }
.process__step-no {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.process__step-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 14px 0 10px;
}
.process__step-note { font-size: 14px; color: var(--muted); line-height: 1.5; }
.process__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.process__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  max-width: 24ch;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: gap .4s var(--ease);
}
.text-link .arr { color: var(--accent); transition: transform .4s var(--ease); }
.text-link:hover { gap: 13px; }
.text-link:hover .arr { transform: translateX(4px); }

/* ---- Experiment feature card + badge ---- */
.exp-card--feature { border-color: var(--line-strong); }
.exp-card__thumb { position: relative; }
.exp-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  box-shadow: 0 10px 30px rgba(168,111,214,0.4);
}

/* ---- Currently ---- */
.currently-sec { padding-block: 56px; }
.currently {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  padding-block: 40px;
}
.currently__item { display: flex; flex-direction: column; gap: 10px; }
.currently__art {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 6px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--surface-2);
  border: 0.5px solid var(--line);
}
.currently__art image-slot { width: 100%; height: 100%; display: block; }
.currently__k {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.currently__v { font-size: 15.5px; color: rgba(240,237,230,0.72); line-height: 1.5; max-width: 32ch; }

/* ---- Contact CTA ---- */
.contact-sec { padding-block: var(--section-gap); }
.contact__inner {
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-left: 2.5px solid var(--accent);
  border-radius: var(--r-card);
  padding: clamp(40px, 6vw, 76px);
}
.contact__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.contact__title em { font-style: italic; color: var(--accent); }
.contact__sub {
  margin-top: 22px;
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--muted);
  max-width: 46ch;
}
.contact__actions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  border: 0.5px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
  will-change: transform;
}
.btn .arr { transition: transform .4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.footer__updated { color: var(--faint); }

/* ---- Structured TL;DR rows ---- */
.tldr-rows { display: flex; flex-direction: column; }
.tldr-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
}
.tldr-row + .tldr-row { border-top: 0.5px solid var(--line); }
.tldr-row__k {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}
.tldr-row__v { font-size: 15.5px; line-height: 1.5; color: rgba(240,237,230,0.82); }
.tldr-row__v .hl { color: var(--accent); font-weight: 600; }
.tldr-row__v b { color: var(--text); font-weight: 600; }

/* ---- Responsive for v10 ---- */
@media (max-width: 1000px) {
  .process__flow { grid-template-columns: 1fr 1fr; }
  .process__step:nth-child(3) { border-left: none; }
  .process__step:nth-child(n+3) { border-top: 0.5px solid var(--line); }
  .currently { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
  .process__flow { grid-template-columns: 1fr; }
  .process__step + .process__step { border-left: none; border-top: 0.5px solid var(--line); }
  .hero__creds { flex-wrap: wrap; gap: 10px 14px; }
  .contact__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================
   v11 — animated gradient background, blob photo,
   tooltip pills (fixes centred-flex hover flicker)
   ========================================================= */

/* ---- Drifting gradient blobs + grain ---- */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-blobs { position: absolute; inset: -10%; filter: blur(85px); }
.blob { position: absolute; display: block; border-radius: 50%; opacity: 0.5; will-change: transform; }
.blob--1 {
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  top: -12%; left: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(168,111,214,0.55), transparent 68%);
  animation: drift1 28s ease-in-out infinite;
}
.blob--2 {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  top: 28%; right: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(226,162,59,0.32), transparent 70%);
  animation: drift2 34s ease-in-out infinite;
}
.blob--3 {
  width: 42vw; height: 42vw; max-width: 560px; max-height: 560px;
  bottom: -14%; left: 18%;
  background: radial-gradient(circle at 50% 50%, rgba(184,67,26,0.4), transparent 70%);
  animation: drift3 31s ease-in-out infinite;
}
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,52px) scale(1.18); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,40px) scale(1.12); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-60px) scale(1.22); } }

.bg-grain {
  position: absolute; inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* dim the older static vignette so the live blobs lead */
body::before { opacity: 0.5; }

/* ---- Morphing blob hero photo ---- */
.hero__photo { width: clamp(184px, 22vw, 236px); margin-bottom: 38px; }
.hero__photo:hover { transform: scale(1.03); }
.hero__photo image-slot {
  border-radius: 42% 58% 60% 40% / 46% 42% 58% 54% !important;
  border-color: rgba(168,111,214,0.32) !important;
  animation: blobMorph 16s ease-in-out infinite;
}
.hero__photo-ring {
  inset: -15px;
  border-radius: 42% 58% 60% 40% / 46% 42% 58% 54%;
  border-color: rgba(240,237,230,0.12);
  animation: blobMorph 16s ease-in-out infinite reverse;
}
.hero__photo-ring::before { display: none; }
.hero__photo-spark {
  position: absolute;
  top: -4px; right: 4px;
  z-index: 3;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--accent);
  animation: floaty 5s var(--ease) infinite;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 42% 58% 60% 40% / 46% 42% 58% 54%; }
  33% { border-radius: 58% 42% 38% 62% / 56% 58% 42% 44%; }
  66% { border-radius: 44% 56% 64% 36% / 38% 54% 46% 62%; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(12deg); }
}

/* ---- Pills: tooltip reveal (no layout shift → no hover flicker) ---- */
.xpill { overflow: visible; position: relative; }
.xpill:hover { padding-right: 17px; }
.xpill__more {
  position: absolute;
  left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px) scale(0.96);
  transform-origin: bottom center;
  max-width: none; margin: 0;
  white-space: nowrap;
  background: var(--surface-2);
  border: 0.5px solid var(--line-strong);
  color: var(--text);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  transition: opacity 0.28s ease, transform 0.32s var(--ease);
  z-index: 40;
}
.xpill__more::before {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--surface-2);
}
.xpill:hover .xpill__more {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  margin: 0;
}

/* ---- Contact CTA: drifting warm glow ---- */
.contact__inner { position: relative; overflow: hidden; }
.contact__inner::before {
  content: "";
  position: absolute;
  width: 60%; height: 160%;
  top: -30%; right: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(168,111,214,0.16), transparent 70%);
  filter: blur(20px);
  animation: drift2 26s ease-in-out infinite;
  pointer-events: none;
}
.contact__inner > * { position: relative; z-index: 1; }

/* ---- Motion off / reduced-motion ---- */
[data-motion="off"] .blob,
[data-motion="off"] .hero__photo image-slot,
[data-motion="off"] .hero__photo-ring,
[data-motion="off"] .hero__photo-spark,
[data-motion="off"] .contact__inner::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .blob, .hero__photo image-slot, .hero__photo-ring, .hero__photo-spark,
  .contact__inner::before, .hero-marquee__track { animation: none !important; }
}

/* =========================================================
   v12 — reference-led hero: circle photo, cursor chips,
   sans headline, button row, sans ticker, bold gist button
   ========================================================= */

/* ---- Photo back to a clean circle (keep spark) ---- */
.hero__photo { width: clamp(150px, 17vw, 188px); }
.hero__photo image-slot {
  border-radius: 50% !important;
  animation: none !important;
}
.hero__photo-ring { border-radius: 50% !important; animation: none !important; }

/* ---- Sans headline + drawn underline + cursor chips ---- */
.hero__headline-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-top: 6px;
}
.hero__title em { font-style: italic; color: var(--accent); }
.hero__underline {
  position: absolute;
  left: 50%; bottom: -10px;
  transform: translateX(-50%);
  width: min(210px, 32%);
  height: auto;
  opacity: 0;
  transition: opacity .5s var(--ease) .35s;
}
.hero__underline path { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero__headline-wrap.in .hero__underline { opacity: 1; }
.hero__headline-wrap.in .hero__underline path { animation: drawU 1s var(--ease) .45s forwards; }
@keyframes drawU { to { stroke-dashoffset: 0; } }

.cursor-chip {
  position: absolute;
  display: inline-flex;
  align-items: flex-start;
  gap: 1px;
  z-index: 6;
  pointer-events: none;
  transform: rotate(var(--r, 0deg));
  animation: chipFloat 6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.cursor-chip__cur { width: 15px; height: 15px; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.cursor-chip__tag {
  font-family: var(--sans);
  font-size: clamp(11px, 0.95vw, 13.5px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #0A0A0A;
  padding: 5px 12px;
  border-radius: 3px 13px 13px 13px;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.cursor-chip--coral .cursor-chip__cur { color: #A86FD6; }
.cursor-chip--coral .cursor-chip__tag { background: #A86FD6; color: #fff; }
.cursor-chip--blue .cursor-chip__cur { color: #5A8BF5; }
.cursor-chip--blue .cursor-chip__tag { background: #5A8BF5; color: #06122E; }
.cursor-chip--tan .cursor-chip__cur { color: #D6B679; }
.cursor-chip--tan .cursor-chip__tag { background: #D6B679; }
.cursor-chip--green .cursor-chip__cur { color: #A8C686; }
.cursor-chip--green .cursor-chip__tag { background: #A8C686; }
/* left-side chips (a, c): pointer rests on the top-right of the tag */
.chip-a .cursor-chip__cur, .chip-c .cursor-chip__cur { transform: scaleX(-1); margin: -8px -3px 0 0; }
.chip-a .cursor-chip__tag, .chip-c .cursor-chip__tag { border-radius: 13px 3px 13px 13px; }
/* right-side chips (b, d): pointer rests on the top-left of the tag */
.chip-b .cursor-chip__cur, .chip-d .cursor-chip__cur { margin: -8px 0 0 -3px; }
.chip-b .cursor-chip__tag, .chip-d .cursor-chip__tag { border-radius: 3px 13px 13px 13px; }
/* placements around the headline */
.chip-a { top: -4%;  left: -3%;  --r: -8deg;  --delay: 0s; }
.chip-b { top: 24%;  right: -6%; --r: 7deg;   --delay: .8s; }
.chip-c { top: 76%;  left: 3%;   --r: -5deg;  --delay: 1.4s; }
.chip-d { top: 92%;  right: 1%;  --r: 5deg;   --delay: 2.1s; }
@keyframes chipFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-7px) rotate(var(--r, 0deg)); }
}

/* ---- Hero button row ---- */
.hero__actions {
  display: flex;
  gap: 13px;
  margin-top: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.hero__actions .btn { padding: 15px 28px; font-size: 15.5px; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 8px 14px 14px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.status-chip__dot {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
}
.status-chip__dot::after {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s var(--ease) infinite;
}

/* ---- Ticker → sans uppercase tracked ---- */
.hero-marquee__item {
  font-family: var(--sans) !important;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 600;
  color: rgba(240,237,230,0.42);
  padding: 18px 0;
}
.hero-marquee__item .sep { font-size: 0.85em; padding: 0 26px; }

/* ---- Gist button: solid coral, prominent ---- */
.gist-fab {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  padding: 18px 30px 18px 25px;
  font-size: 16.5px;
  box-shadow: 0 18px 50px rgba(168,111,214,0.5);
}
.gist-fab:hover { background: var(--accent); filter: brightness(1.08); border-color: transparent; }
.gist-fab__dot { background: #fff; }
.gist-fab__dot::after { background: #fff; }
.gist-fab__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  color: #fff;
  flex: none;
  animation: gistSpark 2.6s var(--ease) infinite;
}
.gist-fab__ico svg { width: 100%; height: 100%; display: block; }
@keyframes gistSpark {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.18) rotate(20deg); opacity: 0.85; }
}
[data-motion="off"] .gist-fab__ico { animation: none; }
@media (prefers-reduced-motion: reduce) { .gist-fab__ico { animation: none; } }

/* ---- Motion off / reduced-motion (chips, underline) ---- */
[data-motion="off"] .cursor-chip { animation: none !important; }
[data-motion="off"] .hero__underline { transition: none; opacity: 1; }
[data-motion="off"] .hero__underline path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .cursor-chip { animation: none !important; }
}

/* ---- Responsive: tuck chips in / hide on small ---- */
@media (max-width: 900px) {
  .cursor-chip { display: none; }
}

/* =========================================================
   v14 — bg dot-grid, serif "intention", hover tooltips,
   nicer quote mark, waving eyebrow
   ========================================================= */

/* ---- Subtle canvas dot grid ---- */
.bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(240,237,230,0.10) 1px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, rgba(0,0,0,0.55) 55%, transparent 85%);
          mask-image: radial-gradient(circle at 50% 38%, #000 0%, rgba(0,0,0,0.55) 55%, transparent 85%);
  opacity: 0.7;
  pointer-events: none;
}

/* ---- Interactive 3D dot spotlight (follows cursor, small lens) ---- */
.bg-dotspot,
.bg-dothot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  --mx: 50%;
  --my: 50%;
  --spot: 132px;
  transition: opacity .4s var(--ease);
}
body.dots-live .bg-dotspot { opacity: 1; }
body.dots-live .bg-dothot { opacity: 0.5; }

/* very soft pink lens */
.bg-dotspot {
  background: radial-gradient(circle var(--spot) at var(--mx) var(--my),
    color-mix(in srgb, var(--accent) 8%, transparent) 0%,
    color-mix(in srgb, var(--accent) 3%, transparent) 44%,
    transparent 70%);
  will-change: background;
}

/* subtle pink particles — sparse, dim, gently glowing */
.bg-dothot {
  background-image: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--accent) 88%, #fff) 0.5px,
    color-mix(in srgb, var(--accent) 60%, transparent) 1.1px,
    transparent 1.7px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle var(--spot) at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,0.55) 40%, transparent 72%);
          mask-image: radial-gradient(circle var(--spot) at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,0.55) 40%, transparent 72%);
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 45%, transparent));
  will-change: background-position, -webkit-mask-image, mask-image;
}
@media (pointer: coarse) {
  .bg-dotspot, .bg-dothot { display: none; }
}
[data-motion="off"] .bg-dotspot,
[data-motion="off"] .bg-dothot { display: none; }

/* ---- "intention" back to serif italic accent ---- */
.hero__title em.hword--intention {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0;
}

/* ---- Hover-reveal word tooltips ---- */
.hword {
  position: relative;
  display: inline-block;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='15' fill='%23A86FD6'/%3E%3Ccircle cx='17' cy='17' r='15.5' fill='none' stroke='%23fff' stroke-opacity='0.85' stroke-width='1.4'/%3E%3Cpath d='M17 8l1.9 5.6c.27.8.92 1.46 1.72 1.72L26 17l-5.6 1.9c-.8.27-1.46.92-1.72 1.72L17 26l-1.9-5.6c-.27-.8-.92-1.46-1.72-1.72L8 17l5.6-1.9c.8-.27 1.46-.92 1.72-1.72L17 8z' fill='%23fff'/%3E%3C/svg%3E") 17 17, pointer;
  text-decoration: none;
  transition: color .3s var(--ease), transform .35s var(--ease);
}
.hword--impact {
  color: var(--accent);
  transition: color .3s var(--ease), transform .35s var(--ease);
}
.hword:hover,
.hword--impact:hover { color: var(--accent); }
.hword:hover { transform: translateX(7px); }
.hero__greet-av[data-tip] { position: relative; cursor: pointer; }
.hero__greet-av[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-38%) rotate(-2deg) translateY(8px);
  width: max-content;
  max-width: 240px;
  white-space: normal;
  text-align: left;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s var(--ease);
  z-index: 60;
}
.hero__greet-av[data-tip]:hover::after { opacity: 1; transform: translateX(-38%) rotate(-2deg) translateY(0); }
.toolc[data-tip] { position: relative; cursor: help; }
.toolc[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 14px);
  transform: translateX(-50%) translateY(8px);
  width: max-content;
  max-width: 260px;
  white-space: normal;
  text-align: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface-2);
  border: 0.5px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px 14px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 16px 36px rgba(0,0,0,0.5);
  transition: opacity 0.25s ease, transform 0.28s var(--ease);
  z-index: 60;
}
.toolc[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.hword::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 16px);
  transform: translateX(-50%) translateY(8px);
  width: max-content;
  max-width: 320px;
  white-space: normal;
  text-align: center;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text);
  background: var(--surface-2);
  border: 0.5px solid var(--line-strong);
  border-radius: 13px;
  padding: 12px 16px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  transition: opacity 0.28s ease, transform 0.32s var(--ease);
  z-index: 60;
}
.hword::before {
  content: "";
  position: absolute;
  left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(8px);
  border: 7px solid transparent;
  border-top-color: var(--surface-2);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.32s var(--ease);
  z-index: 61;
}
.hword:hover::after,
.hword:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.hword:hover::before,
.hword:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Waving hand in eyebrow ---- */
.eyebrow .wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: wave 2.6s var(--ease) infinite;
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(14deg); }
  20%, 40% { transform: rotate(-8deg); }
}

/* ---- Nicer quote mark ---- */
.quote-card__mark { height: auto; line-height: 1; color: var(--accent); }
.quote-card__mark svg { width: 30px; height: auto; display: block; opacity: 0.9; }

[data-motion="off"] .eyebrow .wave { animation: none; }
@media (prefers-reduced-motion: reduce) { .eyebrow .wave { animation: none; } }

/* =========================================================
   v19 — wave visibility, photo availability badge,
   "why hire me" block, fun hover states
   ========================================================= */

/* ---- Brighter, bigger waving hand ---- */
.eyebrow .wave {
  font-size: 1.3em;
  opacity: 1;
  filter: saturate(1.15) brightness(1.12) drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  margin: 0 2px;
  vertical-align: -1px;
}

/* ---- Availability badge on the photo ---- */
.hero__photo { position: relative; }
.photo-avail {
  position: absolute;
  left: 50%; bottom: -12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: rgba(17,17,17,0.86);
  backdrop-filter: blur(12px);
  border: 0.5px solid var(--line-strong);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.hero__photo:hover .photo-avail { transform: translateX(-50%) translateY(-3px); border-color: var(--accent); }
.photo-avail__dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ad07d;
  flex: none;
}
.photo-avail__dot::after {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: #4ad07d;
  animation: pulse 2s var(--ease) infinite;
}

/* ---- "Why hire me" block in the Quick intro modal ---- */
.tldr-why {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 0.5px solid var(--line);
}
.tldr-why__label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.tldr-why__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tldr-why__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(240,237,230,0.78);
}
.tldr-why__list li b { color: var(--text); font-weight: 600; }
.tldr-why__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

/* =========================================================
   FUN HOVER STATES
   ========================================================= */

/* Case cards: impact stat pops, cover number slides, title nudges */
.case-card { transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.case-card:hover {
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
}
.case-card:hover .case-card__impact {
  display: inline-block;
}
.case-card__impact { transition: transform .4s var(--ease); transform-origin: left center; }
.case-card:hover .case-card__num { color: var(--accent); transform: translateY(-2px); }
.case-card__num { transition: color .4s var(--ease), transform .4s var(--ease); }
.case-card__title { transition: color .35s var(--ease); }
.case-card:hover .case-card__title { color: var(--accent); }

/* Tags: playful lift + coral fill on hover */
.tag { transition: transform .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.case-card:hover .tag { border-color: var(--line-strong); }
.tag:hover { transform: translateY(-2px) rotate(-2deg); color: var(--accent); border-color: var(--accent); }

/* Nav links: springy underline */
.nav__links a { position: relative; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* Buttons: arrow gives a little hop */
.btn:hover .arr { animation: arrHop .6s var(--ease) infinite; }
@keyframes arrHop { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
/* Hero "see selected work" points down to next section — hop vertically */
#top .hero__actions .btn--primary:hover .arr { animation: arrHopDown .6s var(--ease) infinite; }
@keyframes arrHopDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Process steps: number kicks up, card warms */
.process__step { transition: background .4s var(--ease); }
.process__step:hover { background: rgba(168,111,214,0.05); }
.process__step:hover .process__step-no { color: var(--accent); transform: translateY(-3px) scale(1.1); }
.process__step-no { display: inline-block; transition: transform .4s var(--ease), color .4s var(--ease); }

/* Skills/tool tags: bounce */
.tool-tag, .pill { transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); }
.tool-tag:hover, .skills__set .pill:hover { transform: translateY(-3px) rotate(1.5deg); }

/* Currently items: lift + key colour shift */
.currently__item { transition: transform .4s var(--ease); }
.currently__item:hover { transform: translateY(-4px); }

/* Quote cards: mark spins a touch */
.quote-card__mark { transition: transform .5s var(--ease); }
.quote-card:hover .quote-card__mark { transform: rotate(-8deg) scale(1.08); }

[data-motion="off"] .btn:hover .arr { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .btn:hover .arr { animation: none; }
}

/* =========================================================
   SINGLE-FONT SYSTEM — Bricolage Grotesque
   Emphasis comes from WEIGHT CONTRAST, not a second family.
   Accent words = light weight; display = bold. Doodle marks
   carry the personality the serif italic used to.
   ========================================================= */
:root {
  --w-display: 600;   /* headline weight            */
  --w-accent: 300;    /* accent-word weight (light) */
}
/* tweakable display treatments (same font, used differently) */
html[data-display="contrast"] { --w-display: 600; --w-accent: 300; }
html[data-display="heavy"]    { --w-display: 800; --w-accent: 500; }
html[data-display="even"]     { --w-display: 600; --w-accent: 600; }
html[data-display="airy"]     { --w-display: 500; --w-accent: 300; }

.hero__title,
.section-title,
.contact__title,
.tldr-modal__title,
.process__quote,
.stat__num,
.footer__name {
  font-family: var(--display);
  font-weight: var(--w-display);
  font-style: normal;
  letter-spacing: -0.025em;
}

/* accent words: SAME font, lighter weight + accent colour (no fake italic) */
.section-title em,
.hero__title em,
.hero__title em.hword--intention,
.contact__title em,
.tldr-modal__title em,
.motion__head em,
.exp__head em,
.process__head em {
  font-family: var(--display);
  font-style: normal;
  font-weight: var(--w-accent);
  color: var(--accent);
  letter-spacing: -0.02em;
}

/* large quotes & scribble notes: light weight, upright */
.process__quote,
.scribble__note,
.quote-card__text {
  font-style: normal;
  font-weight: 300;
}
.quote-card__text { font-weight: 400; letter-spacing: -0.015em; }

/* marquee already forced to sans; keep it tracked + medium */
.hero-marquee__item { font-weight: 600; }

/* =========================================================
   ABSTRACT MINIMAL FACE + HAND-DRAWN PERSONALITY
   ========================================================= */
.minface { width: 96px; flex: none; transform: rotate(-5deg); }
.minface svg { width: 100%; height: auto; display: block; overflow: visible; }
.minface .mf-head { transform-box: fill-box; transform-origin: center; animation: mfFloat 4.5s var(--ease) infinite; }
@keyframes mfFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.minface .mf-eye { transform-box: fill-box; transform-origin: center; animation: mfBlink 5.5s steps(1, end) infinite; }
.minface .mf-eye--r { animation-delay: .04s; }
@keyframes mfBlink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
.minface .mf-spark { transform-box: fill-box; transform-origin: center; animation: mfSpark 3.5s var(--ease) infinite; }
@keyframes mfSpark { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.5); opacity: .4; } }
/* entrance pop */
.contact__doodle .minface { opacity: 0; transform: rotate(-5deg) scale(.6); }
.contact__doodle.in .minface { opacity: 1; transform: rotate(-5deg) scale(1); transition: opacity .6s var(--ease), transform .7s cubic-bezier(.34,1.56,.64,1); }
[data-motion="off"] .minface .mf-head,
[data-motion="off"] .minface .mf-eye,
[data-motion="off"] .minface .mf-spark { animation: none; }

/* illustrated hero avatar */
.hero__doodle {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #F3EFE7;
  border: 0.5px solid var(--line-strong);
}
.hero__doodle svg { width: 100%; height: 100%; display: block; }

/* hand-written note */
.handnote {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(17px, 1.7vw, 22px);
  color: var(--text);
  line-height: 1.3;
  transform: rotate(-3deg);
}
.handnote .squiggle { display: block; color: var(--accent); margin-top: 6px; }

/* contact doodle layout */
.contact__doodle {
  display: flex; align-items: center; gap: 24px;
  margin-top: 36px; padding-top: 28px;
  border-top: 0.5px dashed var(--line-strong);
}

/* =========================================================
   DESIGN APPROACH — left→right journey map
   ========================================================= */
.approach__lead {
  max-width: 52ch; margin-top: 18px;
  font-size: clamp(16px, 1.2vw, 18.5px); color: rgba(240,237,230,0.62); line-height: 1.6;
}
.journey {
  list-style: none; margin-top: 60px;
  display: flex; align-items: stretch; gap: 0;
}
.jstep {
  flex: 1 1 0;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  padding: 30px 26px 32px;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.jstep:hover { border-color: var(--line-strong); transform: translateY(-5px); }
.jstep__no {
  font-family: var(--serif); font-size: 17px; color: var(--accent);
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0.5px solid var(--line-strong);
  margin-bottom: 18px;
}
.jstep__t { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.jstep__d { margin-top: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.jstep--last { border-color: var(--line-strong); }
.jstep--last .jstep__no { background: var(--accent); color: #fff; border-color: var(--accent); }
.jstep__arrow {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 56px; color: var(--accent);
  align-self: center;
}
.jstep__arrow svg { width: 42px; height: 20px; }

@media (max-width: 920px) {
  .journey { flex-direction: column; gap: 0; }
  .jstep { width: 100%; }
  .jstep__arrow { width: 100%; height: 44px; transform: rotate(90deg); }
}

/* =========================================================
   v20 — simple nav, eyebrow/wave/underline cleanup,
   unified buttons, asymmetric timeline, fun skill blobs
   ========================================================= */

/* ---- Simpler nav: plain links, no pill container ---- */
.nav__links {
  background: none;
  border: none;
  padding: 0;
  gap: 2px;
}
.nav__links a { font-size: 14.5px; padding: 8px 14px; }
.nav__links a:hover { background: none; color: var(--text); }
.nav__links a.is-active { background: none; color: var(--accent); }
.nav__links a.is-active::after { display: block; transform: scaleX(1); }

/* ---- Remove dash before the hero eyebrow only ---- */
.hero__eyebrow-row .eyebrow::before { display: none; }

/* ---- Waving hand: force a vivid, on-brand colour so it never greys out ---- */
.eyebrow .wave {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--sans);
  filter: none;
  opacity: 1;
  font-size: 1.3em;
  color: var(--accent);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

/* ---- Unified, smoother button hover (primary + ghost behave alike) ---- */
.btn {
  transition: transform .5s var(--ease), border-color .5s var(--ease),
              background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,0.34); }
.btn--primary:hover { filter: brightness(1.07); box-shadow: 0 18px 38px rgba(168,111,214,0.42); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* =========================================================
   ASYMMETRIC TIMELINE — design approach
   ========================================================= */
.timeline {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 76px;
  height: 470px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 1.5%; right: 1.5%; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(240,237,230,0.22) 7%, rgba(240,237,230,0.22) 93%, transparent);
  border-radius: 2px;
}
.tl-node { position: relative; height: 100%; --gap: 44px; }
.tl-node:nth-child(1) { --gap: 36px; }
.tl-node:nth-child(2) { --gap: 76px; }
.tl-node:nth-child(3) { --gap: 88px; }
.tl-node:nth-child(4) { --gap: 40px; }
.tl-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  transform: translate(-50%, -50%);
  z-index: 3;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease);
}
.tl-card {
  position: absolute;
  left: 0; right: 0;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 22px 22px;
  transition: transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.tl-card::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  background: rgba(240,237,230,0.22);
  transform: translateX(-50%);
  transition: background .6s var(--ease);
}
.tl-node--up .tl-card { bottom: calc(50% + var(--gap)); }
.tl-node--up .tl-card::after { top: 100%; height: var(--gap); }
.tl-node--down .tl-card { top: calc(50% + var(--gap)); }
.tl-node--down .tl-card::after { bottom: 100%; height: var(--gap); }
.tl-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tl-no { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--accent); letter-spacing: 0.04em; }
.tl-tag {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.tl-t { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.tl-d { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.tl-node:hover .tl-card { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 24px 52px rgba(0,0,0,0.42); }
.tl-node:hover .tl-dot { transform: translate(-50%,-50%) scale(1.5); box-shadow: 0 0 0 5px var(--accent-soft); background: var(--accent); }
.tl-node:hover .tl-card::after { background: var(--accent); }
.approach__head {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
}
.approach__quote {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--accent);
  max-width: 30ch;
  justify-self: end;
  transform: rotate(-2deg);
  margin-bottom: 6px;
}
@media (max-width: 820px) {
  .approach__head { grid-template-columns: 1fr; align-items: start; }
  .approach__quote { justify-self: start; margin-top: 8px; }
}
@media (max-width: 860px) {
  .timeline {
    display: flex; flex-direction: column;
    height: auto; gap: 0; padding-left: 30px; margin-top: 48px;
  }
  .timeline::before {
    left: 7px; right: auto; top: 10px; bottom: 10px;
    width: 2px; height: auto; transform: none;
    background: linear-gradient(180deg, transparent, var(--line-strong) 6%, var(--line-strong) 94%, transparent);
  }
  .tl-node { height: auto; padding: 14px 0; --gap: 0px; }
  .tl-card { position: static; }
  .tl-card::after { display: none; }
  .tl-dot { position: absolute; top: 30px; left: -23px; transform: none; }
  .tl-node:hover .tl-dot { transform: scale(1.3); }
}

/* =========================================================
   SKILLS — fun pastel blob shapes
   ========================================================= */
.skills__head { position: relative; }
.skills-sticker {
  position: absolute;
  top: 4px; right: 0;
  width: auto;
  white-space: nowrap;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 0.9;
  text-align: right;
  color: var(--accent);
  transform: rotate(-6deg);
  animation: stickerWobble 5.5s var(--ease) infinite;
}
@keyframes stickerWobble {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(-2.5deg) translateY(-3px); }
}
/* Hand-drawn note + scribble arrow pointing at the sticker */
.skills-scribble {
  position: absolute;
  top: 10px;
  right: 166px;
  width: 150px;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
}
.skills-scribble__text {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 31px;
  line-height: 0.94;
  color: var(--accent);
  transform: rotate(-7deg);
  white-space: nowrap;
  margin-top: 10px;
}
.skills-scribble__arrow {
  width: 80px;
  height: auto;
  flex: none;
  margin-top: -6px;
  overflow: visible;
}
.skills-scribble__arrow path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.skills__head.in .skills-scribble__arrow path { animation: drawScribble 1.1s var(--ease) forwards; }
.skills__head.in .skills-scribble__arrow path:nth-child(2) { animation-delay: .75s; animation-duration: .35s; }
.skills__head.in .skills-scribble__arrow path:nth-child(3) { animation-delay: .75s; animation-duration: .35s; }
@keyframes drawScribble { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .skills-scribble__arrow path { stroke-dashoffset: 0; animation: none; }
}
[data-motion="off"] .skills-scribble__arrow path { stroke-dashoffset: 0; animation: none; }
@media (max-width: 1040px) { .skills-scribble { display: none; } }
.blob-grid {
  margin-top: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 34px) clamp(14px, 1.8vw, 24px);
}
.bk {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  cursor: default;
  transition: transform .7s var(--ease);
}
.bk__shape {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.28));
  transition: transform .7s var(--ease), filter .7s var(--ease);
}
.bk__label {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(13px, 1.12vw, 15px);
  letter-spacing: -0.012em;
  color: var(--ink, #10100f);
  text-align: center;
  padding: 0 12%;
  text-wrap: balance;
}
.bk:hover { transform: translateY(-9px) rotate(-1.6deg); }
.bk:nth-child(even):hover { transform: translateY(-9px) rotate(1.6deg); }
.bk:hover .bk__shape { transform: scale(1.05); filter: drop-shadow(0 22px 42px rgba(0,0,0,0.44)) brightness(1.04); }

.tools-row {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 30px;
  border-top: 0.5px solid var(--line);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.tools-row__label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); flex: none;
}
.tools-row__set { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Skills half-and-half split ---- */
.skills__split {
  margin: clamp(36px, 4.5vw, 56px) auto 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1fr 0.64fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: stretch;
  padding: clamp(26px, 3.4vw, 46px);
  background: rgba(255,255,255,0.018);
  border: 0.5px solid var(--line);
  border-radius: 26px;
}
.skills__col-label {
  display: block;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.skills__shapes .blob-grid {
  gap: clamp(20px, 2.6vw, 34px) clamp(18px, 2.2vw, 30px);
}
.skills__shapes .bk__shape { transform: scale(0.82); }
.skills__shapes .bk:hover .bk__shape { transform: scale(0.87); }
.skills__tools {
  border-left: 0.5px solid var(--line);
  padding-left: clamp(26px, 3.4vw, 52px);
}
.skills__tools .tools-row {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  height: 100%;
}
.skills__tools .tools-row__label { margin-bottom: 2px; }
.skills__tools .tools-row__set {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.skills__tools .tool-tag {
  width: 100%;
  justify-content: flex-start;
  padding: 13px 18px;
  font-size: 15px;
  border-radius: 14px;
}
.skills__tools .tool-tag__logo { height: 18px; }
.tool-tag--ai { position: relative; }
.tool-tag__caret {
  margin-left: auto; font-size: 13px; font-weight: 700;
  color: var(--accent); opacity: 0.7;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.tool-tag--ai:hover .tool-tag__caret { transform: rotate(45deg); opacity: 1; }
.tool-tag__pop {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 15px;
  background: #161616;
  border: 0.5px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  z-index: 9;
}
.tool-tag--ai:hover .tool-tag__pop { opacity: 1; visibility: visible; transform: translateY(0); }
.tool-tag__pop-k {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.tool-tag__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tool-tag__chips span {
  font-size: 12.5px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  padding: 5px 11px; border-radius: 100px;
}
@media (max-width: 860px) {
  .skills__split { grid-template-columns: 1fr; gap: 36px; }
}

[data-motion="off"] .skills-sticker { animation: none; }
@media (prefers-reduced-motion: reduce) { .skills-sticker { animation: none; } }

@media (max-width: 860px) {
  .blob-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-sticker { position: static; display: inline-block; margin-top: 20px; }
}
@media (max-width: 520px) {
  .blob-grid { gap: 14px; }
  .tools-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* =========================================================
   v21 — playful shape motif echoed across the page
   Toggle via [data-motif="echoed"] (default) vs "contained".
   Restrained: only timeline markers, contact accent, bg palette.
   ========================================================= */

/* Timeline dots become small pastel blobs when echoed */
[data-motif="echoed"] .tl-dot {
  width: 8px; height: 8px;
  border: none;
  border-radius: 50%;
}
[data-motif="echoed"] .tl-node:nth-child(1) .tl-dot { background: #E8632A; }
[data-motif="echoed"] .tl-node:nth-child(2) .tl-dot { background: #9EC9F2; }
[data-motif="echoed"] .tl-node:nth-child(3) .tl-dot { background: #ACD98C; }
[data-motif="echoed"] .tl-node:nth-child(4) .tl-dot { background: #F2D06B; }
[data-motif="echoed"] .tl-node:hover .tl-dot { box-shadow: 0 0 0 6px rgba(240,237,230,0.08); }

/* Background gradient blobs share the pastel family (coral anchor stays) */
[data-motif="echoed"] .blob--2 {
  background: radial-gradient(circle at 50% 50%, rgba(200,183,242,0.32), transparent 70%);
}
[data-motif="echoed"] .blob--3 {
  background: radial-gradient(circle at 50% 50%, rgba(158,201,242,0.26), transparent 70%);
}

/* Contact CTA — small shapes peek from the top-right corner */
.contact__inner .contact__motif {
  position: absolute;
  bottom: clamp(26px, 3.4vw, 48px);
  right: clamp(26px, 3.6vw, 56px);
  top: auto; left: auto;
  display: flex;
  align-items: flex-end;
  gap: 0;
  z-index: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
[data-motif="echoed"] .contact__inner .contact__motif { opacity: 1; transform: none; }
.contact__motif .cm {
  width: 92px; height: auto;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.38));
  animation: floaty 6.5s var(--ease) infinite;
  transform: rotate(var(--cmr, 0deg));
}
.contact__motif .cm--peanut { width: 88px; --cmr: -9deg; }
.contact__motif .cm--diamond { width: 76px; margin-left: -20px; margin-bottom: 16px; --cmr: 11deg; animation-delay: 1.1s; }
.contact__motif .cm--pill { width: 82px; margin-left: -18px; --cmr: -5deg; animation-delay: 2.2s; }
[data-motif="contained"] .contact__motif { display: none; }

[data-motion="off"] .contact__motif .cm { animation: none; }
@media (prefers-reduced-motion: reduce) { .contact__motif .cm { animation: none; } }
@media (max-width: 760px) { .contact__motif { display: none; } }

/* =========================================================
   Single-column case studies (big covers + colour cards)
   ========================================================= */
.cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.6vw, 36px);
}
.case-card {
  flex-direction: row;
  align-items: stretch;
  background: var(--cardc, var(--surface));
  border-color: transparent;
  border-radius: 22px;
}
.case-card:nth-child(4n+1) { --cardc: #F4C9A2; }
.case-card:nth-child(4n+2) { --cardc: #BEE3CB; }
.case-card:nth-child(4n+3) { --cardc: #F2B9CE; }
.case-card:nth-child(4n+4) { --cardc: #BCD1F5; }
.case-card:nth-child(even) { flex-direction: row-reverse; }
.case-card__cover {
  width: 54%;
  aspect-ratio: auto;
  min-height: clamp(360px, 40vw, 560px);
  align-self: stretch;
  cursor: none;
  background: linear-gradient(150deg, color-mix(in srgb, var(--cardc) 26%, #121110), #0d0c0b);
}
.case-card__body {
  width: 46%;
  padding: clamp(34px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
  color: #14110d;
}
.case-card__tags { margin-bottom: 22px; }
.case-card__title { font-size: clamp(26px, 2.7vw, 38px) !important; line-height: 1.08; }
.case-card__desc { font-size: clamp(15.5px, 1.15vw, 18px); margin-top: 16px; max-width: 42ch; line-height: 1.5; }
.case-card__meta { margin-top: 26px; }
.case-card__role { font-size: 14px; }
.case-card__impact { font-size: clamp(15px, 1.15vw, 17px); }
.case-card__link { margin-top: 26px; font-size: 15.5px; }
.case-card__body .case-card__title,
.case-card:hover .case-card__title { color: #14110d; }
.case-card__desc { color: rgba(20,17,13,0.7); }
.case-card__role { color: rgba(20,17,13,0.58); }
.case-card__impact { color: #14110d; }
.case-card .tag { color: rgba(20,17,13,0.66); border-color: rgba(20,17,13,0.24); }
.case-card__link { color: #14110d; }
.case-card__link .arr { color: #14110d; }
.case-card:hover {
  transform: translateY(-6px);
  background: var(--cardc);
  border-color: transparent;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
@media (max-width: 760px) {
  .case-card, .case-card:nth-child(even) { flex-direction: column; }
  .case-card__cover, .case-card__body { width: 100%; }
  .case-card__cover { min-height: 230px; cursor: pointer; }
}

/* ---- Custom "X min read" cursor follower ---- */
.read-cursor {
  position: fixed; top: 0; left: 0; z-index: 300;
  display: inline-flex; align-items: center; gap: 7px;
  margin: -52px 0 0 16px;
  padding: 8px 14px 8px 11px;
  border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; scale: 0.7;
  transition: opacity .2s var(--ease), scale .2s var(--ease);
  box-shadow: 0 12px 30px rgba(168,111,214,0.5);
}
.read-cursor.show { opacity: 1; scale: 1; }
.read-cursor__ic { display: inline-flex; }
.read-cursor__ic svg { width: 14px; height: 14px; display: block; }
@media (pointer: coarse) { .read-cursor { display: none; } }

/* =========================================================
   v22 — FEEDBACK REVISION
   Cream case cards w/ accent pills + lively hover · tilted
   testimonials · floating tool circles · 3D currently icons ·
   corner-popping contact shapes · more section motion
   ========================================================= */

/* ---------- Case cards: cream surface, per-card accent ---------- */
.case-card:nth-child(4n+1) { --ac: #6E3FC4; --cardc: #FAF6EF; }
.case-card:nth-child(4n+2) { --ac: #1F9A63; --cardc: #FAF6EF; }
.case-card:nth-child(4n+3) { --ac: #D43F76; --cardc: #FAF6EF; }
.case-card:nth-child(4n+4) { --ac: #2F6FD6; --cardc: #FAF6EF; }

.case-card {
  background: var(--cardc);
  border: 1px solid rgba(20,17,13,0.06);
  box-shadow: 0 14px 38px rgba(0,0,0,0.30);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.case-card__cover {
  background:
    radial-gradient(120% 120% at 78% 18%, color-mix(in srgb, var(--ac) 34%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--ac) 40%, #16110d), #100d0b);
}
/* lively hover: lift + accent-tinted glow + diagonal shine over cover */
.case-card:hover {
  transform: translateY(-9px);
  background: var(--cardc);
  box-shadow: 0 36px 80px color-mix(in srgb, var(--ac) 34%, rgba(0,0,0,0.42));
}
/* tags → clearly separated tinted pills */
.case-card .case-card__tags { gap: 9px; }
.case-card .tag {
  background: color-mix(in srgb, var(--ac) 13%, #fff);
  color: color-mix(in srgb, var(--ac) 74%, #1a120b);
  border: 1px solid color-mix(in srgb, var(--ac) 28%, transparent);
  border-radius: 100px;
  padding: 6px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.case-card:hover .tag { background: color-mix(in srgb, var(--ac) 20%, #fff); }

/* meta: clear labelled Role / Impact headers */
.case-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
  border-top: 1px solid rgba(20,17,13,0.10);
}
.cmeta { display: flex; flex-direction: column; gap: 5px; }
.cmeta__k {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(20,17,13,0.42);
}
.case-card__role { font-size: 14px; font-weight: 500; color: #1a120b; }
.case-card__impact { font-size: clamp(15px, 1.2vw, 17.5px); font-weight: 800; color: var(--ac); letter-spacing: -0.01em; }

/* arrow link picks up the card accent */
.case-card__link { color: #1a120b; }
.case-card__link .arr { color: var(--ac); }
.case-card:hover .case-card__link .arr { transform: translateX(5px); }

/* =========================================================
   v23 — DARK CASE CARDS (per-card accent kept, no pastels)
   ========================================================= */
.case-card:nth-child(4n+1) { --ac: #A86FD6; --cardc: #131210; }
.case-card:nth-child(4n+2) { --ac: #34D399; --cardc: #101413; }
.case-card:nth-child(4n+3) { --ac: #F45D9B; --cardc: #151012; }
.case-card:nth-child(4n+4) { --ac: #5B9CFF; --cardc: #0F1218; }

.case-card {
  background:
    radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--ac) 9%, transparent), transparent 55%),
    var(--cardc);
  border: 0.5px solid var(--line);
  box-shadow: 0 16px 44px rgba(0,0,0,0.5);
}
.case-card__cover {
  background:
    radial-gradient(120% 120% at 78% 18%, color-mix(in srgb, var(--ac) 42%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--ac) 30%, #0d0c0b), #08080a);
}
.case-card:hover {
  background:
    radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--ac) 14%, transparent), transparent 55%),
    var(--cardc);
  border-color: color-mix(in srgb, var(--ac) 36%, transparent);
  box-shadow: 0 38px 84px color-mix(in srgb, var(--ac) 26%, rgba(0,0,0,0.6));
}
/* body text on dark */
.case-card__body { color: var(--text); }
.case-card__body .case-card__title,
.case-card:hover .case-card__title { color: var(--text); }
.case-card__desc { color: rgba(240,237,230,0.62); }
/* tags → dark tinted pills */
.case-card .tag {
  background: color-mix(in srgb, var(--ac) 15%, transparent);
  color: color-mix(in srgb, var(--ac) 60%, var(--text));
  border: 0.5px solid color-mix(in srgb, var(--ac) 34%, transparent);
}
.case-card:hover .tag { background: color-mix(in srgb, var(--ac) 24%, transparent); }
/* meta on dark */
.case-card__meta { border-top: 0.5px solid var(--line); }
.cmeta__k { color: var(--muted); }
.case-card__role { color: rgba(240,237,230,0.78); }
.case-card__impact { color: var(--ac); }
.case-card__link { color: var(--text); }
.case-card__link .arr { color: var(--ac); }

/* v23b — case link: solid primary-pink CTA (consistent on every card) */
.case-card__link {
  margin-top: 28px;
  align-self: flex-start;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  box-shadow: 0 12px 28px rgba(168,111,214,0.34);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.case-card__link .arr { color: #fff; }
.case-card__link:hover {
  transform: translateY(-3px);
  filter: brightness(1.07);
  box-shadow: 0 20px 44px rgba(168,111,214,0.46);
}
.case-card:hover .case-card__link .arr { transform: translateX(4px); color: #fff; }

/* ---------- Testimonials: scattered, tilted, full-card motion ---------- */
.quotes__grid { padding-top: 14px; align-items: start; }
.quote-card {
  position: relative;
  transform: rotate(var(--qr, 0deg));
  transition: transform .55s var(--ease), box-shadow .55s var(--ease),
              border-color .55s var(--ease), background .55s var(--ease);
}
.quote-card:nth-child(1) { --qr: -2.2deg; }
.quote-card:nth-child(2) { --qr: 1.6deg; margin-top: 22px; }
.quote-card:nth-child(3) { --qr: -1.1deg; }
.quote-card:hover {
  transform: rotate(0deg) translateY(-14px) scale(1.025);
  box-shadow: 0 38px 80px rgba(0,0,0,0.52);
  border-color: var(--accent);
  background: var(--surface-2);
  z-index: 4;
}
.quote-card__mark { transition: transform .55s var(--ease); transform-origin: left center; }
.quote-card:hover .quote-card__mark { transform: scale(1.22) rotate(-7deg); }
.quote-card__avatar { transition: transform .55s var(--ease); }
.quote-card:hover .quote-card__avatar { transform: scale(1.1) rotate(-5deg); }
.quote-card__person { transition: transform .55s var(--ease); }
.quote-card:hover .quote-card__person { transform: translateX(4px); }
@media (max-width: 1000px) {
  .quote-card, .quote-card:nth-child(n) { transform: none; margin-top: 0; }
  .quote-card:hover { transform: translateY(-8px); }
}

/* ---------- Skills: full-width, floating tool circles ---------- */
.skills__bring {
  max-width: 760px;
  margin: clamp(36px, 4.5vw, 56px) auto 0;
}
.skills__col-label {
  display: block;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(22px, 2.6vw, 32px);
}
.skills__bring .blob-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3.4vw, 44px) clamp(16px, 2.4vw, 34px);
}
.bk__label--sm { font-size: clamp(11px, 0.92vw, 12.5px) !important; padding: 0 14% !important; }
.bk__label { line-height: 1.06; }

.skills__toolfloat {
  max-width: 720px;
  margin: clamp(46px, 5.5vw, 70px) auto 0;
  padding-top: clamp(32px, 3.8vw, 46px);
  border-top: 0.5px solid var(--line);
}
.toolfloat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(22px, 3.4vw, 48px);
}
.toolc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
  animation: toolBob var(--bob, 8s) var(--ease) infinite;
  will-change: transform;
}
.toolc:hover { animation-play-state: paused; z-index: 5; }
@keyframes toolBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.toolc__face {
  width: clamp(64px, 7.2vw, 80px);
  height: clamp(64px, 7.2vw, 80px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(125% 125% at 32% 24%, #ffffff, #E9E3D8);
  border: 0.5px solid var(--line-strong);
  box-shadow: 0 16px 32px rgba(0,0,0,0.42), inset 0 2px 2px rgba(255,255,255,0.85), inset 0 -6px 12px rgba(0,0,0,0.10);
  transform: rotate(var(--r, 0deg));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.toolc__face--dark { background: radial-gradient(125% 125% at 32% 24%, #333, #0d0d0d); box-shadow: 0 16px 32px rgba(0,0,0,0.5), inset 0 2px 2px rgba(255,255,255,0.16); }
.toolc__face--ai { background: radial-gradient(125% 125% at 32% 24%, #C79BF0, #7C3FC4); box-shadow: 0 16px 36px rgba(168,111,214,0.45), inset 0 2px 2px rgba(255,255,255,0.5); }
.toolc__logo { width: 46%; height: 46%; display: block; }
.toolc:hover .toolc__face {
  transform: rotate(0deg) translateY(-9px) scale(1.1);
  box-shadow: 0 26px 50px color-mix(in srgb, var(--accent) 30%, rgba(0,0,0,0.4));
}
.toolc__name, .toolc__pop {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
}
.toolc__name {
  transform: translateX(-50%) translateY(6px) scale(0.95);
  background: var(--surface-2);
  border: 0.5px solid var(--line-strong);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 14px 30px rgba(0,0,0,0.5);
  transition: opacity .26s ease, transform .3s var(--ease);
}
.toolc__name::after {
  content: "";
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--surface-2);
}
.toolc:hover .toolc__name { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toolc--ai:hover .toolc__name { opacity: 0; }
.toolc__pop {
  transform: translateX(-50%) translateY(8px);
  width: max-content;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 15px;
  background: #161616;
  border: 0.5px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  z-index: 9;
}
.toolc--ai:hover .toolc__pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toolc__pop-k { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.toolc__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.toolc__chips span { font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 5px 11px; border-radius: 100px; }
[data-motion="off"] .toolc { animation: none; }
@media (prefers-reduced-motion: reduce) { .toolc { animation: none; } }
@media (max-width: 520px) { .toolfloat { gap: 20px 26px; } }

/* ---------- Currently: floating 3D icons ---------- */
.currently__art {
  background: none !important;
  border: none !important;
  aspect-ratio: auto;
  height: clamp(116px, 14vw, 146px);
  display: grid;
  place-items: center start;
  overflow: visible;
  margin-bottom: 8px;
}
.d3ico {
  width: clamp(108px, 12.5vw, 138px);
  height: auto;
  overflow: visible;
  animation: icoFloat 6s var(--ease) infinite;
  will-change: transform;
}
.currently__item:nth-child(2) .d3ico { animation-delay: -2s; }
.currently__item:nth-child(3) .d3ico { animation-delay: -4s; }
.d3ico__shadow { fill: rgba(0,0,0,0.20); transform-box: fill-box; transform-origin: center; animation: icoShadow 6s var(--ease) infinite; }
.currently__item:nth-child(2) .d3ico__shadow { animation-delay: -2s; }
.currently__item:nth-child(3) .d3ico__shadow { animation-delay: -4s; }
@keyframes icoFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes icoShadow { 0%, 100% { transform: scaleX(1); opacity: 0.55; } 50% { transform: scaleX(0.82); opacity: 0.32; } }
[data-motion="off"] .d3ico, [data-motion="off"] .d3ico__shadow { animation: none; }
@media (prefers-reduced-motion: reduce) { .d3ico, .d3ico__shadow { animation: none; } }

/* ---------- Contact: shapes popping from the corners of the box ---------- */
.contact__inner { overflow: visible; }
.contact__inner::before {
  width: 52%; height: 120%;
  top: -10%; right: 0;
  filter: blur(26px);
}
[data-motif="echoed"] .contact__inner .contact__motif {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 1;
  transform: none;
  overflow: visible;
}
.contact__motif .cm {
  position: absolute;
  margin: 0;
  width: 116px;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.46));
  transform: rotate(var(--cmr, 0deg));
}
.contact__motif .cm--peanut { top: -46px; left: -42px; width: 128px; --cmr: -14deg; }
.contact__motif .cm--diamond { top: -36px; right: -32px; width: 104px; --cmr: 16deg; animation-delay: 1.1s; }
.contact__motif .cm--pill { bottom: -42px; right: 92px; width: 112px; --cmr: -7deg; animation-delay: 2.2s; }
@media (max-width: 880px) {
  .contact__motif .cm--peanut { width: 96px; top: -34px; left: -28px; }
  .contact__motif .cm--diamond { width: 80px; top: -26px; right: -22px; }
  .contact__motif .cm--pill { display: none; }
}

/* ---------- A little extra section life ---------- */
.contact__actions .btn { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .section-title em { display: inline-block; }
  .skills-sticker { will-change: transform; }
}

/* =========================================================
   v24 — CLEAN · SUBTLE · PROFESSIONAL
   Hero de-pinked to a light-grey gradient · icon credibility
   strip · static (jitter-free) read badge · Recent Achievements ·
   re-approached Skills · calmer motion & shadows site-wide.
   ========================================================= */

/* ---- Hero: single flat colour across the whole headline ---- */
.hero__title em,
.hero__title em.hword--intention,
.hero__title .hword--impact {
  display: inline;            /* inline paints full glyph ink — no clip of italic tails */
  color: #F0EDE6;             /* match the base headline — one single colour */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #F0EDE6;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-style: italic;
  padding-right: 0.06em;      /* tiny breathing room for the italic overhang */
}
.hero__title .hword--impact:hover,
.hero__title em.hword--intention:hover { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.hero__title .hword:hover { transform: none; }

/* ---- Hero credibility strip (icon before word) ---- */
.cred-strip {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.cred {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px 9px 11px;
  border: 0.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.018);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.cred:hover {
  transform: translateY(-3px);
  border-color: rgba(240, 237, 230, 0.34);
  background: rgba(255, 255, 255, 0.04);
}
.cred__ic {
  width: 27px; height: 27px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(240, 237, 230, 0.06);
  color: rgba(240, 237, 230, 0.82);
}
.cred__ic svg { width: 18px; height: 18px; display: block; }
@media (max-width: 460px) { .cred { font-size: 13px; padding: 8px 14px 8px 9px; } }

/* ---- Static, jitter-free "X min read" badge on covers ---- */
.read-cursor { display: none !important; }
.case-card__cover[data-read] { position: relative; }
.case-card__cover[data-read]::after {
  content: attr(data-read);
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 3;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  color: #F4F1EA;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.case-card:hover .case-card__cover[data-read]::after { opacity: 1; transform: translateY(0); }
@media (pointer: coarse) {
  .case-card__cover[data-read]::after { opacity: 1; transform: none; }
}
/* Match JS lift exactly so the card never bounces between -9px and -6px */
.case-card:hover { transform: translateY(-6px); }
/* Restore the native pointer — the old custom cursor follower is gone */
.case-card,
.case-card__cover,
.case-card__cover[data-read],
.case-card__body { cursor: pointer; }

/* ---- Recent Achievements ---- */
.ach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.ach-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.4vw, 34px);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.ach__grid[data-reveal-stagger] .ach-card:nth-child(1) { transform: none; }
.ach__grid[data-reveal-stagger] .ach-card:nth-child(2) { transform: none; }
.ach__grid[data-reveal-stagger] .ach-card:nth-child(3) { transform: none; }
.ach-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: var(--line-strong);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.4);
}
.ach-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.ach-card__medal {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(240, 237, 230, 0.05);
  border: 0.5px solid var(--line);
  color: var(--text);
}
.ach-card__medal svg { width: 25px; height: 25px; display: block; }
.ach-card__status {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.ach-card__status--win {
  color: #E8C886;
  border-color: rgba(232, 200, 134, 0.42);
  background: rgba(232, 200, 134, 0.09);
}
.ach-card--win {
  border-color: rgba(232, 200, 134, 0.28);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(232, 200, 134, 0.07), transparent 58%),
    var(--surface);
}
.ach-card--win .ach-card__medal {
  color: #E8C886;
  background: rgba(232, 200, 134, 0.09);
  border-color: rgba(232, 200, 134, 0.32);
}
.ach-card__title {
  font-size: clamp(20px, 1.55vw, 23px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.16;
}
.ach-card__org {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14.5px;
}
.ach-card__stat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  padding: 20px 0;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.ach-card__num {
  font-size: clamp(42px, 4vw, 54px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  font-feature-settings: "tnum" 1;
}
.ach-card--win .ach-card__num { color: #E8C886; }
.ach-card__hash {
  font-size: 0.42em;
  vertical-align: super;
  color: var(--muted);
  margin-left: 1px;
  font-weight: 600;
}
.ach-card__cap {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.ach-card__learn { margin-top: auto; }
.ach-card__learn-k {
  display: block;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  margin-bottom: 9px;
}
.ach-card__learn p {
  font-size: 14.5px;
  line-height: 1.52;
  color: rgba(240, 237, 230, 0.74);
  text-wrap: pretty;
}
.ach-card__learn em { font-style: italic; color: var(--text); }
@media (max-width: 880px) { .ach__grid { grid-template-columns: 1fr; } }

.ach-card { padding: 0; position: relative; overflow: visible; background: radial-gradient(130% 90% at 20% 100%, rgba(200,144,60,0.13), transparent 55%), radial-gradient(120% 90% at 100% 0%, rgba(168,111,214,0.12), transparent 60%), var(--surface); }
.ach-card:nth-child(3) { background: radial-gradient(130% 90% at 20% 100%, rgba(90,139,245,0.16), transparent 55%), radial-gradient(120% 90% at 100% 0%, rgba(52,211,153,0.12), transparent 60%), var(--surface); }
.ach-card--win { overflow: visible; background: radial-gradient(130% 90% at 20% 100%, rgba(168,111,214,0.16), transparent 62%), var(--surface); }
.ach-card__inner { border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; flex: 1; }
.ach-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.ach-card__shot { position: relative; height: 300px; margin: 14px 14px 0; border-radius: 13px; overflow: hidden; background: #141414; }
.ach-card__shot image-slot, .ach-card__shot > img:not(.ach-card__award-logo) { width: 100%; height: 100%; display: block; }
.ach-card__flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -1px); background: rgba(90,90,90,0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; padding: 13px 34px 12px; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); box-shadow: 0 8px 22px rgba(0,0,0,0.4); z-index: 2; }
.ach-card__award-logo { position: absolute; bottom: 10px; right: 10px; width: 42px; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
.ach-card__award-logo--left { position: absolute; bottom: auto; right: auto; top: 14px; left: 14px; width: 58px; height: auto; }
.ach-card__confetti { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.ach-card__confetti svg { width: 100% !important; height: 100% !important; }

/* ---- Skills: calm, professional capability grid + tool pills ---- */
.skillset {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}
.skillset__item {
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(22px, 2.2vw, 30px);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.skillset__item:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.skillset__ic {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(240, 237, 230, 0.04);
  border: 0.5px solid var(--line);
  color: var(--text);
  margin-bottom: 18px;
}
.skillset__ic svg { width: 22px; height: 22px; display: block; }
.skillset__t { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.skillset__d { margin-top: 7px; font-size: 14px; color: var(--muted); line-height: 1.5; text-wrap: pretty; }

.toolset {
  margin-top: clamp(40px, 4.4vw, 60px);
  padding-top: clamp(28px, 3vw, 42px);
  border-top: 0.5px solid var(--line);
  text-align: center;
}
.toolset__label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.toolset__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.toolpill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 0.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.toolpill:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line-strong));
}
.toolpill__logo { width: 18px; height: 18px; display: block; flex: none; }
.toolpill--ai .toolpill__star { color: var(--accent); font-size: 14px; }
.toolpill__sub { color: var(--muted); font-weight: 500; font-size: 12.5px; }
@media (max-width: 860px) { .skillset { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .skillset { grid-template-columns: 1fr; } }

/* ---- Overall calm: soften neon glows, flatten scattered testimonials ---- */
.gist-fab { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.46) !important; }
.gist-fab:hover { filter: none; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.52) !important; }
.btn--primary:hover { box-shadow: 0 18px 38px rgba(168, 111, 214, 0.42) !important; }

.quote-card,
.quote-card:nth-child(n) { transform: none !important; margin-top: 0 !important; }
.quote-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.4) !important;
  border-color: var(--line-strong) !important;
  background: var(--surface-2) !important;
}
.quote-card:hover .quote-card__mark { transform: none !important; }
.quote-card:hover .quote-card__avatar { transform: none !important; }
.quote-card:hover .quote-card__person { transform: none !important; }

/* Tone the page's ambient pink wash down to a neutral, barely-there glow */
body::before {
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(240, 237, 230, 0.035), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(240, 237, 230, 0.02), transparent 55%) !important;
}

/* ---- All case cards share one layout: image left, text right ---- */
.case-card,
.case-card:nth-child(even) { flex-direction: row !important; }

/* ---- Unified CTAs: white background, dark text, neutral shadows ---- */
.btn--primary,
.case-card__link,
.gist-fab {
  background: #F4F1EA !important;
  color: #14110D !important;
  border: 0.5px solid transparent !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
  filter: none !important;
}
.btn--primary .arr,
.case-card__link .arr,
.case-card:hover .case-card__link .arr {
  color: #14110D !important;
}
.btn--primary:hover {
  background: #a86fd6 !important;
  color: #fff !important;
  box-shadow: 0 18px 38px rgba(168, 111, 214, 0.42) !important;
  filter: none !important;
}
.case-card__link:hover,
.gist-fab:hover {
  background: #FFFFFF !important;
  color: #14110D !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36) !important;
  filter: none !important;
}
.gist-fab__dot,
.gist-fab__dot::after { background: #14110D !important; }
.gist-fab__ico { color: #14110D; }

/* =========================================================
   v25 — achievement icons · simplified skills · restored
   floating tools (named) · handwritten AI line · 3D bulge cards
   ========================================================= */

/* ---- Recent Achievements: orange duotone icons ---- */
.ach-card__status { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ach-card__status svg { width: 15px; height: 15px; flex: none; }
.ach-card__medal {
  background: rgba(168, 111, 214, 0.10) !important;
  border-color: rgba(168, 111, 214, 0.22) !important;
}
.ach-card--win .ach-card__medal {
  background: rgba(168, 111, 214, 0.13) !important;
  border-color: rgba(168, 111, 214, 0.30) !important;
}
.ach-card__medal svg { width: 28px; height: 28px; }

/* ---- Skills: simplified to icon + label rows (no descriptions) ---- */
.skillset--compact { grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.1vw, 14px); }
.skillset--compact .skillset__item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: clamp(16px, 1.5vw, 20px) clamp(18px, 1.8vw, 24px);
}
.skillset--compact .skillset__ic {
  width: 42px; height: 42px;
  margin-bottom: 0;
  flex: none;
}
.skillset--compact .skillset__t { font-size: 16px; letter-spacing: -0.012em; }
@media (max-width: 860px) { .skillset--compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .skillset--compact { grid-template-columns: 1fr; } }

/* ---- Restored floating tools, with a persistent name caption below ---- */
.toolfloat--named { gap: clamp(26px, 3.6vw, 52px) clamp(22px, 3.4vw, 46px); }
.toolfloat--named .toolc { animation: none; gap: 16px; }
.toolfloat--named .toolc__face { animation: toolBob var(--bob, 8s) var(--ease) infinite; }
.toolfloat--named .toolc:hover .toolc__face { animation-play-state: paused; }
[data-motion="off"] .toolfloat--named .toolc__face { animation: none; }
@media (prefers-reduced-motion: reduce) { .toolfloat--named .toolc__face { animation: none; } }
.toolc__cap {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  transition: color .4s var(--ease);
}
.toolc:hover .toolc__cap { color: var(--text); }

/* ---- Handwritten AI line ---- */
.exp__intro--hand {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: clamp(25px, 2.7vw, 35px);
  line-height: 1.22;
  color: var(--text);
  letter-spacing: 0.005em;
  max-width: 30ch;
  align-self: end;
}

/* ---- Vibe-coded: 3D bulging cards ---- */
.vibe__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  padding-top: clamp(20px, 2.6vw, 38px);
  perspective: 1700px;
}
.bulge { perspective: 1500px; }
.bulge__deck {
  transform-style: preserve-3d;
  transform: rotateY(var(--tilt, -6deg)) rotateX(5deg);
  transition: transform .7s cubic-bezier(.18,.7,.2,1);
  will-change: transform;
}
.bulge:hover .bulge__deck {
  transform: rotateY(0deg) rotateX(0deg) translateZ(34px);
}
.bulge__face {
  position: relative;
  border-radius: 28px;
  padding: 16px 16px 26px;
  background:
    radial-gradient(150% 80% at 26% 0%, #20201d, #131311 62%);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  transform-style: preserve-3d;
  /* stacked layers fake the extruded card thickness + big ambient shadow */
  box-shadow:
    0 2px 0 #100f0d, 0 4px 0 #0e0d0b, 0 7px 0 #0c0b09, 0 10px 0 #0a0907,
    0 14px 0 #080705,
    0 30px 40px -10px rgba(0, 0, 0, 0.55),
    0 60px 90px -20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: box-shadow .7s var(--ease);
}
.bulge:hover .bulge__face {
  box-shadow:
    0 2px 0 #100f0d, 0 4px 0 #0e0d0b, 0 7px 0 #0c0b09, 0 10px 0 #0a0907,
    0 14px 0 #080705,
    0 44px 60px -12px rgba(0, 0, 0, 0.6),
    0 90px 120px -24px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.bulge__screen {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: linear-gradient(150deg, #1b1b18, #111110);
  border: 0.5px solid var(--line);
}
.bulge__screen image-slot { width: 100%; height: 100%; display: block; }
.bulge__meta { padding: 22px 14px 6px; }
.bulge__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.bulge__kicker {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.bulge__gem {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #a86fd6;
  background: rgba(168, 111, 214, 0.10);
  border: 0.5px solid rgba(168, 111, 214, 0.26);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.bulge__title {
  font-size: clamp(23px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.1;
}
.bulge__note {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(240, 237, 230, 0.74);
  text-wrap: pretty;
}
.bulge__laws {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.bulge__law {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(240, 237, 230, 0.82);
  background: rgba(255, 255, 255, 0.035);
  border: 0.5px solid var(--line-strong);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
@media (max-width: 820px) {
  .vibe__grid { grid-template-columns: 1fr; gap: 46px; }
  .bulge__deck { transform: none; }
  .bulge:hover .bulge__deck { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .bulge__deck, .bulge:hover .bulge__deck { transition: none; }
}

/* =========================================================
   v26 — CLEAN PROFESSIONAL CONSOLIDATION
   Quiet the repeated italic accent word in every section
   heading (hero keeps its accent), flatten the Skills cards,
   and calm the AI experiment cards.
   ========================================================= */

/* ---- Section headings: uniform, no accent emphasis word ----
   The hero title keeps its gradient accent; every *section*
   title now reads as one calm, single-colour line. */
.section-title em,
.motion__head em,
.exp__head em,
.approach__head em,
.process__head em {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}

/* ---- Skills: flat, borderless, quiet ---- */
.skillset--compact { gap: clamp(6px, 0.8vw, 12px) clamp(18px, 2.4vw, 40px); }
.skillset--compact .skillset__item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 14px 4px !important;
  gap: 13px !important;
}
.skillset--compact .skillset__item + .skillset__item { }
.skillset--compact .skillset__item:hover { transform: none !important; }
.skillset--compact .skillset__ic {
  width: 34px !important;
  height: 34px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--muted) !important;
  transition: color .4s var(--ease);
}
.skillset--compact .skillset__item:hover .skillset__ic { color: var(--text) !important; }
.skillset--compact .skillset__ic svg { width: 22px; height: 22px; }
.skillset--compact .skillset__t { font-size: 16.5px !important; font-weight: 500 !important; color: var(--text); }
/* subtle divider rhythm instead of card borders */
.skillset--compact {
  border-top: 0.5px solid var(--line);
  padding-top: 8px;
}

.skills__toolfloat { margin-top: clamp(40px, 4.6vw, 64px); }
.toolset__label { color: var(--faint); }

/* ---- AI Experiments: calmer cards (drop badge + kicker noise) ---- */
.exp-badge { display: none !important; }
.exp-card__kicker {
  color: var(--faint) !important;
  font-weight: 500;
}
.exp-card { border-color: var(--line) !important; }
.exp-card--feature { border-color: var(--line) !important; }
.exp-card__note { color: rgba(240, 237, 230, 0.66); }

/* =========================================================
   v27 — MY AI PLAYGROUND (bento)
   One section: a smaller "custom Gemini Gem" card (links out
   to the separate Gem project) + two bigger vibe-coded design
   cards, with a handwritten "I vibe-coded these" annotation.
   ========================================================= */
.pg__bento {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: auto;
  align-items: stretch;
  gap: clamp(14px, 1.5vw, 22px);
  padding-top: clamp(20px, 2.4vw, 36px);
}
.pg__intro {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pg__intro-note {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30ch;
}
.pg-vibe--diary { grid-column: 2 / 3; grid-row: 1 / 3; }
.pg-vibe--bloom { grid-column: 3 / 4; grid-row: 1 / 3; }
.pg-gem--2 { grid-column: 1 / 2; grid-row: 2 / 3; }
.pg-card {
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: var(--r-card);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.pg-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.4);
}

/* --- Gemini Gem card: tall, narrow (visually the smaller tile) --- */
.pg-gem {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2vw, 28px);
  background:
    radial-gradient(130% 80% at 100% 0%, rgba(168, 111, 214, 0.07), transparent 58%),
    var(--surface);
  border-color: rgba(168, 111, 214, 0.20);
}
.pg-gem--1 { grid-row: 1 / 2; }
.pg-gem__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.pg-gem__emoji { font-size: 22px; line-height: 1; filter: saturate(0.92); }
.pg-gem__chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #a86fd6;
  background: rgba(168, 111, 214, 0.10);
  border: 0.5px solid rgba(168, 111, 214, 0.28);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pg-gem__title {
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.14;
}
.pg-gem__note {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(240, 237, 230, 0.72);
  text-wrap: pretty;
}
.pg-gem__uses {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pg-gem__uses li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: rgba(240, 237, 230, 0.82);
  line-height: 1.4;
}
.pg-gem__uses li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: #a86fd6;
  opacity: 0.85;
}
.pg-gem__try {
  margin-top: auto;
  padding-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  transition: gap .35s var(--ease), color .35s var(--ease);
}
.pg-gem__try .arr { color: #a86fd6; transition: transform .35s var(--ease); }
.pg-gem__try:hover { gap: 12px; }

/* ===== Explorable gem-card looks (Tweak: data-gemcard) ===== */
/* A · "solid" — muted per-gem solid colour fill (default, not too bright) */
[data-gemcard="solid"] .pg-gem {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--gemc) 30%, transparent), transparent 62%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--gemc) 14%, transparent), transparent 60%),
    #0b0b0b;
  border-color: transparent;
}
[data-gemcard="solid"] .pg-gem__chip {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
}
[data-gemcard="solid"] .pg-gem__note { color: rgba(255, 255, 255, 0.80); }
[data-gemcard="solid"] .pg-gem__try .arr,
[data-gemcard="solid"] .pg-gem__title { color: #fff; }
[data-gemcard="solid"] .pg-gem:hover {
  border-color: color-mix(in srgb, var(--gemc) 80%, #fff);
}

/* B · "fun" — playful tinted card, dashed accent, springy lift, pill CTA */
[data-gemcard="fun"] .pg-gem {
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--gemc) 30%, transparent), transparent 60%),
    var(--surface-2);
  border: 1.5px dashed color-mix(in srgb, var(--gemc) 60%, var(--line-strong));
  border-radius: 26px;
}
[data-gemcard="fun"] .pg-gem--1 { transform: rotate(-1.1deg); }
[data-gemcard="fun"] .pg-gem--2 { transform: rotate(1.1deg); }
[data-gemcard="fun"] .pg-gem:hover { transform: rotate(0deg) translateY(-7px) scale(1.012); }
[data-gemcard="fun"] .pg-gem__emoji {
  font-size: 30px;
  filter: none;
  transition: transform .4s var(--ease);
}
[data-gemcard="fun"] .pg-gem:hover .pg-gem__emoji { transform: rotate(-12deg) scale(1.18); }
[data-gemcard="fun"] .pg-gem__chip {
  color: color-mix(in srgb, var(--gemc) 70%, #fff);
  background: color-mix(in srgb, var(--gemc) 18%, transparent);
  border-color: color-mix(in srgb, var(--gemc) 45%, transparent);
}
[data-gemcard="fun"] .pg-gem__try {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gemc) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--gemc) 50%, transparent);
  margin-top: 20px;
}
[data-gemcard="fun"] .pg-gem__try .arr { color: color-mix(in srgb, var(--gemc) 70%, #fff); }

/* C · "subtle" is the base style above (orange-tinted surface) */

/* --- Bloom Pot case study modal --- */
.bloom-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(8,7,12,0.72);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.bloom-overlay.open { opacity: 1; visibility: visible; }
.bloom-modal {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface, #16141d);
  border: 0.5px solid var(--line);
  border-radius: var(--r-lg, 20px);
  padding: 40px 0 36px;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.bloom-overlay.open .bloom-modal { transform: none; opacity: 1; }
.bloom-close { position: absolute; top: 20px; right: 20px; z-index: 2; }
.bloom-modal__body { padding: 0 40px; }
.bloom-modal__hero { margin: 0 -40px 24px; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0; }
.bloom-modal__shot { margin: 18px 0; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; border: 0.5px solid var(--line); }
.bloom-modal__head { margin-bottom: 18px; }
.bloom-h { font-family: var(--serif); font-size: 15px; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; margin: 28px 0 8px; }
.bloom-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 600; color: #a86fd6; }
.bloom-link .arr svg { width: 16px; height: 16px; }
.bloom-modal__title { font-family: var(--serif); font-size: 26px; line-height: 1.15; color: var(--text); margin: 10px 0 14px; }
.bloom-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.bloom-meta b { color: var(--text); font-weight: 600; margin-right: 4px; }
.bloom-live { display: inline-flex; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: #a86fd6; }
.bloom-live:hover { color: var(--text); }
.bloom-h { font-family: var(--serif); font-size: 14px; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; margin: 28px 0 8px; }
.bloom-hero-shot { margin: 20px 0 4px; text-align: center; }
.bloom-hero-shot img { max-width: 100%; width: 100%; border-radius: 14px; border: 0.5px solid var(--line); }
.bloom-solution-shot { margin: 18px 0; text-align: center; }
.bloom-solution-shot img { max-width: 240px; width: 100%; border-radius: 18px; border: 0.5px solid var(--line); }
.bloom-p { font-size: 15px; line-height: 1.62; color: rgba(240,237,230,0.82); margin: 16px 0; }
.bloom-p b { color: var(--text); font-weight: 600; }
.bloom-p--quote { padding-top: 16px; border-top: 0.5px solid var(--line); font-style: italic; color: var(--muted); }
.bloom-stats { display: flex; gap: 24px; padding: 16px 0; border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); }
.bloom-decisions { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.bloom-decision { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid #a86fd6; }
.bloom-decision b { font-size: 14.5px; color: var(--text); }
.bloom-decision span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 620px) {
  .bloom-modal__body { padding: 0 22px; }
  .bloom-modal__hero { margin: 0 -22px 20px; }
  .bloom-stats { flex-wrap: wrap; gap: 16px 24px; }
}
.bloom-shot-row { display: flex; gap: 16px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.bloom-shot-row img { max-width: 200px; width: 100%; border-radius: 16px; border: 0.5px solid var(--line); }



/* --- Vibe-coded design cards: bigger, image + text --- */
.pg-vibe {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pg-vibe__media {
  position: relative;
  background: linear-gradient(150deg, #1b1b18, #111110);
  border-right: 0;
  border-bottom: 0.5px solid var(--line);
  height: 340px;
  flex: 0 0 340px;
}
.pg-vibe__media image-slot { width: 100%; height: 100%; display: block; }
.pg-vibe__body {
  padding: clamp(22px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
}
.pg-vibe__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pg-vibe__kicker {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.pg-vibe__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #a86fd6;
  background: rgba(168, 111, 214, 0.10);
  border: 0.5px solid rgba(168, 111, 214, 0.26);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pg-vibe__title {
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.1;
}
.pg-vibe__note {
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(240, 237, 230, 0.72);
  text-wrap: pretty;
}
.pg-laws {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.pg-law {
  font-size: 12px;
  font-weight: 500;
  color: rgba(240, 237, 230, 0.8);
  background: rgba(255, 255, 255, 0.035);
  border: 0.5px solid var(--line-strong);
  padding: 5px 11px;
  border-radius: var(--r-pill);
}
.pg-vibe__link {
  margin-top: auto;
  padding-top: 20px;
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  transition: gap .35s var(--ease);
}
.pg-vibe__link .arr { color: #a86fd6; }
.pg-vibe__link:hover { gap: 12px; }

/* --- Handwritten "I vibe-coded these" annotation --- */
.pg__scribble {
  position: absolute;
  top: -6px;
  left: 31.5%;
  z-index: 5;
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 26px);
  color: #a86fd6;
  transform: rotate(-5deg);
  pointer-events: none;
}
.pg__arrow {
  width: clamp(46px, 4vw, 62px);
  height: auto;
  transform: scaleX(-1) rotate(8deg);
  margin-top: 4px;
  opacity: 0.9;
}

@media (max-width: 960px) {
  .pg__bento { grid-template-columns: 1fr; grid-auto-rows: auto; padding-top: 8px; }
  .pg__intro, .pg-gem, .pg-vibe--diary, .pg-vibe--bloom { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .pg__scribble { display: none; }
}
@media (max-width: 620px) {
  .pg-vibe { grid-template-columns: 1fr; }
  .pg-vibe__media { border-right: 0; border-bottom: 0.5px solid var(--line); height: 240px; flex: 0 0 240px; }
}

/* Motion reels keep the two verticals side-by-side as the viewport narrows,
   stacking to one column only on small phones (overrides the generic 1fr rule above). */
@media (max-width: 1000px) { .motion__strip { max-width: 90%; } }
@media (max-width: 480px) { .motion__strip { grid-template-columns: 1fr; max-width: 320px; } .motion-card:nth-child(3) { grid-column: auto; } }

/* =========================================================
   WORDS THAT MAKE MY DAY — testimonials v2
   single-row, varied-width photo cards, tilted, moving glare
   ========================================================= */
.words-sec { position: relative; overflow: hidden; }

/* Moving glare — soft warm light drifting behind the cards */
.words__glare {
  position: absolute;
  z-index: 0;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,111,214,0.18), rgba(168,111,214,0.05) 45%, transparent 68%);
  filter: blur(46px);
  pointer-events: none;
  top: -180px; left: -120px;
  will-change: transform;
  animation: wordsGlare 22s var(--ease) infinite alternate;
}
.words__glare--2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(120,150,255,0.10), transparent 66%);
  top: auto; bottom: -200px; left: auto; right: -100px;
  animation: wordsGlare2 26s var(--ease) infinite alternate;
  animation-delay: -6s;
}
@keyframes wordsGlare {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(58vw, 120px); }
  100% { transform: translate(34vw, -60px); }
}
@keyframes wordsGlare2 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-46vw, -140px); }
  100% { transform: translate(-22vw, 40px); }
}

/* Heading + quirky handwritten note */
.words__head { position: relative; z-index: 2; margin-bottom: 40px; }
.words__title { margin-top: 14px; }
.words__note {
  position: absolute;
  top: 6px; left: clamp(280px, 34vw, 460px);
  font-family: "Caveat", cursive;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  transform: rotate(-4deg);
  white-space: nowrap;
}
.words__note-arrow {
  display: block;
  width: 58px; height: auto;
  margin: 6px 0 0 70px;
  color: var(--faint);
}
@media (max-width: 760px) {
  .words__note { display: none; }
}

/* Cards laid out in a row (wraps on narrow viewports) */
.words__scroller {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 24px;
  padding: 18px 4px 24px;
}

.qslide { display: flex; }

/* qcard = slightly tilted dark-grey text card */
.qcard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px 28px 26px;
  border-radius: 20px;
  background: #1b1b1b;
  border: 0.5px solid rgba(240,237,230,0.10);
  box-shadow: 0 22px 54px rgba(0,0,0,0.42);
  transform: rotate(var(--rot, 0deg));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.qcard:hover {
  transform: rotate(0deg) translateY(-8px);
  box-shadow: 0 34px 72px rgba(0,0,0,0.52);
  border-color: rgba(240,237,230,0.2);
  background: #1f1f1f;
  z-index: 5;
}

.qcard__mark { color: var(--accent); line-height: 1; margin-bottom: 16px; }
.qcard__mark svg { width: 28px; height: auto; display: block; opacity: 0.9; }

.qcard__text {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: rgba(240,237,230,0.84);
  text-wrap: pretty;
  margin: 0 0 26px;
  flex: 1;
}

.qcard__person { display: flex; align-items: center; gap: 13px; }
.qcard__ava {
  flex: none;
  width: 50px; height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 0.5px solid rgba(240,237,230,0.18);
}
.qcard__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
}
.qcard__role { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

@media (max-width: 1000px) {
  .words__scroller { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .words__scroller { grid-template-columns: 1fr; }
  .qcard, .qcard[style] { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .words__glare, .words__glare--2 { animation: none; }
}

/* =========================================================
   v75 — TESTIMONIAL REWORK (2×2 glow cards) · moving bg
   gradient · Framer-style case studies w/ compact chips
   ========================================================= */

/* ---- Moving blurred gradient behind testimonials ---- */
.words__bg {
  position: absolute;
  z-index: 0;
  left: 50%; top: 50%;
  width: 85%;
  height: 480px;
  display: block;
  transform: translate(-50%, -50%);
  border-radius: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0.6;
  background: linear-gradient(102deg,
    #5a2f8a 0%, #4a2c7e 16%, #6b3c54 38%,
    #8a5734 56%, #6a3f6e 74%, #4a2f88 90%, #3f2b80 100%);
  background-size: 200% 200%;
  -webkit-filter: blur(59px);
  filter: blur(59px);
  animation: wordsBgDrift 20s ease-in-out infinite alternate;
}
@keyframes wordsBgDrift {
  0%   { background-position: 0% 50%;   transform: translate(-53%, -50%) scale(1); }
  50%  { background-position: 100% 50%; transform: translate(-47%, -53%) scale(1.07); }
  100% { background-position: 35% 50%;  transform: translate(-50%, -47%) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .words__bg { animation: none; }
}

/* ---- Testimonial grid: 2 across, big glow cards ---- */
.words__scroller {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 1.9vw, 30px);
  padding: 22px 2px 24px;
}
.qslide { display: block; }

.qcard {
  transform: none;
  background: #141414;
  border: 0.5px solid rgba(240,237,230,0.08);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.46);
  padding: clamp(34px, 3.2vw, 50px);
  overflow: hidden;
}
.qcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  transition: opacity .55s var(--ease);
}
.qcard > * { position: relative; z-index: 1; }

/* per-card coloured glow, echoing the reference */
.qslide:nth-child(1) .qcard::before {
  background: radial-gradient(125% 95% at 32% 108%, rgba(168,72,176,0.46), rgba(120,52,150,0.16) 42%, transparent 70%);
}
.qslide:nth-child(2) .qcard::before {
  background: radial-gradient(120% 100% at 102% 104%, rgba(126,92,176,0.24), transparent 58%);
}
.qslide:nth-child(3) .qcard::before {
  background: radial-gradient(125% 100% at 22% 108%, rgba(176,74,118,0.38), rgba(112,58,142,0.16) 46%, transparent 72%);
}
.qslide:nth-child(4) .qcard::before {
  background: radial-gradient(120% 100% at 104% 70%, rgba(168,92,96,0.30), transparent 60%);
}

.qcard:hover {
  transform: translateY(-7px);
  background: #161616;
  border-color: rgba(240,237,230,0.16);
  box-shadow: 0 38px 84px rgba(0,0,0,0.56);
}
.qcard:hover::before { opacity: 1.18; }

/* purple "99" mark */
.qcard__mark { color: #9587CE; margin-bottom: 24px; }
.qcard__mark svg { width: 40px; height: auto; opacity: 1; }

.qcard__text {
  font-size: clamp(16.5px, 1.25vw, 19.5px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(240,237,230,0.80);
  margin: 0 0 30px;
}
.qcard__person { gap: 0; }
.qcard__name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #fff;
}
.qcard__role { font-size: 14px; color: var(--muted); margin-top: 4px; }

@media (max-width: 760px) {
  .words__scroller { grid-template-columns: 1fr; }
}

/* =========================================================
   v75 — Case studies: Framer-style stacked cards
   (full-width cover on top, info below, compact DM Sans chips)
   ========================================================= */
.cases__grid { gap: clamp(28px, 3.4vw, 52px); }

.case-card,
.case-card:nth-child(even) {
  flex-direction: column !important;
  align-items: stretch;
  background: #0e0e0e;
  border: 0.5px solid rgba(240,237,230,0.07);
  border-radius: 26px;
  padding: clamp(12px, 1vw, 16px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.42);
  overflow: hidden;
}
.case-card:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--ac) 30%, transparent);
  box-shadow: 0 40px 90px color-mix(in srgb, var(--ac) 18%, rgba(0,0,0,0.55));
}

.case-card__cover {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 10;
  align-self: stretch;
  border-radius: 16px;
  overflow: hidden;
}

.case-card__body {
  width: 100%;
  padding: clamp(22px, 2.2vw, 34px) clamp(14px, 1.4vw, 22px) clamp(10px, 1vw, 14px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--text);
}

/* compact DM Sans chips */
.case-card .case-card__tags { gap: 7px; margin-bottom: 16px; }
.case-card .tag {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ac) 12%, transparent);
  color: color-mix(in srgb, var(--ac) 52%, var(--text));
  border: 0.5px solid color-mix(in srgb, var(--ac) 24%, transparent);
}
.case-card:hover .tag { background: color-mix(in srgb, var(--ac) 18%, transparent); }

.case-card__title { font-size: clamp(27px, 2.8vw, 40px) !important; line-height: 1.06; letter-spacing: -0.028em; }
.case-card__desc {
  margin-top: 14px;
  max-width: 60ch;
  font-size: clamp(15.5px, 1.15vw, 18px);
  line-height: 1.5;
  color: rgba(240,237,230,0.55);
}
.case-card__meta { margin-top: 26px; }
.case-card__link { margin-top: 26px; }

@media (max-width: 760px) {
  .case-card, .case-card:nth-child(even) { flex-direction: column; }
  .case-card__cover { aspect-ratio: 16 / 11; min-height: 0; }
}

/* =========================================================
   v76 — GREY/WHITE HOMEPAGE · global drifting glare (fixed,
   consistent on scroll) · glassmorphic cards · purple
   case-study section · 2-up stacking case grid · clean
   Heroicon arrows
   ========================================================= */

/* ---- Homepage: background stays BLACK. Just a pinch of colour — a
   soft multi-hue gradient blob drifting through the fixed background
   layer, its blur showing through the glassmorphic cards. ---- */
body.home {
  --cs-purple: #A78BDB;                    /* case-study purple */
  --glass: rgba(255,255,255,0.05);
  --glass-line: rgba(255,255,255,0.13);
}

/* Elongated tube/smear — purple + pink + orange, rotates as it travels */
body.home .bg-glare {
  position: absolute;
  left: 50%; top: 50%;
  width: 52vw; height: 16vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(90deg,
    rgba(140,72,210,0.85),
    rgba(200,70,140,0.78),
    rgba(225,115,55,0.72),
    rgba(100,58,195,0.80));
  -webkit-filter: blur(62px);
  filter: blur(62px);
  opacity: 0.52;
  animation: siteGlare 34s ease-in-out infinite;
}
@keyframes siteGlare {
  0%   { transform: translate(-50%,-50%) translate(-32vw,-28vh) rotate(-8deg)  scale(1); }
  22%  { transform: translate(-50%,-50%) translate(28vw,-22vh)  rotate(14deg)  scale(1.12); }
  46%  { transform: translate(-50%,-50%) translate(20vw, 27vh)  rotate(-6deg)  scale(1.05); }
  70%  { transform: translate(-50%,-50%) translate(-26vw, 18vh) rotate(20deg)  scale(1.10); }
  100% { transform: translate(-50%,-50%) translate(-32vw,-28vh) rotate(-8deg)  scale(1); }
}
@media (prefers-reduced-motion: reduce) { body.home .bg-glare { animation: none; } }

/* remove the dotted background grid (+ its cursor lens) */
body.home .bg-dots,
body.home .bg-dotspot,
body.home .bg-dothot { display: none !important; }

/* ---- Clean Heroicon arrows (replace glyphs) ---- */
.arr { display: inline-flex; align-items: center; }
.arr svg { width: 1.05em; height: 1.05em; display: block; }
.btn .arr svg, .case-card__link .arr svg { width: 1em; height: 1em; }

/* =========================================================
   Glassmorphic testimonials — grey/white, pick up the glare
   ========================================================= */
body.home .words__bg { display: none; }           /* drop purple section glow; global glare shows through */
body.home .words-sec { overflow: visible; }

body.home .qcard {
  background: rgba(26, 24, 34, 0.88);         /* mostly solid dark grey, subtle glass */
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  border: 0.5px solid rgba(255,255,255,0.09);
  box-shadow: 0 24px 64px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.07);
}
body.home .qcard::before { display: none; }        /* remove per-card purple glow */
body.home .qcard:hover {
  transform: translateY(-7px);
  background: rgba(32, 30, 42, 0.94);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 38px 84px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.09);
}
body.home .qcard__mark { color: #B9A6EA; }

/* person row + avatar image */
body.home .qcard__person { gap: 14px; align-items: center; }
body.home .qcard__ava {
  width: 54px; height: 54px;
  border: 0.5px solid rgba(255,255,255,0.20);
}
body.home .qcard__ava image-slot { width: 100%; height: 100%; display: block; }
body.home .qcard__name { color: #fff; }

/* =========================================================
   Case studies — PURPLE accent · 2-up smaller cards · glass ·
   rounded pills · calm "just move" hover · stacking reveal
   ========================================================= */
body.home .cases__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
}
@media (max-width: 820px) { body.home .cases__grid { grid-template-columns: 1fr; } }

body.home .case-card,
body.home .case-card:nth-child(even) {
  --ac: var(--cs-purple);
  background: #111111;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0.5px solid rgba(255,255,255,0.07);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}
/* calm hover: just lifts, neutral shadow, no coloured glow / outline */
body.home .case-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 30px 68px rgba(0,0,0,0.55);
}
/* purple-tinted cover */
body.home .case-card__cover {
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(120% 120% at 78% 16%, color-mix(in srgb, var(--cs-purple) 44%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--cs-purple) 26%, #16121d), #0c0a12);
}
/* smaller type so two read comfortably in a frame */
body.home .case-card__body { padding: clamp(18px,1.7vw,26px) clamp(14px,1.3vw,20px) clamp(10px,1vw,14px); display: flex; flex-direction: column; flex: 1; }
body.home .case-card__link { margin-top: auto; }
body.home .case-card__title { font-size: clamp(20px, 1.75vw, 27px) !important; letter-spacing: -0.026em; }
body.home .case-card__desc { font-size: clamp(13.5px, 1vw, 15px); margin-top: 10px; max-width: 42ch; }
body.home .case-card__meta { margin-top: 18px; gap: 12px 18px; }
body.home .case-card__role { font-size: 13px; }
body.home .case-card__impact { font-size: clamp(14px,1vw,15.5px); color: var(--cs-purple) !important; }
/* rounded pills, purple */
body.home .case-card .tag {
  border-radius: 100px;
  padding: 5px 13px;
  font-size: 11.5px;
  background: rgba(200,198,215,0.10);     /* light grey, no purple wash */
  color: var(--cs-purple);                /* purple text only */
  border: 0.5px solid rgba(200,198,215,0.16);
}
body.home .case-card:hover .tag { background: rgba(200,198,215,0.16); }
/* CTA: keep cream pill but purple is the section colour; arrow dark for contrast */
body.home .case-card__link { margin-top: auto; padding: 11px 19px; font-size: 14px; }
body.home .case-card__link .arr { color: #14110D !important; }

/* stacking reveal: cards rise & settle one after another */
body.home .cases__grid > * { transform: translateY(64px) scale(0.93); }
body.home .cases__grid.in > * { transform: none; transition: opacity 1s var(--ease), transform 1.05s var(--ease); }

/* Nav: always pill on homepage — expands on hover */
body.home .nav .nav__shell {
  max-width: max-content;
  padding: 7px 8px 7px 20px;
  background: rgba(12,11,10,0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--line);
  box-shadow: 0 14px 38px rgba(0,0,0,0.42);
}
body.home .nav:hover .nav__shell { padding: 8px 8px 8px 16px; }
body.home .nav .nav__links {
  opacity: 0; max-width: 0;
  padding-left: 0; padding-right: 0;
  border-color: transparent; overflow: hidden;
  transform: translateX(8px) scale(0.98); pointer-events: none;
  transition: opacity .4s var(--ease), max-width .7s var(--ease),
    padding .6s var(--ease), transform .6s var(--ease);
}
body.home .nav:hover .nav__links,
body.home .nav.scrolled:hover .nav__links {
  opacity: 1; max-width: 760px; pointer-events: auto;
  padding-left: clamp(10px,1.2vw,16px); padding-right: clamp(10px,1.2vw,16px);
  border-color: var(--line); transform: none;
}

/* ---- Standardised pills: dark gray, no border, purple text ---- */
body.home .tag,
body.home .pg-law,
body.home .pg-vibe__tag {
  background: #20202a !important;
  border: none !important;
  color: var(--cs-purple) !important;
  border-radius: 100px;
}
body.home .pg-gem__chip {
  background: rgba(255,255,255,0.12) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 100px;
}
/* pill hover: rising fill wipe from bottom */
body.home .tag { position: relative; overflow: hidden; transition: transform .35s var(--ease); }
body.home .tag::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(168,111,214,0.20);
  clip-path: inset(100% 0 0 0 round 100px);
  transition: clip-path .35s var(--ease);
}
body.home .tag:hover::before { clip-path: inset(0 0 0 0 round 100px); }
body.home .tag:hover { transform: translateY(-2px) rotate(0deg); }

/* ---- Button hover: rising fill wipe from bottom ---- */
body.home .btn { overflow: hidden; position: relative; }
body.home .btn::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.10);
  clip-path: inset(100% 0 0 0 round 100px);
  transition: clip-path .38s var(--ease);
  z-index: 0; border-radius: inherit; pointer-events: none;
}
body.home .btn:hover::before { clip-path: inset(0 0 0 0 round 100px); }
body.home .btn > * { position: relative; z-index: 1; }

/* Playground gems keep their colour — homepage stays colourful. */

/* Contact section: no box outline, reduced padding */
body.home .contact-sec { padding-block: clamp(30px, 4vw, 50px); }
body.home .contact__inner {
  background: none;
  border: none;
  box-shadow: none;
  padding: clamp(12px, 1.6vw, 20px) 0;
  text-align: center;
}
body.home .contact__inner .contact__actions { justify-content: center; margin-top: 28px; }
body.home #motion.section-pad { padding-bottom: calc(var(--section-gap) * 0.5); }
body.home .contact__inner::before { display: none; }  /* no warm glow blob */
.copy-email-btn { cursor: pointer; font-family: inherit; font-size: inherit; }
body.home .hero__greet {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 0 0 0;
}
body.home .hero__greet:hover {
  border-color: transparent;
  box-shadow: none;
}
body.home .hero__greet-ring { display: none; }
body.home .hero__greet-av image-slot { border: none; }



/* =========================================================
   v91 — Nav expanded default · white pills · dark qcard · no handwriting
   ========================================================= */

/* NAV — single definitive block (overrides all earlier nav rules)
   • Default (page top): expanded dark pill, links visible, NO inner pill
   • Scrolled: compact pill (logo + resume), links hidden
   • Scrolled + hover: links re-appear in same pill
   • Height is always 52px so compact ≡ expanded in size
*/
body.home .nav .nav__shell {
  background: rgba(10,10,10,0.94) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border: 0.5px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.52) !important;
  max-width: max-content !important;
  padding: 7px 8px 7px 16px !important;
  min-height: 52px !important;
  height: 52px !important;
}
/* nav__links: flat — no inner pill border/bg at all, smooth transitions */
body.home .nav .nav__links {
  background: none !important;
  border: none !important;
  transition: opacity .4s var(--ease), max-width .65s var(--ease),
              padding .5s var(--ease), transform .5s var(--ease) !important;
}
/* Default (not scrolled): links fully visible */
body.home .nav:not(.scrolled) .nav__links {
  opacity: 1 !important;
  max-width: 760px !important;
  padding: 0 8px !important;
  transform: none !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
/* Scrolled: links collapse */
body.home .nav.scrolled:not(:hover) .nav__links {
  opacity: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: translateX(6px) !important;
}
/* Scrolled + hover: links re-appear */
body.home .nav.scrolled:hover .nav__links {
  opacity: 1 !important;
  max-width: 760px !important;
  padding: 0 8px !important;
  transform: none !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* Pills (tags, pg-law, tl-tag): darker gray + white text site-wide */
body.home .tag,
body.home .pg-law,
body.home .pg-vibe__tag,
body.home .tl-tag {
  background: #252530 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 100px;
}
body.home .case-card .tag,
body.home .case-card:hover .tag { background: #252530 !important; }

/* Copy email button: dark text on cream bg */
body.home .copy-email-btn {
  background: #F4F1EA !important;
  color: #14110D !important;
}
/* Icon rides the same difference-blend as the label: white on default (over dark),
   auto-inverts to black on hover (over the rising white fill). */
body.home .copy-email-btn svg { color: #ffffff !important; }

/* Testimonial qcard: #111 + alternating tilt */
body.home .qcard {
  background: #111113 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.home .qslide:nth-child(odd) .qcard  { transform: rotate(-1.8deg); }
body.home .qslide:nth-child(even) .qcard { transform: rotate(1.6deg); }
body.home .qcard:hover { transform: translateY(-7px) rotate(0deg) !important; }

/* Remove Caveat / handwriting from font loads */
body.home .pg__scribble,
body.home .words__note { display: none !important; }

/* =========================================================
   v92 — USER UPDATES
   Framer hover · circle arrows · #1c1c1c grey pills ·
   DM Sans read-time badge · flat testimonials · consistent nav
   ========================================================= */

/* ---- Framer-style button hover: fill slides from bottom ---- */
body.home .btn { overflow: hidden !important; position: relative; }
body.home .btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: rgba(255,255,255,0.09) !important;
  clip-path: none !important;
  transform: translateY(100%) !important;
  transition: transform .42s cubic-bezier(0.22,1,0.36,1) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.home .btn:hover::before {
  transform: translateY(0) !important;
  clip-path: none !important;
}
body.home .btn > * { position: relative; z-index: 1; }
body.home .btn:hover { transform: translateY(-2px) !important; }
.btn .arr svg { width: 22px !important; height: 22px !important; }

/* ---- Case study link: circle arrow button only (no text) ---- */
.case-card .case-card__link,
body.home .case-card .case-card__link {
  margin-top: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  font-size: 0 !important;
  filter: none !important;
}
.case-card .case-card__link:hover,
body.home .case-card .case-card__link:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.arr-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(240,237,230,0.22);
  color: rgba(240,237,230,0.65);
  background: transparent;
  transition: border-color .4s var(--ease), color .4s var(--ease),
              transform .4s var(--ease), background .4s var(--ease);
  flex: none;
}
.arr-circle svg { width: 26px; height: 26px; display: block; }
.case-card:hover .arr-circle,
body.home .case-card:hover .arr-circle {
  border-color: rgba(240,237,230,0.9);
  color: #ffffff;
  transform: rotate(-45deg);
  background: #14110D;
}

/* ---- Stretched link: full card is clickable ---- */
.case-card { position: relative; }
body.home .case-card .case-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
body.home .case-card .arr-circle { position: relative; z-index: 2; }
.case-card__cover[data-read]::after {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
}

/* ---- All pills/tags: uniform #1c1c1c grey ---- */
.tag,
body.home .tag,
body.home .case-card .tag,
body.home .case-card:hover .tag,
body.home .pg-law,
body.home .pg-vibe__tag,
body.home .tl-tag {
  background: #1c1c1c !important;
  border: none !important;
  color: rgba(240,237,230,0.68) !important;
  border-radius: 100px !important;
}
body.home .tag::before { display: none !important; }
body.home .tag:hover,
.tag:hover { transform: none !important; color: rgba(240,237,230,0.90) !important; }

/* ---- Testimonials: flat, no tilt ---- */
body.home .qslide:nth-child(odd) .qcard,
body.home .qslide:nth-child(even) .qcard { transform: none !important; }
body.home .qcard {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              border-color .45s var(--ease) !important;
}
/* ---- 3D pointer-follow tilt: testimonials & achievement cards ---- */
.ach-card.is-tilting {
  transform: perspective(900px) rotateX(var(--tly, 0deg)) rotateY(var(--tlx, 0deg)) translateY(-8px) scale(1.015) !important;
  transition: transform .08s linear !important;
}
body.home .qcard:hover {
  transform: translateY(-9px) scale(1.018) !important;
  box-shadow: 0 28px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(168,111,214,0.18) !important;
}
/* ---- Colourful scattered UX-law pills: Gemini gem only ---- */
body.home .pg-gem .pg-law {
  background: color-mix(in srgb, var(--lc, #A86FD6) 55%, #fff 45%) !important;
  color: #14110d !important;
  border: none !important;
  border-radius: 100px !important;
  transform: rotate(var(--r, 0deg));
  font-weight: 600 !important;
  white-space: nowrap !important;
  transition: transform .3s var(--ease);
}
body.home .pg-law:hover { transform: rotate(0deg) translateY(-2px); }
.contact__title--merged { text-align: center; max-width: none; margin: 0 auto; }
.contact__title--merged em { font-style: normal; color: var(--accent); }

/* ---- Testimonial cards: 3D flip-in on scroll ---- */
.words__scroller[data-reveal-stagger] > .qslide { perspective: 1400px; }
.words__scroller[data-reveal-stagger] > .qslide .qcard {
  opacity: 0 !important;
  transform: rotateX(-75deg) !important;
  transform-origin: bottom center;
}
.words__scroller[data-reveal-stagger].in > .qslide .qcard {
  opacity: 1 !important;
  transform: rotateX(0deg) !important;
  transition: opacity .7s var(--ease), transform .95s cubic-bezier(.22,.9,.28,1) !important;
}
body.home .words-sec .words__scroller .qcard.is-tilting {
  transform: perspective(900px) rotateX(var(--tly, 0deg)) rotateY(var(--tlx, 0deg)) translateY(-9px) scale(1.02) !important;
  transition: transform .08s linear !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(168,111,214,0.18) !important;
}

/* nav v92+ — ghost button only; nav behavior handled in v91 block above */

/* =========================================================
   v93 — cred strip minimal · button fill anim · dm sans greet
   ========================================================= */

/* ---- Cred strip: icon + text only, no pill shape ---- */
body.home .cred {
  border: none !important;
  background: none !important;
  padding: 0 6px !important;
  border-radius: 0 !important;
  gap: 8px !important;
}
body.home .cred:hover { border-color: transparent !important; background: none !important; }
body.home .cred__ic {
  background: none !important;
  width: 24px !important; height: 24px !important;
  color: var(--accent) !important;
}
body.home .cred__ic svg { width: 21px !important; height: 21px !important; }

/* ---- Button hover fill: visible colours from bottom ---- */
/* ===== BUTTONS: gradient fill-from-bottom — reliable, no ::before timing ===== */

/* ===== BUTTONS: ::before translateY — clean fill, zero artefacts ===== */

/* Set fill colours per type (::before base already has translateY(100%) + transition) */
body.home .btn--primary::before { display: block !important; background: #a86fd6 !important; }
body.home .btn--ghost::before   { display: block !important; background: #ffffff !important; }

/* Kill icon hop */
body.home .btn:hover .arr { animation: none !important; }

/* PRIMARY — cream bg, purple slides up, text → white after fill covers */
body.home .btn--primary {
  background: #F4F1EA !important;
  color: #14110D !important;
  transition: color .42s cubic-bezier(0.22,1,0.36,1),
              transform .4s var(--ease),
              box-shadow .4s var(--ease) !important;
}
body.home .btn--primary:hover { color: #fff !important; filter: none !important; }
body.home .btn--primary:hover .arr,
body.home .btn--primary:hover .arr svg,
body.home .btn--primary:hover svg { color: #fff !important; }

/* Label sits ABOVE the rising purple fill (bare text nodes paint under a
   z-index:0 ::before, which was hiding the words on hover). White on hover. */
body.home .btn--primary .btn-label {
  position: relative;
  z-index: 1;
  transition: color .42s cubic-bezier(0.22,1,0.36,1) !important;
}
body.home .btn--primary:hover .btn-label { color: #fff !important; }

/* GHOST — transparent bg, white slides up, text → dark after fill covers */
body.home .btn--ghost {
  background: transparent !important;
  color: var(--text) !important;
  transition: color .1s ease .26s,
              transform .4s var(--ease),
              box-shadow .4s var(--ease),
              border-color .3s ease !important;
}
body.home .btn--ghost:hover { border-color: transparent !important; color: #14110D !important; }
body.home .btn--ghost:hover .arr,
body.home .btn--ghost:hover .arr svg { color: #14110D !important; }

/* Ghost label: difference-blend so text auto-inverts against the rising white fill.
   White over transparent (dark page) → white; white over the white fill → black.
   Guarantees readability at EVERY frame of the animation. */
body.home .btn--ghost { isolation: isolate; }
body.home .btn--ghost .btn-blend {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
  color: #ffffff !important;
  mix-blend-mode: difference;
}

/* ---- Hero greeting: DM Sans ---- */
body.home .hero__greet-text { font-family: "DM Sans", system-ui, sans-serif !important; }

/* ---- Copy toast ---- */
.copy-toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(24px);
  opacity: 0;
  pointer-events: none;
  background: #1a1a1a;
  color: #f0ede6;
  border: 0.5px solid rgba(240,237,230,0.15);
  border-radius: 100px;
  padding: 12px 22px 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500;
  font-family: "DM Sans", sans-serif;
  z-index: 9999;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
}
.copy-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Case card: arrow breathing room + custom hover cursor label */
body.home .case-card__link { padding-top: 16px; }
.case-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; padding: 7px 13px; border-radius: 999px; background: var(--accent); color: #14110D; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transition: opacity .18s var(--ease); }
.case-cursor.is-on { opacity: 1; }
@media (hover: hover) { #work .case-card, #work .case-card a { cursor: none; } }

/* TL;DR: centred head, right-aligned close, work summary list */
.tldr-modal__head { justify-content: flex-end; }
.qi-intro { text-align: center; }
.qi-simple__work { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.qi-simple__work li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.qi-simple__work li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.qi-simple__work b { color: var(--text); font-weight: 600; }
.tldr-modal__foot { justify-content: center; }

/* Playground bento: even gutters, roomier cards, wider intro note */
.pg__bento { gap: clamp(20px, 2.2vw, 30px); }
.pg__intro-note { max-width: 40ch; }

/* TL;DR: stronger hierarchy, larger type, skill pills */
.tldr-modal__title { font-size: clamp(28px, 3vw, 38px); }
.qi-sub { font-size: 16px; }
.qi-simple { max-width: 560px; gap: 14px; }
.qi-simple__name { font-size: 27px; }
.qi-simple__role { font-size: 14px; letter-spacing: 0.01em; }
.qi-simple__pitch { font-size: 16px; line-height: 1.65; margin: 0; }
.qi-simple__skills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.qi-skill { padding: 7px 13px; border-radius: 999px; background: #0d0d0d; border: 0.5px solid var(--line-strong); color: var(--text); font-size: 12.5px; font-weight: 500; }
.qi-simple__lbl { align-self: stretch; margin-top: 12px; padding-top: 16px; border-top: 0.5px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-align: left; }
.qi-simple__work li { font-size: 15px; }
.qi-simple__status { font-size: 14.5px; margin-top: 12px; padding-top: 16px; border-top: 0.5px solid var(--line); align-self: stretch; justify-content: center; }

/* Playground: gem column matches its fixed card width so gutters read equal */
.pg__bento { grid-template-columns: 346px 1fr 1fr; }
@media (max-width: 1100px) { .pg__bento { grid-template-columns: 1fr 1fr 1fr; } }
/* Case cards: more clearance above the pinned arrow */
body.home .case-card__link { padding-top: 22px; }
/* Achievements: identical internal rhythm across the three cards */
.ach-card__body { display: flex; flex-direction: column; gap: 8px; }
.ach-card__title, .ach-card__org, .ach-card__status { margin: 0; }

/* TL;DR head: visible close, centred intro, divider before the body */
.tldr-close { color: #fff; border-color: rgba(255,255,255,0.35); }
.tldr-close:hover { color: #fff; border-color: var(--accent); }
.qi-intro { text-align: center; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 0.5px solid var(--line); }
.qi-intro .tldr-modal__title, .qi-intro .qi-sub { margin-left: auto; margin-right: auto; }
.qi-sub { max-width: 42ch; }
.qi-simple__name { font-size: 34px; line-height: 1.15; margin-top: 0; }

/* Case-card arrow: clearance above (beats the earlier padding:0 !important reset) */
body.home .case-card .case-card__link { padding-top: 22px !important; }

/* Achievements: full-width rows — image left, text right */
.ach__grid { grid-template-columns: 1fr; gap: clamp(18px, 2vw, 26px); }
.ach-card { padding: 0; }
.ach-card__inner { flex-direction: row; align-items: stretch; }
.ach-card__shot { flex: 0 0 42%; height: auto; min-height: 300px; margin: 16px 0 16px 16px; }
.ach-card__body { flex: 1; justify-content: center; padding: clamp(26px, 3vw, 44px); gap: 10px; }
.ach-card__title { font-size: clamp(24px, 2.4vw, 34px); }
.ach-card__org { font-size: clamp(15px, 1.2vw, 17px); max-width: 52ch; }
.ach-card__status { font-size: 13px; }
.ach-card__status svg { width: 17px; height: 17px; }
.ach-card:hover { transform: translateY(-5px); }
@media (max-width: 760px) {
  .ach-card__inner { flex-direction: column; }
  .ach-card__shot { flex: none; min-height: 220px; margin: 14px 14px 0; }
}

/* Achievement rows: fixed shot height so all three rows match */
.ach-card__shot { height: clamp(260px, 26vw, 340px); min-height: 0; }
.ach-card__shot > img:not(.ach-card__award-logo), .ach-card__shot image-slot { height: 100%; object-fit: cover; }
@media (max-width: 760px) { .ach-card__shot { height: 240px; } }

/* Achievement rows: top-aligned text, compact chunky status pill, roomier copy */
.ach-card__body { justify-content: flex-start; padding-top: clamp(30px, 3.4vw, 48px); gap: 0; }
.ach-card__title { margin: 0; }
.ach-card__status { display: inline-flex; width: fit-content; align-self: flex-start; margin-top: 16px; padding: 9px 16px; border-radius: 999px; background: rgba(232,200,134,0.12); border: 0.5px solid rgba(232,200,134,0.4); font-size: 12.5px; line-height: 1; }
.ach-card__org { margin-top: 20px; line-height: 1.6; }
.ach-card__award-logo--left { transform: scale(1.5); transform-origin: top left; }

/* Achievement status pill: neutral dark, no gold tint */
.ach-card__status { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--text); }
.ach-card__status svg { color: var(--text); opacity: 0.9; }
/* Third card: single blue wash instead of blue + green */
.ach-card:nth-child(3) { background: radial-gradient(130% 90% at 20% 100%, rgba(90,139,245,0.18), transparent 58%), radial-gradient(120% 90% at 100% 0%, rgba(90,139,245,0.10), transparent 55%), var(--surface) !important; }

/* Achievement cards: richer, evenly-lit washes on all three */
.ach-card:nth-child(1) { background: radial-gradient(130% 90% at 18% 100%, rgba(232,200,134,0.26), transparent 60%), radial-gradient(120% 90% at 100% 0%, rgba(232,200,134,0.14), transparent 58%), var(--surface) !important; }
.ach-card:nth-child(2) { background: radial-gradient(130% 90% at 18% 100%, rgba(168,111,214,0.26), transparent 60%), radial-gradient(120% 90% at 100% 0%, rgba(168,111,214,0.14), transparent 58%), var(--surface) !important; }
.ach-card:nth-child(3) { background: radial-gradient(130% 90% at 18% 100%, rgba(90,139,245,0.26), transparent 60%), radial-gradient(120% 90% at 100% 0%, rgba(90,139,245,0.14), transparent 58%), var(--surface) !important; }

/* =========================================================
   MOBILE PASS — neutralise fixed inline sizes, stack sections
   ========================================================= */
@media (max-width: 900px){
  .pg__bento{grid-template-columns:1fr!important}
  .pg__intro,.pg-gem,.pg-gem--1,.pg-gem--2,.pg-vibe,.pg-vibe--diary,.pg-vibe--bloom{grid-column:1/-1!important;grid-row:auto!important;width:auto!important;max-width:none!important;transform:none!important}
}
@media (max-width: 760px){
  html,body{overflow-x:hidden}
  .wrap{padding-left:20px;padding-right:20px}
  .hero__title[style],.section-title[style],.contact__title[style],.hero__sub[style]{width:auto!important;height:auto!important;max-width:100%!important}
  .hero__title,.hero__title[style]{font-size:clamp(32px,8.8vw,44px)!important;line-height:1.06!important}
  .section-title,.section-title[style]{font-size:clamp(28px,7.6vw,38px)!important;line-height:1.1!important}
  .contact__title,.contact__title[style]{font-size:clamp(28px,7.4vw,36px)!important;line-height:1.14!important}
  .hero__title br{display:none}
  .hero__inner{padding-top:96px}
  .hero__sub{font-size:15.5px;line-height:1.62}
  .hero__greet{max-width:100%;flex-wrap:nowrap}
  .hero__greet-av,.hero__greet-av[style]{width:40px!important;height:40px!important}
  .cred-strip{flex-wrap:wrap;gap:8px;justify-content:flex-start}
  .cred{font-size:12.5px;padding:7px 12px 7px 8px}
  .hero__actions{flex-direction:column;align-items:stretch;width:100%;gap:12px}
  .hero__actions .btn{width:100%;justify-content:center}
  .hero__creds{display:none}
  img,image-slot,video,svg{max-width:100%}
}

@media (max-width: 1200px){
  .hero__title[style],.hero__sub[style],.section-title[style],.contact__title[style],.pg__intro p[style],.section-head p[style],.ach-card__learn[style]{width:auto!important;height:auto!important;max-width:100%!important}
}
.bg-blobs{overflow:hidden}

/* ---- Mobile nav: compact bar + hamburger panel ---- */
.nav__burger{display:none;width:38px;height:38px;border-radius:12px;border:0.5px solid var(--line-strong);background:rgba(255,255,255,0.03);flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.nav__burger span{display:block;width:16px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media (max-width: 1000px){
  .nav{left:0;right:0}
  .nav__shell,.nav.scrolled .nav__shell{width:calc(100% - 32px);max-width:none;margin:0 auto;padding:8px 8px 8px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .nav__burger{display:flex}
  .nav__logo-svg{height:20px}
  .nav__resume{padding:7px 12px;font-size:13px}
  .nav__resume span{display:inline}
  .nav__links,.nav.scrolled .nav__links{position:absolute;top:calc(100% + 10px);left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:10px;border-radius:20px;background:rgba(12,11,10,0.97);backdrop-filter:blur(18px);border:0.5px solid var(--line-strong);box-shadow:0 24px 60px rgba(0,0,0,0.5);opacity:0;max-width:none;transform:translateY(-8px);pointer-events:none;overflow:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease)}
  .nav.is-open .nav__links,.nav.scrolled.is-open .nav__links{opacity:1;transform:none;pointer-events:auto;padding:10px}
  .nav__links a{padding:12px 14px;border-radius:12px;font-size:15px}
  .nav__links a.is-active{background:rgba(255,255,255,0.05)}
}
/* ---- Mobile hero refinements ---- */
@media (max-width: 760px){
  .hero__inner{padding-top:58px}
  .hero section,.hero{padding-top:0}
  .hero__title br{display:inline}
  .hero__greet-av,.hero__greet-av[style]{width:46px!important;height:46px!important}
  .hero__greet{gap:10px;padding:6px 14px 6px 6px}
  .hero__greet-text{white-space:nowrap;font-size:13px}
  .hero__greet-muted{display:none}
  .cred-strip{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}
  .cred{font-size:11.5px;padding:6px 10px 6px 7px;gap:6px}
  .cred__ic svg{width:14px;height:14px}
  .hero__actions{flex-direction:row;align-items:center;width:auto;gap:10px;flex-wrap:wrap}
  .hero__actions .btn{width:auto;flex:0 1 auto}
  .approach__quote,.approach__quote[style]{position:static!important;width:auto!important;height:auto!important;left:auto!important;top:auto!important;margin-top:14px;max-width:100%!important}
  .ach-card__shot > img:not(.ach-card__award-logo){object-position:50% 14%}
}

/* ---- Mobile nav: specificity fixes ---- */
@media (max-width: 1000px){
  html,body{overflow-x:hidden}
  .bg-fx,.bg-blobs{overflow:hidden}
  body .nav{left:0!important;right:0!important;width:100%!important}
  body.home .nav .nav__shell,body.home .nav.scrolled .nav__shell,body .nav__shell{width:calc(100% - 32px)!important;max-width:none!important;margin:0 auto!important;padding:8px 8px 8px 16px!important;display:flex;align-items:center;justify-content:space-between;gap:10px}
  body.home .nav .nav__links,body.home .nav:not(.scrolled) .nav__links,body.home .nav.scrolled .nav__links{position:absolute!important;top:calc(100% + 10px)!important;left:0!important;right:0!important;display:flex!important;flex-direction:column;align-items:stretch;gap:2px;padding:10px!important;border-radius:20px;background:rgba(12,11,10,0.97);border:0.5px solid var(--line-strong);box-shadow:0 24px 60px rgba(0,0,0,0.5);opacity:0!important;max-width:none!important;transform:translateY(-8px)!important;pointer-events:none!important;overflow:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease)!important}
  body.home .nav.is-open .nav__links,body.home .nav.is-open:not(.scrolled) .nav__links,body.home .nav.scrolled.is-open .nav__links{opacity:1!important;transform:none!important;pointer-events:auto!important}
  body .nav__burger{display:flex!important}
}

@media (max-width: 1000px){
  .approach__quote,.approach__quote[style]{position:static!important;width:auto!important;height:auto!important;left:auto!important;top:auto!important;margin-top:14px;max-width:100%!important}
}
.bg-fx{overflow:hidden}

/* ---- Mobile nav polish ---- */
.nav__burger{border:none!important;background:none!important;width:34px;height:34px;border-radius:0}
@media (max-width: 1000px){
  body.home .nav .nav__shell,body.home .nav.scrolled .nav__shell,body .nav__shell{width:calc(100% - 20px)!important;padding:8px 10px 8px 16px!important}
  body.home .nav .nav__links,body.home .nav:not(.scrolled) .nav__links,body.home .nav.scrolled .nav__links{visibility:hidden!important}
  body.home .nav.is-open .nav__links,body.home .nav.is-open:not(.scrolled) .nav__links,body.home .nav.scrolled.is-open .nav__links{visibility:visible!important}
}
@media (max-width: 760px){
  .cred-strip{justify-content:center}
  .approach__quote,.approach__quote[style]{text-align:center;text-wrap:balance}
}
@media (max-width: 1000px){
  .approach__quote,.approach__quote[style]{text-wrap:balance;max-width:32ch!important}
}

/* ---- Mobile nav / hero clearance + active state ---- */
@media (max-width: 1000px){
  body.home .nav .nav__links,body.home .nav:not(.scrolled) .nav__links,body.home .nav.scrolled .nav__links{background:#111010!important;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
  .nav__links a.is-active,.nav__links a[aria-current="page"]{color:var(--accent)!important;background:transparent!important}
  .about-back,.about-back[style]{top:96px!important}
  .hero__inner{padding-top:104px}
}
@media (max-width: 760px){
  .hero__inner{padding-top:96px}
}
/* ---- About hero wallet cards: tidy 2x2 on mobile ---- */
@media (max-width: 700px){
  .ah-pocket__peek{display:grid!important;grid-template-columns:1fr 1fr;gap:14px;height:auto!important;margin-bottom:0!important;padding:2px}
  .ah-peek{position:relative;max-width:none!important;width:auto!important;height:auto!important;min-height:0!important;aspect-ratio:3/4;margin-left:0!important;flex:none;border-radius:16px;overflow:hidden;opacity:1;transform:none!important}
  .ah-peek:nth-child(1){--r:-2deg}
  .ah-peek:nth-child(2){--r:1.5deg}
  .ah-peek:nth-child(3){--r:-1.5deg}
  .ah-peek:nth-child(4){--r:2deg}
  .ah__portrait.reveal.in .ah-peek{transform:rotate(var(--r,0deg))!important}
  .ah-peek--photo img,.ah-peek--photo image-slot{width:100%!important;height:100%!important;display:block;object-fit:cover}
  .ah-peek--card{padding:16px 14px;justify-content:flex-start}
  .ah-peek__k{font-size:9px;margin-bottom:6px}
  .ah-peek__t{font-size:13.5px;line-height:1.3}
}

@media (max-width: 1000px){
  .nav{z-index:1200}
  .about-back{transition:opacity .25s var(--ease)}
  body:has(.nav.is-open) .about-back{opacity:0;pointer-events:none}
}

/* ---- Mobile: timeline dot centred on the rail ---- */
@media (max-width: 860px){
  .tl-dot{left:-22px!important;transform:translateX(-50%)!important}
  .tl-node:hover .tl-dot{transform:translateX(-50%) scale(1.3)!important}
}
/* ---- Mobile hero: greeting on one line, 2x2 credentials ---- */
@media (max-width: 760px){
  .hero__inner{padding-top:128px}
  .hero__greet{gap:8px;padding:5px 12px 5px 5px;max-width:100%}
  .hero__greet-av,.hero__greet-av[style]{width:36px!important;height:36px!important}
  .hero__greet-text{display:inline;white-space:nowrap;font-size:clamp(10px,3vw,14px);line-height:1.2}
  .hero__greet-muted{display:inline}
  .cred-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;justify-items:stretch;max-width:420px;margin-left:auto;margin-right:auto}
  .cred{justify-content:center;text-align:center;font-size:12px}
}

/* case card meta sizes match the description */
body.home .case-card__role,body.home .case-card__impact{font-size:15px!important}
.qi-rtw{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:13.5px;font-weight:500;color:var(--muted)}
.qi-rtw svg{width:14px;height:14px;flex:none;color:var(--accent)}

/* TL;DR: right-to-work stacks under the status line */
.qi-simple__status{flex-wrap:wrap;align-items:center}
.qi-rtw{flex-basis:100%;margin-top:6px;padding-left:0}
/* TL;DR proof cards */
.qi-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.qi-card{padding:14px 14px 15px;border-radius:14px;border:0.5px solid var(--line-strong);background:rgba(255,255,255,0.028)}
.qi-card__k{display:block;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.qi-card__d{font-size:13.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
@media (max-width:760px){.qi-cards{grid-template-columns:1fr}}

/* Testimonials: equal-height cards */
body.home .words__scroller{align-items:stretch}
body.home .qslide{display:flex;height:auto}
body.home .qslide .qcard{height:100%;flex:1}
body.home .qcard__person{margin-top:auto}

.footer__love{display:inline-block;margin-top:6px;color:var(--muted)}

.qi-rtw{justify-content:center;text-align:center;width:100%}

/* Hero avatar: grows on hover without covering the greeting */
.hero__greet-av{transition:transform .35s var(--ease);transform-origin:left center;z-index:2}
.hero__greet:hover .hero__greet-av{transform:scale(1.35)}
.hero__greet{transition:gap .35s var(--ease)}
.hero__greet:hover{gap:calc(var(--greet-gap,12px) + 12px)}

/* Hero avatar hover: grows away from the text, no layout shift */
.hero__greet:hover{gap:var(--greet-gap,12px)}
.hero__greet-av{transform-origin:right center;will-change:transform;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hero__greet:hover .hero__greet-av{transform:scale(1.3) rotate(-7deg)}

/* Avatar hover: scale the photo only, tooltip stays anchored */
.hero__greet:hover .hero__greet-av{transform:none}
.hero__greet-av > image-slot,.hero__greet-av > img{transform-origin:right center;will-change:transform;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hero__greet-av:hover > image-slot,.hero__greet-av:hover > img{transform:scale(1.75) rotate(-7deg)}

/* Desktop: larger, more inviting case covers */
@media (min-width: 821px){
  body.home .case-card__cover{aspect-ratio:4/3}
  body.home .case-card__cover image-slot,body.home .case-card__cover img{object-fit:cover}
  body.home .case-card:hover .case-card__cover image-slot{transform:scale(1.05)}
}

/* Mobile: back arrow lives inside the nav pill on inner pages */
.nav__back{display:none;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:10px;color:var(--text);opacity:.75}
.nav__back svg{width:18px;height:18px}
.nav__back:hover{opacity:1}
@media (max-width:1000px){
  .nav__back{display:inline-flex}
  .case-back,.about-back{display:none!important}
}
/* Hero at very narrow widths: avatar stacks above the greeting */
@media (max-width:430px){
  .hero__greet{flex-direction:column;align-items:flex-start;gap:10px;padding:10px 14px}
  .hero__greet-text{white-space:normal;font-size:14px}
  .hero__greet-av,.hero__greet-av[style]{width:56px!important;height:56px!important}
}
/* Credential pills: icon and label always stay together */
.cred{display:inline-flex;align-items:center;flex-wrap:nowrap}
.cred__ic{flex:none}
@media (max-width:760px){
  .cred{justify-content:flex-start;gap:8px;padding:8px 12px}
  .cred__t{white-space:normal;text-align:left;line-height:1.25}
}
@media (max-width:430px){
  .cred-strip{grid-template-columns:1fr!important;max-width:100%}
}

@media (max-width:1000px){body .about-back{display:none!important}}

/* Mobile nav: resume moves into the panel, no back arrow on home */
@media (max-width:1000px){
  body.home .nav .nav__back{display:none!important}
  .nav .nav__shell{justify-content:flex-start!important;gap:14px!important}
  .nav .nav__actions{margin-left:auto;display:flex;align-items:center;gap:8px}
  .nav .nav__actions .nav__resume{display:none!important}
  .nav .nav__links .nav__resume--mob{display:flex!important;align-items:center;gap:8px;margin-top:6px;padding:12px 14px;border-top:0.5px solid var(--line-strong)}
}
.nav__links .nav__resume--mob{display:none}
/* Hero stack centred at narrow widths */
@media (max-width:430px){
  .hero__greet{align-items:center;text-align:center}
  .hero__greet-text{text-align:center}
}

.ach-card__cta-row{margin-top:16px}
.ach-card__cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:0.5px solid var(--line-strong);background:rgba(240,237,230,0.04);color:var(--text);font-size:13px;font-weight:500;text-decoration:none;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.ach-card__cta:hover{background:var(--accent-soft);border-color:rgba(168,111,214,0.42);color:var(--text);transform:translateY(-1px)}
.ach-card__cta span{transition:transform .25s var(--ease)}
.ach-card__cta:hover span{transform:translateX(3px)}

/* Motion strip: caption under each reel */
.motion-item{display:flex;flex-direction:column;gap:16px;min-width:0;margin:0}
.motion-item:nth-child(3){grid-column:1 / -1}
.motion-item:nth-child(3) .motion-card{aspect-ratio:960 / 720}
.motion-cap{display:flex;flex-direction:column;gap:6px}
.motion-cap__t{font-size:16px;font-weight:600;letter-spacing:-0.01em}
.motion-cap__d{font-size:14.5px;line-height:1.55;color:var(--muted,#8a8a8a);max-width:62ch;text-wrap:pretty;margin:0}
@media (max-width:480px){.motion-item:nth-child(3){grid-column:auto}}

/* Chevron arrow sizing (glyph fills its viewBox, so sizes read true) */
.arr svg{width:1.3em;height:1.3em}
.btn .arr svg{width:19px !important;height:19px !important}
.ach-card__cta .arr svg{width:16px;height:16px}
.pg-gem__try .arr svg,.pg-vibe__link .arr svg,.text-link .arr svg{width:17px;height:17px}
.platform-carousel__arrow svg{width:20px;height:20px}