/* ============================================================
   Nayan Dhar (Shawn) — Portfolio
   Style: bold light editorial (tuxdi-type) — giant solid+outline
   caps, white/lavender, vivid purple + yellow, playful mascot.
   ============================================================ */
:root {
  --ink: #17082F;          /* deep purple-black */
  --bg: #ffffff;
  --lavender: #FBF5FF;
  --purple: #7E00CC;
  --purple-soft: #9B4DFF;
  --yellow: #FFB800;
  --teal: #2CE5C3;
  --coral: #FF5964;
  --green: #3DDC84;
  --muted: #5d5470;
  --line: rgba(23, 8, 47, 0.14);
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --container: 1200px;
  --ring: 0 0 0 3px rgba(135, 21, 205, 0.35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html:not(.fx-on) { scroll-behavior: auto; }
  html:not(.fx-on) *, html:not(.fx-on) *::before, html:not(.fx-on) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-soft); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--purple); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 840px; }
.mono { font-family: var(--font-mono); letter-spacing: 0.08em; }
.muted { color: var(--muted); }
.avail { color: #0d9f55; font-weight: 600; }

/* ============ Display type: the tuxdi signature ============ */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
  color: var(--ink);
}
.display span { display: block; }
.display .outl, .outl {
  -webkit-text-fill-color: #FBF5FF;
  color: #FBF5FF;
  -webkit-text-stroke: 0.05em var(--ink);
}
.display.center { text-align: center; }
.display.light { color: #fff; }
.display.light .outl-light { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.05em #fff; display: block; }

h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 6px; }
.lead { color: var(--muted); font-size: 1.06rem; max-width: 560px; margin: 0 0 30px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 28px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 999px; border: 2px solid var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.btn:active { transform: scale(0.97); }
.btn-outline { background: #fff; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--purple); border-color: var(--purple); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(135, 21, 205, 0.3); }
.btn-yellow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 184, 0, 0.45); }
.btn-sm { min-height: 42px; padding: 9px 22px; font-size: 0.76rem; }
.btn-lg { min-height: 56px; padding: 14px 38px; font-size: 0.95rem; }
.btn-wide { width: 100%; }

.chip {
  min-height: 42px; padding: 9px 20px;
  background: #fff; color: var(--muted);
  border: 2px solid var(--line); border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  cursor: pointer; transition: all 0.16s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============ Nav ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { color: var(--purple); font-family: var(--font-mono); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.brand-mark i { font-style: normal; animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.brand-text { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--ink); letter-spacing: -0.01em; }
.brand-text strong { font-weight: 800; }
.nav-links { display: flex; gap: 6px; }
.nav-links a {
  padding: 10px 16px; border-radius: 999px;
  color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-links a:hover, .nav-links a.is-current { background: rgba(135, 21, 205, 0.1); color: var(--purple); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-burger {
  display: none; width: 46px; height: 46px; flex-direction: column; gap: 7px;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.nav-burger span { width: 28px; height: 3px; background: var(--purple); border-radius: 2px; }
.mobile-menu { display: flex; flex-direction: column; padding: 8px 28px 22px; gap: 2px; background: #fff; border-bottom: 1px solid var(--line); }
.mobile-menu a { padding: 13px 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); text-transform: uppercase; }
.mobile-menu a.accent { color: var(--purple); }

/* ============ Hero ============ */
.hero {
  position: relative;
  background: linear-gradient(160deg, #ffffff 30%, #f4e7ff 100%);
  padding: 40px 0 110px;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero .container { width: 100%; }
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3rem, 8.2vw, 6.4rem); line-height: 0.97; letter-spacing: -0.015em;
  margin: 0 0 30px; color: var(--ink);
}
.hero h1 span { display: block; }
.hero h1 em { font-style: normal; }
.hero-sub { color: var(--muted); font-size: 1.12rem; max-width: 520px; margin: 0 0 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.wave svg { width: 100%; height: 70px; }

/* ============ Sections ============ */
.section { padding: 80px 0; }
.lavender { background: var(--lavender); }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 60px; align-items: center; }
.split-loose { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }

.stat-board { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; }
.stat-board div {
  background: #fff; border: 2px solid var(--ink); border-radius: 18px;
  padding: 26px 24px; box-shadow: 0 6px 0 var(--purple);
}
.stat-board dt { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-board dd { margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; font-weight: 500; }

/* reveal v1 retired — see .rv system below */

/* ============ Projects showcase: angled color blocks ============ */
.showcase-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 50px; align-items: start; }
.showcase-head { position: sticky; top: 110px; }
.showcase-feed { display: grid; gap: 38px; }
.show-card {
  position: relative; border: none; padding: 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: none; width: 100%;
}
.show-card { filter: drop-shadow(9px 11px 0 rgba(23, 8, 47, 0.9)); transition: transform 0.22s ease, filter 0.22s ease; }
.show-card:hover { transform: translate(-4px, -6px); filter: drop-shadow(15px 19px 0 rgba(23, 8, 47, 0.9)); }
.show-card { --notch: 56px; }
.show-card .slab {
  display: block;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
  padding: 36px calc(var(--notch) + 40px) 36px calc(var(--notch) + 48px);
  overflow: hidden;
}
.show-card .unskew { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; align-items: center; }
.show-card h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.show-card .show-desc { font-size: 0.94rem; margin: 8px 0 14px; color: rgba(23, 8, 47, 0.82); }
.show-tags { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.show-tags span::after { content: "+"; margin: 0 8px; }
.show-tags span:last-child::after { content: ""; }
.show-thumb { width: 150px; height: 150px; border-radius: 18px; overflow: hidden; border: 3px solid var(--ink); transform: rotate(4deg); background: #fff; }
.show-thumb img { width: 100%; height: 100%; object-fit: cover; }
.show-cta { display: inline-block; margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid var(--ink); }
.work-all { margin-top: 70px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }

/* full project grid (light cards) */
.grid { display: grid; gap: 22px; }
.work-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card {
  background: #fff; border: 2px solid var(--ink); border-radius: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 14px 0 rgba(135, 21, 205, 0.25); }
.work-card { padding: 0; text-align: left; cursor: pointer; color: var(--ink); width: 100%; font: inherit; }
.work-thumb { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 2px solid var(--ink); }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.work-card:hover .work-thumb img { transform: scale(1.05); }
.work-cat {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink); border: 2px solid var(--ink);
  padding: 4px 12px; border-radius: 999px;
}
.work-body { padding: 20px 22px 22px; display: block; }
.work-body h3 { font-size: 1.02rem; }
.work-sub { color: var(--purple); font-family: var(--font-display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 8px; display: block; }
.work-desc { color: var(--muted); font-size: 0.9rem; margin-bottom: 14px; display: block; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tags span {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--ink); background: var(--lavender);
  border: 1px solid var(--line); padding: 3px 9px; border-radius: 6px;
}
.tags .tag-logo img { width: 14px; height: 14px; object-fit: contain; }
.work-more { margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--purple); text-transform: uppercase; display: block; }

/* ============ Services: white cards w/ purple base shadow ============ */
.svc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; }
.svc-card {
  background: #fff; border-radius: 22px; padding: 30px 26px 26px;
  box-shadow: 0 8px 0 var(--purple), 0 22px 40px rgba(23, 8, 47, 0.1);
  transition: transform 0.2s ease;
}
.svc-card:hover { transform: translateY(-6px); }
.svc-card h3 { font-size: 1.3rem; font-weight: 800; text-transform: uppercase; }
.svc-card .svc-desc { color: var(--muted); font-size: 0.9rem; margin: 6px 0 18px; }
.svc-card ul { list-style: none; margin: 0; padding: 0; }
.svc-card li { padding: 11px 2px; border-top: 1px solid var(--line); font-weight: 500; font-size: 0.92rem; color: var(--ink); }

/* ============ Dark statement band ============ */
.dark-band { background: var(--ink); padding: 78px 0 58px; }
.light-lead { color: rgba(255, 255, 255, 0.75); font-size: 1.06rem; max-width: 620px; margin: 0 0 34px; }
.bp-scroll { overflow-x: auto; padding: 10px 24px 6px; -webkit-overflow-scrolling: touch; }
#blueprintSvg { display: block; min-width: 980px; width: min(1240px, 100%); margin: 0 auto; }
.bp-node rect { fill: rgba(35, 20, 64, 0.95); stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; transition: stroke 0.2s ease; }
.bp-node:hover rect { stroke: var(--yellow); }
.bp-label { fill: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.bp-sub { fill: #b9a8d8; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.02em; }
.bp-ico { display: flex; width: 30px; height: 30px; color: var(--yellow); }
.bp-ico svg { width: 24px; height: 24px; margin: 3px; }
.bp-decision rect { stroke: rgba(255, 184, 0, 0.6); }
.bp-wire { fill: none; stroke: url(#bpw); stroke-width: 2; stroke-dasharray: 7 6; animation: bpdash 1.1s linear infinite; }
@keyframes bpdash { to { stroke-dashoffset: -13; } }
@media (prefers-reduced-motion: reduce) { html:not(.fx-on) .bp-wire { animation: none; } }
.bp-route { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; }
.bp-route.hot-t { fill: #4ade80; }
.bp-route.cold-t { fill: var(--yellow); }
.bp-legend { display: flex; gap: 26px; justify-content: center; margin-top: 16px; font-size: 0.58rem; letter-spacing: 0.18em; color: #b9a8d8; }
.bp-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }

/* ============ Word marquee ============ */
.word-band { padding: 60px 0; overflow: hidden; background: #fff; }
.word-row { overflow: hidden; }
.word-row + .word-row { margin-top: 8px; }
.word-track {
  display: inline-flex; gap: 0; white-space: nowrap; width: max-content;
  animation: words 30s linear infinite;
}
.word-row.reverse .word-track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { html:not(.fx-on) .word-track { animation: none; } }
.word-track span {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.1; padding: 0 28px;
  color: var(--ink);
}
.word-track span.outl { color: transparent; -webkit-text-stroke: 2px var(--ink); }
@keyframes words { to { transform: translateX(-50%); } }

/* ============ Results rows (case studies) ============ */
.results-list { display: grid; gap: 0; }
.result-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: none; border: none; border-top: 2px solid var(--ink);
  padding: 22px 6px;
  transition: background 0.15s ease, padding 0.15s ease;
}
.result-row:last-child { border-bottom: 2px solid var(--ink); }
.result-row:hover { background: var(--lavender); padding-left: 14px; }
.result-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 1.5vw, 1.6rem); line-height: 1.08; color: var(--purple); overflow-wrap: break-word; min-width: 0; }
.result-what { font-weight: 600; font-size: 0.98rem; line-height: 1.4; }
.result-client { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 500; }
.result-arrow { font-size: 1.3rem; color: var(--ink); transition: transform 0.15s ease; }
.result-row:hover .result-arrow { transform: translateX(6px); }

/* rotating seal */
.seal { position: relative; width: 150px; height: 150px; margin-top: 30px; }
.seal svg:first-child { width: 100%; height: 100%; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html:not(.fx-on) .seal svg:first-child { animation: none; } }
.seal-text textPath { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--ink); }
.seal-ghost { position: absolute; inset: 32%; }

/* ============ About ============ */
.about-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 54px; align-items: start; margin-top: 30px; }
.xp-rows { display: grid; gap: 0; margin-top: 26px; }
.xp-row { border-top: 2px solid var(--ink); padding: 22px 4px; }
.xp-row:last-child { border-bottom: 2px solid var(--ink); }
.xp-row header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.xp-row .mono { color: var(--purple); font-size: 0.66rem; text-transform: uppercase; }
.xp-row p { color: var(--muted); font-size: 0.92rem; margin: 8px 0 0; }
.about-aside { display: grid; gap: 20px; }
.about-photo { width: 100%; max-width: 320px; height: auto; border-radius: 24px; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--yellow); }
.about-links { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-weight: 600; }
.tool-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-cloud span {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
  padding: 6px 14px; font-family: var(--font-display); font-weight: 600; font-size: 0.74rem;
}
.tool-cloud img { width: 15px; height: 15px; object-fit: contain; }

/* ============ Awards rows ============ */
.award-rows { list-style: none; margin: 40px 0 0; padding: 0; counter-reset: aw; }
.award-rows li {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  border-top: 2px solid var(--ink); padding: 26px 6px;
}
.award-rows li:last-child { border-bottom: 2px solid var(--ink); }
.award-rows .yr { color: var(--purple); font-size: 0.85rem; }
.award-t { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 2.6vw, 1.7rem); }
.award-rows .org { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }

/* ============ FAQ ============ */
.faq { display: grid; gap: 12px; margin-top: 28px; }
.faq details { background: #fff; border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; }
.faq details[open] { box-shadow: 0 6px 0 var(--purple); }
.faq summary { cursor: pointer; padding: 19px 54px 19px 24px; list-style: none; font-family: var(--font-display); font-weight: 700; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--purple); font-size: 1.5rem; font-weight: 600; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 20px; margin: 0; color: var(--muted); }

/* ============ CTA band ============ */
.cta-band { background: var(--yellow); padding: 100px 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.cta-inner { text-align: center; }
.cta-kicker { font-weight: 600; font-size: 1.05rem; margin-bottom: 14px; }
.cta-band .display .outl { -webkit-text-stroke-color: var(--ink); }
.cta-band .btn-dark:hover { background: #fff; color: var(--ink); border-color: var(--ink); box-shadow: 0 10px 24px rgba(23, 8, 47, 0.25); }

/* ============ Footer + contact ============ */
.footer { background: var(--lavender); padding: 90px 0 0; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 60px; align-items: start; }
.footer-contact { font-size: 0.98rem; margin: 0 0 28px; }
.badge-cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.badge-card {
  display: grid; gap: 1px; background: #fff; border: 2px solid var(--ink); border-radius: 14px;
  padding: 12px 18px; min-width: 130px;
}
.badge-card .mono { font-size: 0.56rem; color: var(--muted); text-transform: uppercase; }
.badge-card strong { font-family: var(--font-display); font-size: 1rem; }
.stars { color: var(--yellow); letter-spacing: 2px; font-size: 0.85rem; }
.socials { display: flex; gap: 12px; }
.socials a {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 0.95rem;
  transition: all 0.15s ease;
}
.socials a:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }

.uplink-form {
  background: #fff; border: 3px solid var(--ink); border-radius: 24px;
  padding: 32px; display: grid; gap: 16px;
  box-shadow: 12px 12px 0 var(--purple);
}
.form-head { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; margin: 0 0 4px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.req { color: var(--purple); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--lavender); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px;
  font-family: var(--font-body); font-size: 1rem;
  transition: border-color 0.15s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--purple); background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: #a99cc0; }
.field.has-error input, .field.has-error textarea { border-color: var(--coral); }
.field-error { color: #d63a45; font-size: 0.8rem; margin: 0; }
.form-status { min-height: 1.2em; font-size: 0.72rem; letter-spacing: 0.06em; color: #0d9f55; margin: 0; }
.form-status.error { color: #d63a45; }

.footer-base {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  border-top: 2px solid var(--ink); margin-top: 70px; padding-top: 22px; padding-bottom: 26px;
}
.footer-base p { margin: 0; font-size: 0.85rem; font-weight: 500; }
.to-top {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--ink); background: #fff; color: var(--ink);
  font-size: 1.2rem; cursor: pointer; transition: all 0.15s ease;
}
.to-top:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }

/* ============ Dialog (light) ============ */
dialog#detailDialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 24px;
  padding: 0; overflow: hidden;
  box-shadow: 14px 14px 0 rgba(135, 21, 205, 0.8);
}
dialog#detailDialog::backdrop { background: rgba(23, 8, 47, 0.55); backdrop-filter: blur(3px); }
.dialog-inner { padding: 36px; overflow-y: auto; max-height: calc(100dvh - 64px); }
.dialog-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink);
  color: var(--ink); font-size: 1rem; cursor: pointer; z-index: 2;
}
.dialog-close:hover { background: var(--ink); color: #fff; }
.dialog-kicker { font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); margin-bottom: 8px; }
.dialog-meta { display: flex; flex-wrap: wrap; gap: 22px; margin: 18px 0; padding: 16px 0; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.dialog-meta div { display: grid; gap: 2px; }
.dialog-meta .mono { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.dialog-meta strong { font-size: 0.95rem; }
.dialog-h { font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-transform: uppercase; margin: 24px 0 10px; }
.dialog-results { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.dialog-results li { display: flex; gap: 10px; align-items: baseline; border-left: 4px solid var(--yellow); padding-left: 12px; }
.dialog-results strong { color: var(--purple); white-space: nowrap; font-family: var(--font-display); }
.dialog-results span { color: var(--muted); font-size: 0.92rem; }
.dialog-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.dialog-inner .muted { color: var(--muted); }

/* node flow (light) */
.flow { list-style: none; margin: 16px 0; padding: 0; }
.flow-node {
  position: relative; display: flex; align-items: center; gap: 13px;
  background: var(--lavender); border: 2px solid var(--ink); border-radius: 14px;
  padding: 11px 14px; margin: 0 0 24px;
}
.flow-node:last-child { margin-bottom: 0; }
.flow-node::after {
  content: ""; position: absolute; left: 32px; top: 100%; height: 24px; width: 3px;
  background: repeating-linear-gradient(to bottom, var(--purple) 0 4px, transparent 4px 8px);
  animation: wireflow 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { html:not(.fx-on) .flow-node::after { animation: none; } }
@keyframes wireflow { to { background-position: 0 8px; } }
.flow-node:last-child::after { display: none; }
.fn-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--purple); border: 2px solid var(--ink);
}
.fn-icon svg { width: 19px; height: 19px; }
.fn-text { font-weight: 600; font-size: 0.88rem; }
.fn-kind { margin-left: auto; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 0.54rem; letter-spacing: 0.12em; color: var(--muted); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; background: #fff; }
.flow-node.decision { background: #fff7e0; }
.flow-node.decision .fn-icon { color: #b8860d; }
.flow-node.decision .fn-kind { color: #b8860d; border-color: rgba(255, 184, 0, 0.6); }

/* ============ Responsive ============ */
@media (max-width: 1020px) {
  .split, .split-loose, .about-cols, .footer-top, .showcase-grid { grid-template-columns: 1fr; }
  .showcase-head { position: static; }
  .svc-cards { grid-template-columns: 1fr 1fr; }
  .mascot { position: relative; right: auto; bottom: auto; margin: 40px auto 0; }
  .hero { padding-bottom: 80px; }
  .seal { display: none; }
}
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .svc-cards { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .stat-board { grid-template-columns: 1fr 1fr; }
  .show-card .unskew { grid-template-columns: 1fr; }
  .show-thumb { display: none; }
  .result-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .result-big { font-size: 1.15rem; }
  .result-arrow { display: none; }
  .award-rows li { grid-template-columns: 70px minmax(0, 1fr); }
  .award-rows .org { display: none; }
  .dialog-inner { padding: 26px 20px; }
  .word-track span { padding: 0 16px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (min-width: 961px) {
  .mobile-menu { display: none !important; }
}


/* ============ Scroll companion: DepreShawn the angel cat ============ */
#companion {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: clamp(130px, 16vw, 230px);
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 16px 22px rgba(23, 8, 47, 0.18));
}
#companion .c-halo { transform-origin: 100px 22px; animation: halobob 3.2s ease-in-out infinite; }
@keyframes halobob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(5px) rotate(4deg); } }
#companion .c-spark { opacity: 0; transform-origin: 155px 24px; animation: sparkle 3.2s ease-in-out infinite; }
@keyframes sparkle { 0%, 55%, 100% { opacity: 0; transform: scale(0.4) rotate(0); } 70% { opacity: 1; transform: scale(1.1) rotate(40deg); } }
/* on dark sections the angel simply glows — he is, after all, an angel */
#companion.v-dark { filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 44px rgba(167, 139, 250, 0.5)); }
#companion.v-dark .c-halo ellipse { stroke-width: 10; }
#companion.v-party .c-halo { animation-duration: 1.1s; }
#companion.v-party .c-spark { animation-duration: 1.1s; }
#companion.static { position: absolute; top: 22vh; right: 6%; left: auto; }
@media (prefers-reduced-motion: reduce) {
  html:not(.fx-on) #companion .c-halo, html:not(.fx-on) #companion .c-spark { animation: none; }
}

/* ============ Parallax buddy balls ============ */
.hero, .section, .cta-band { position: relative; }
.pball {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(46px, 6vw, 92px); opacity: 0.95;
  will-change: transform;
}
.pball svg { width: 100%; display: block; }
.pball.b1 { left: 7%; top: 20%; }
.pball.b2 { right: 30%; bottom: 10%; width: clamp(34px, 4vw, 60px); }
.pball.b3 { left: 4%; top: 18%; }
.pball.b4 { left: 3%; bottom: 8%; width: clamp(38px, 4.5vw, 64px); }
.pball.b5 { left: 8%; top: 16%; }
@media (max-width: 720px) { .pball.b2, .pball.b4 { display: none; } }

/* ============ Reveal v2: smooth in AND out ============ */
html:not(.reduced) .rv {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rvd, 0ms);
}
html:not(.reduced) .rv[data-rv="left"] { transform: translateX(-52px); }
html:not(.reduced) .rv[data-rv="right"] { transform: translateX(52px); }
html:not(.reduced) .rv[data-rv="zoom"] { transform: scale(0.88); }
html:not(.reduced) .rv.in { opacity: 1; transform: none; }


/* ============ DYNAMIC DUO scene ============ */
.duo {
  position: relative;
  background: linear-gradient(178deg, #17082F 0%, #2b0a52 34%, #8715CD 72%, #a83af0 100%);
  padding: 76px 0 0;
  overflow: visible;
  z-index: 5;
}
.duo-copy { position: relative; z-index: 3; }
.duo-scene { position: relative; height: clamp(380px, 36vw, 560px); margin-top: -34px; z-index: 1; overflow: hidden; }

/* 3D spheres */
.s3 {
  position: absolute; border-radius: 50%; display: block; aspect-ratio: 1;
  background: radial-gradient(circle at 32% 26%, #ffdf7a 0%, #FFB800 42%, #d29200 70%, #8a5f00 100%);
  box-shadow: inset -14px -20px 34px rgba(110, 60, 0, 0.45), 18px 30px 44px rgba(15, 4, 36, 0.45);
}
.s3 svg { position: absolute; inset: 12%; }
.s3.g1 { width: min(26vw, 400px); min-width: 260px; left: -8%; bottom: -30%; filter: blur(7px); opacity: 0.95; }
.s3.g2 { width: min(18vw, 310px); min-width: 180px; right: 36%; bottom: -26%; filter: blur(5px); }
.s3.m1 { width: min(9vw, 130px); min-width: 74px; left: 18%; top: 8%; }
.s3.m2 { width: min(5vw, 80px); min-width: 44px; left: 40%; top: 42%; filter: blur(1px); }
.s3.m3 { width: min(8vw, 120px); min-width: 70px; left: 30%; bottom: 14%; }
.s3.m4 { width: min(6vw, 100px); min-width: 54px; right: 44%; top: 16%; }

/* Nayan in the scene (white photo bg melts into the purple via multiply) */
.duo-me { position: absolute; right: 4%; bottom: 10px; width: clamp(300px, 30vw, 470px); margin: 0; z-index: 2; }
.duo-me img { filter: grayscale(1) contrast(1.08); border-radius: 0 0 18px 18px; }
.duo-shadow { position: absolute; left: 18%; right: 18%; bottom: 2px; height: 26px; background: radial-gradient(ellipse, rgba(10, 2, 24, 0.55), transparent 70%); }

@media (max-width: 720px) {
  .duo-scene { height: 330px; }
  .duo-me { width: 84vw; right: -4%; }
  .s3.m2, .s3.m4 { display: none; }
}

/* upgrade buddy balls to 3D look */
.pball svg circle:first-child { fill: url(#ballG); }


/* ============ Brand card interlude (rises over the hero) ============ */
.bc-wrap { background: var(--lavender); padding: 0 28px; margin-top: 0; }
.brandcard {
  max-width: 880px; margin: 0 auto;
  background: var(--ink); border-radius: 34px;
  text-align: center; padding: 64px 30px 58px;
  box-shadow: 0 30px 60px rgba(23, 8, 47, 0.25);
}
.bc-mark { color: var(--purple-soft); font-size: 2.2rem; font-weight: 700; margin: 0 0 10px; }
.bc-name { font-family: var(--font-display); font-weight: 500; color: #fff; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; margin: 0 0 14px; }
.bc-name strong { font-weight: 800; }
.bc-sub { color: rgba(255, 255, 255, 0.55); font-size: 0.7rem; letter-spacing: 0.3em; margin: 0; }

/* ============ Squiggle divider ============ */
.squiggle { margin-top: 36px; }
.squiggle svg { width: 100%; height: 26px; display: block; }

/* ============ Cursor blob (VIEW MORE bubble) ============ */
#cursorBlob {
  position: fixed; left: 0; top: 0; z-index: 130;
  width: 112px; height: 112px; border-radius: 50%;
  background: var(--purple); color: #fff;
  display: none; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 14px 34px rgba(135, 21, 205, 0.45);
}
@media (hover: hover) { html.fx-on #cursorBlob { display: flex; } }
#cursorBlob.on { transform: translate(-50%, -50%) scale(1); }

/* ============ Inverted dark hover for rows ============ */
.result-row:hover { background: var(--ink); padding-left: 16px; }
.result-row:hover .result-big { color: var(--yellow); }
.result-row:hover .result-what { color: #fff; }
.result-row:hover .result-client { color: rgba(255, 255, 255, 0.6); }
.result-row:hover .result-arrow { color: var(--yellow); }
.award-rows li { transition: background 0.18s ease, padding 0.18s ease; }
.award-rows li:hover { background: var(--ink); padding-left: 16px; }
.award-rows li:hover .award-t { color: #c77dff; }
.award-rows li:hover .yr { color: var(--yellow); }
.award-rows li:hover .org { color: rgba(255, 255, 255, 0.6); }

/* duo portrait rises into the scene */
html:not(.reduced) .rv[data-rv="rise"] { transform: translateY(150px); }


/* ============ Ball pit (CTA band) ============ */
.cta-band { overflow: hidden; }
#pitCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: pan-y; }
.cta-inner { position: relative; z-index: 1; pointer-events: none; }
.cta-inner .btn { pointer-events: auto; }
.pit-hint {
  position: absolute; right: 18px; bottom: 12px; z-index: 1;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  color: rgba(23, 8, 47, 0.55); pointer-events: none; text-transform: uppercase;
}

/* ============ Duo backdrop words + glass ============ */
.duo-words {
  overflow: hidden;
  position: absolute; inset: -4% -6%; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-around;
  transform: rotate(-7deg);
  will-change: transform;
}
.duo-words span {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(4rem, 11vw, 9.5rem); line-height: 0.9; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.07);
}
.duo-words span:nth-child(even) { align-self: flex-end; }
.duo-copy.glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 38px 40px 26px;
  max-width: 860px;
}
.duo-scene, .duo-copy { will-change: transform; }
.duo-me, .s3 { will-change: transform; }


/* ============ Header logo morph + scroll dot (spec items) ============ */
.brand-text { max-width: 240px; overflow: hidden; white-space: nowrap; transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
html.scrolled .brand-text { max-width: 0; opacity: 0; }
#scrollTrack {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 130px; background: rgba(23, 8, 47, 0.15);
  z-index: 120; border-radius: 2px;
}
#scrollDot {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 31, 255, 0.2);
}
@media (max-width: 720px) { #scrollTrack { display: none; } }

/* ============ Brand card: scroll-driven split wipe + corner squares ============ */
.brandcard { position: relative; }
.brandcard::before, .brandcard::after {
  content: ""; position: absolute; width: 14px; height: 14px; background: var(--purple);
}
.brandcard::before { top: 18px; left: 18px; }
.brandcard::after { bottom: 18px; right: 18px; }
.bc-name .bc-l, .bc-name .bc-r { display: inline-block; will-change: transform, opacity; }
@media (min-width: 1021px) {
  html:not(.reduced) .bc-name .bc-l {
    transform: translateX(calc((1 - var(--wipe, 0)) * -110px));
    opacity: var(--wipe, 0);
  }
  html:not(.reduced) .bc-name .bc-r {
    transform: translateX(calc((1 - var(--wipe, 0)) * 110px));
    opacity: var(--wipe, 0);
  }
}

/* ============ Giant >_ divider ============ */
.prompt-giant {
  text-align: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(7rem, 16vw, 14rem); line-height: 0.8;
  color: var(--ink); letter-spacing: -0.04em;
  padding: 40px 0 70px; user-select: none;
}

/* ============ CTA band goes dark plum (spec §9) ============ */
.cta-band { background: #1E1235; border-top: none; border-bottom: none; }
.cta-kicker { color: rgba(255, 255, 255, 0.7); }
.cta-band .display { color: #fff; }
.cta-band .display .outl { -webkit-text-stroke-color: #fff; -webkit-text-fill-color: transparent; color: transparent; }
.btn-white { background: #fff; color: var(--ink); border-color: #fff; }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 255, 255, 0.25); }
.pit-hint { color: rgba(255, 255, 255, 0.45); }


/* ============ FX toggle (shown only under prefers-reduced-motion) ============ */
.fx-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 140;
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 10px 18px; cursor: pointer;
  box-shadow: 0 6px 0 var(--purple);
}
.fx-toggle:hover { transform: translateY(-2px); }


/* ============ GSAP engine adjustments ============ */
html.lenis { scroll-behavior: auto; }           /* Lenis owns smoothing */
html.gsap .word-track { animation: none; }       /* GSAP owns the marquee */
html.gsap .showcase-head { position: static; }   /* ScrollTrigger pin replaces sticky */
.showcase-feed { will-change: transform; }
.bc-name { overflow: hidden; }
/* persistent custom cursor: small dot at rest, blooms over targets */
#cursorBlob { transform: translate(-50%, -50%) scale(0.1); }
#cursorBlob span { opacity: 0; transition: opacity 0.2s ease; }
#cursorBlob.on { transform: translate(-50%, -50%) scale(1); }
#cursorBlob.on span { opacity: 1; }


/* ============ Unified image treatment (branded duotone -> color on hover) ============ */
.show-thumb { position: relative; overflow: hidden; }
.about-photo { filter: grayscale(0.25) contrast(1.05); }

/* slab thumbs: consistent, bigger, premium frame */
.show-card .show-thumb {
  width: 168px; height: 168px; border-radius: 20px;
  border: none; transform: rotate(3deg);
  box-shadow: 0 14px 30px rgba(23, 8, 47, 0.35);
}

/* companion: no harsh shadow filter (the SVG has its own contact shadow now) */
#companion { filter: none; }


/* ============ Responsive hardening ============ */
@media (max-width: 1020px) {
  /* horizontal reveal variants become vertical — no sideways overflow */
  html:not(.reduced) .rv[data-rv="left"],
  html:not(.reduced) .rv[data-rv="right"] { transform: translateY(36px); }
  .show-card { --notch: 34px; }
}
@media (max-width: 720px) {
  .show-card { --notch: 24px; }
  .show-card .slab { padding: 24px calc(var(--notch) + 22px) 26px calc(var(--notch) + 26px); }
  .show-card h3 { font-size: 1.15rem; }
  /* the cat steps aside on phones: smaller + translucent, never blocks reading */
  #companion { opacity: 0.55; width: 96px; }
  .display { font-size: clamp(2.1rem, 9.4vw, 2.9rem); }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .duo-words span { -webkit-text-stroke-width: 1px; }
  .stat-board div { padding: 18px 16px; }
  .stat-board dt { font-size: 1.9rem; }
  .uplink-form { padding: 22px 18px; box-shadow: 8px 8px 0 var(--purple); }
  .footer-top { gap: 40px; }
  .bc-wrap { padding: 40px 18px 0; }
  .brandcard { padding: 54px 20px 48px; }
}


/* ============ Seam + ultra-wide fixes ============ */
.showcase { padding-bottom: 24px; }
#services { padding-top: 70px; }
.prompt-giant { padding: 24px 0 50px; }
/* portrait never crops at the duo boundary on wide screens */



/* ============ 3D cat active: retire the SVG visual (brain keeps running) ============ */
html.cat3d #companion svg { visibility: hidden; }

/* ============ Duo: glass team card for the human half ============ */
.duo-me.duo-card {
  position: absolute; right: 6%; bottom: 20px; z-index: 2;
  width: clamp(300px, 30vw, 460px); margin: 0; padding: 18px 18px 20px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px rgba(10, 2, 28, 0.4);
}
.duo-me.duo-card img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top;
  mix-blend-mode: normal; border-radius: 14px;
  filter: grayscale(1) contrast(1.06);
}
.duo-me.duo-card figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  color: #fff; font-size: 0.8rem; letter-spacing: 0.12em; margin-bottom: 10px;
}
.duo-me.duo-card figcaption span { font-size: 0.52rem; color: rgba(255, 255, 255, 0.6); }
.duo-shadow { display: none; }
@media (max-width: 720px) { .duo-me.duo-card { width: 240px; right: 4%; } }


/* ============ Mind-map pipeline in dialogs ============ */
.miniflow { margin: 18px 0 6px; overflow-x: auto; }
.miniflow > svg { display: block; width: 100%; min-width: 560px; }
.mf-wire {
  fill: none; stroke: var(--purple); stroke-width: 2.5; stroke-dasharray: 7 6;
  animation: bpdash 1.1s linear infinite; opacity: 0.65;
}
.mf-node rect { fill: var(--lavender); stroke: var(--ink); stroke-width: 2; }
.mf-node.decision rect { fill: #fff4d6; stroke: #c98e00; }
.mf-node img { border-radius: 5px; display: block; margin: 3px; background: #fff; }
.mf-ico { display: flex; width: 24px; height: 24px; margin: 2px; color: var(--purple); }
.mf-ico svg { width: 22px; height: 22px; min-width: 0; }
.mf-label { font-family: var(--font-body); line-height: 1.15; overflow: hidden; }
.mf-label b { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.mf-label i { font-style: normal; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; color: #8a7fa0; text-transform: uppercase; }


/* ============ Taste pass ============ */
.center-eyebrow { text-align: center; }
/* mono kicker: one size, one tracking, everywhere */
.eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; margin-bottom: 16px; }
/* consistent border weight on interactive cards */
.faq details, .stat-board div { border-width: 2px; }
/* duo backdrop words slightly stronger (were nearly invisible) */
.duo-words span { -webkit-text-stroke-color: rgba(255, 255, 255, 0.1); }


/* ============ Large-desktop scale (1920-class screens) ============ */
@media (min-width: 1700px) {
  :root { --container: 1320px; }
  .display { font-size: clamp(2.6rem, 6.5vw, 5.5rem); }
  .hero-inner { max-width: 960px; }
  .hero h1 { font-size: clamp(3rem, 8.2vw, 7rem); }
  .lead, .hero-sub { font-size: 1.14rem; max-width: 600px; }
  #blueprintSvg { width: 100%; }
}


/* ============ Vector pipeline covers (no stock photos) ============ */
.cover {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(150deg, #241040 0%, #17082F 70%);
  overflow: hidden;
}
.cover-ghost {
  position: absolute; right: 8px; bottom: -14px; font-style: normal;
  font-family: var(--font-display); font-weight: 800; font-size: 92px; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.12);
}
.cover-wire { position: absolute; inset: 10%; width: 80%; height: 80%; }
.cover-wire path { stroke: rgba(255, 184, 0, 0.55); stroke-width: 2; stroke-dasharray: 6 6; animation: bpdash 1.2s linear infinite; }
.cn {
  position: absolute; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.07); border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center; color: #fff;
  backdrop-filter: blur(2px);
}
.cn svg { width: 19px; height: 19px; }
.cn.cn2 { border-color: var(--yellow); color: var(--yellow); }
.cn.cn3 { border-color: var(--teal); color: var(--teal); }
.cover-sq .cn1 { left: 14%; top: 12%; }
.cover-sq .cn2 { left: 40%; top: 42%; }
.cover-sq .cn3 { left: 62%; top: 70%; }
.cover-wide .cn1 { left: 11%; top: 38%; }
.cover-wide .cn2 { left: 46%; top: 40%; }
.cover-wide .cn3 { left: 79%; top: 34%; }
.cover-logos {
  position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center;
}
.cover-logos img { width: 16px; height: 16px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px; box-sizing: content-box; }
.work-thumb { background: #17082F; }
.work-card:hover .cover .cn { border-color: #fff; }
.work-card:hover .cover-wire path, .show-card:hover .cover-wire path { stroke: var(--yellow); }


/* ============ DepreShawn's speech bubble ============ */
#catChat {
  position: fixed; z-index: 125;
  width: min(320px, calc(100vw - 24px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(23, 8, 47, 0.28), 0 6px 0 var(--purple);
  font-size: 0.92rem;
  animation: ccPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ccPop { from { transform: scale(0.86) translateY(8px); opacity: 0; } }
#catChat header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 8px 8px 16px; border-bottom: 2px solid var(--line);
}
#catChat header .mono { font-size: 0.6rem; letter-spacing: 0.16em; color: var(--purple); }
.cc-x {
  width: 34px; height: 34px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 0.95rem; border-radius: 50%;
}
.cc-x:hover { background: var(--lavender); color: var(--ink); }
.cc-body { padding: 14px 16px 4px; }
.cc-msg { margin: 0 0 10px; line-height: 1.55; color: var(--ink); }
.cc-go { display: inline-block; margin-top: 6px; font-weight: 700; border-bottom: 2px solid var(--yellow); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 16px; }
.cc-chip {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  transition: all 0.15s ease;
}
.cc-chip:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-1px); }


/* ============ Stack / arsenal ============ */
#stackGroups { display: grid; gap: 26px; margin-top: 10px; }
.stack-label { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.stack-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.stack-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 9px 16px; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  color: var(--ink); transition: border-color 0.15s ease, transform 0.15s ease;
}
.stack-chip:hover { border-color: var(--purple); transform: translateY(-2px); }
.stack-chip img { width: 18px; height: 18px; object-fit: contain; }

/* services: icon + most-requested badge */
.svc-card { position: relative; }
.svc-ico { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; background: var(--lavender); color: var(--purple); align-items: center; justify-content: center; margin-bottom: 14px; }
.svc-ico svg { width: 22px; height: 22px; }
.svc-pop {
  position: absolute; top: 14px; right: 14px;
  font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-weight: 500;
}
@media (min-width: 1021px) { .svc-cards { grid-template-columns: repeat(4, 1fr); } }


/* ============ DARK HERO: name behind the human ============ */
.hero-dark {
  margin-top: -76px;
  background:
    radial-gradient(52% 64% at 50% 34%, #3a1266 0%, rgba(43, 10, 82, 0.55) 48%, rgba(23, 8, 47, 0) 100%),
    linear-gradient(175deg, #17082F 0%, #1E0B3D 55%, #2b0a52 100%);
  min-height: 94vh;
  padding: 150px 0 0;
  display: block;
  overflow: hidden;
}
.hero-stage { position: relative; height: calc(92vh - 90px); min-height: 560px; }
.hero-glow {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: min(46vw, 620px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 77, 255, 0.5) 0%, rgba(126, 0, 204, 0.22) 48%, transparent 72%);
  filter: blur(8px);
  z-index: 1;
}
.hero-dark h1.hero-name {
  position: absolute; left: 50%; top: 6%; transform: translateX(-50%);
  z-index: 2; margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3.4rem, 12.2vw, 13.2rem); line-height: 0.9; letter-spacing: -0.02em;
  color: #fff; -webkit-text-fill-color: #fff;
}
.hero-dark h1.hero-name .hn-outl { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.045em #fff; }
.hero-cutout {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: min(58vh, 620px); width: auto; max-width: none;
  z-index: 3;
  filter: drop-shadow(0 24px 60px rgba(10, 2, 24, 0.6));
}
.hero-meta { position: absolute; bottom: 9%; z-index: 4; width: min(300px, 30vw); }
.hero-meta-l { left: 0; }
.hero-meta-r { right: 0; text-align: right; }
.hero-dark .hero-sub { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; margin: 0 0 16px; max-width: none; }
.hero-role { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; margin: 0 0 18px; }
.hero-role em { font-style: normal; color: var(--purple-soft); font-weight: 700; }
.hero-mini-socials { display: flex; gap: 10px; }
.hero-mini-socials a {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.35); color: #fff; font-weight: 700; font-size: 0.8rem;
  transition: all 0.15s ease;
}
.hero-mini-socials a:hover { background: #fff; color: var(--ink); }
.hero-dark .hero-actions { justify-content: flex-end; }
.btn-ghostw { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-ghostw:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* nav floats transparent over the dark hero, goes solid on scroll */
html:not(.scrolled) .nav { background: transparent; backdrop-filter: none; }
html:not(.scrolled) .nav .brand-text, html:not(.scrolled) .nav-links a { color: #fff; }
html:not(.scrolled) .nav-links a:hover, html:not(.scrolled) .nav-links a.is-current { background: rgba(255, 255, 255, 0.14); color: #fff; }
html:not(.scrolled) .nav-burger span { background: #fff; }

/* duo card cutout sits on a brand gradient */
.duo-me.duo-card img {
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  background: #141117;
  filter: none;
}

@media (max-width: 760px) {
  .hero-dark { min-height: 100svh; }
  .hero-stage { height: auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 56px; }
  .hero-dark h1.hero-name { position: static; transform: none; white-space: normal; text-align: center; margin: 18px 0 6px; }
  .hero-name span { display: block; }
  .hero-glow { top: 40%; width: 78vw; }
  .hero-cutout { position: static; transform: none; align-self: center; height: auto; width: min(86vw, 420px); margin-top: -6vw; }
  .hero-meta { position: static; width: 100%; text-align: left; margin-top: 22px; }
  .hero-meta-r { text-align: left; }
  .hero-dark .hero-actions { justify-content: flex-start; }
}
@media (min-width: 761px) and (max-width: 1020px) {
  .hero-meta { width: 34vw; }
  .hero-cutout { height: min(54vh, 520px); }
}


/* FINAL reveal reset — must stay the LAST .rv rule so .in always beats every
   variant transform regardless of where a variant was declared */
html:not(.reduced) .rv.in { opacity: 1; transform: none; }


/* ============ Duo: free cutout, hero-style (no card, no border) ============ */
.duo-me.duo-free {
  position: absolute; right: 6%; bottom: -3px; z-index: 6;
  width: clamp(280px, 27vw, 430px); margin: 0; padding: 0;
  background: none; border: none; box-shadow: none; backdrop-filter: none;
}

.duo-me.duo-free img {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: unset;
  background: none; filter: drop-shadow(0 10px 18px rgba(10, 2, 24, 0.28));
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.duo-glow {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 77, 255, 0.34) 0%, rgba(126, 0, 204, 0.14) 52%, transparent 72%);
  filter: blur(10px); z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 78%);
}
.duo-me.duo-free figcaption {
  margin: 0 0 12px; text-align: center;
  color: rgba(255, 255, 255, 0.85); font-size: 0.62rem; letter-spacing: 0.24em;
}
@media (max-width: 720px) { .duo-me.duo-free { width: 260px; right: 2%; } }