/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /*
    Background system — 4 distinct layers, each ~8 luminance steps apart.
    bg → surface → surface-2 → surface-3
    The gap is intentional: cards need to feel elevated, not blended.
  */
  --bg:          #fafaf9;
  --surface:     #f5f3ef;
  --surface-2:   #eeece8;
  --surface-3:   #e7e5e1;

  /*
    Borders — two steps: resting and hover.
  */
  --border:      #e0deda;
  --border-hi:   #ccc9c4;

  --text:        #1c1b19;
  --muted:       #585550;
  --dim:         #b8b5b0;

  --accent:      #5055c5;
  --accent-glow: rgba(80, 85, 197, 0.12);
  --accent-dim:  rgba(80, 85, 197, 0.07);

  --r:           12px;
  --r-lg:        20px;
  --r-xl:        24px;      /* card radius                                   */
  --nav-h:       72px;
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --f-head:      'Inter', system-ui, -apple-system, sans-serif;
  --f-body:      'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

img, svg { display: block; max-width: 100%; }
a        { color: inherit; text-decoration: none; }
ul       { list-style: none; }
button   { cursor: none; border: none; background: none; font-family: inherit; color: inherit; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width .2s var(--ease), height .2s var(--ease);
  mix-blend-mode: exclusion;
  will-change: transform;
}

.cursor-follower {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ease), height .35s var(--ease), border-color .2s;
  will-change: transform;
}

body.c-hover .cursor          { width: 0; height: 0; }
body.c-hover .cursor-follower { width: 64px; height: 64px; border-color: var(--accent); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

section { padding: 160px 0; }

/* Section separation is handled via background color shifts, not borders */

/* ============================================================
   NAVIGATION — glassy floating pill, dark over hero / light on scroll
   ============================================================ */
.nav {
  position: fixed;
  inset: 14px 0 auto;
  height: auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  z-index: 900;
  transition: transform .45s var(--ease);
  border-bottom: 0;
  pointer-events: none;          /* let clicks pass on the empty rail */
}
.nav-inner { pointer-events: auto; }

.nav.hidden { transform: translateY(calc(-100% - 14px)); }

.nav-inner {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 9px 12px 9px 26px;
  border-radius: 100px;
  background: rgba(14,13,18,.42);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 10px 36px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:
    background .35s var(--ease),
    border-color .35s var(--ease),
    box-shadow .35s var(--ease);
}

.nav.scrolled .nav-inner {
  background: rgba(250,250,249,.78);
  border-color: var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

.nav-logo {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #f5f3ef;
  transition: color .3s;
}
.nav-logo span { color: #b6b8ff; }
.nav.scrolled .nav-logo { color: var(--text); }
.nav.scrolled .nav-logo span { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 32px; }

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(245,243,239,.72);
  letter-spacing: .01em;
  transition: color .2s;
}
.nav-link:hover, .nav-link.active { color: #ffffff; }
.nav.scrolled .nav-link { color: var(--muted); }
.nav.scrolled .nav-link:hover,
.nav.scrolled .nav-link.active { color: var(--text); }

.nav-cta {
  color: #f5f3ef !important;
  border: 1px solid rgba(245,243,239,.22);
  padding: 8px 20px;
  border-radius: 100px;
  transition: border-color .2s, color .2s, background .2s !important;
}
.nav-cta:hover {
  border-color: rgba(255,255,255,.7);
  color: #ffffff !important;
  background: rgba(255,255,255,.07);
}
.nav.scrolled .nav-cta {
  color: var(--text) !important;
  border-color: var(--border-hi);
}
.nav.scrolled .nav-cta:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
  background: var(--accent-dim);
}

.nav-toggle span { background: #f5f3ef; }
.nav.scrolled .nav-toggle span { background: var(--text); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: transform .3s, opacity .3s; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.mobile-menu.open { opacity: 1; pointer-events: all; }

.mobile-menu ul { display: flex; flex-direction: column; gap: 8px; text-align: center; }

.mobile-link {
  font-family: var(--f-head);
  font-size: clamp(36px, 8vw, 60px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--dim);
  display: block;
  padding: 8px;
  transition: color .2s;
}
.mobile-link:hover { color: var(--text); }

/* ============================================================
   HERO — Dark, premium, editorial
   ============================================================ */
.hero {
  min-height: max(74vh, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 40px);
  position: relative;
  overflow: hidden;
  color: #f5f3ef;
  background:
    radial-gradient(ellipse 70% 60% at 78% 42%, rgba(120,110,220,.18) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 8% 92%, rgba(80,85,197,.10) 0%, transparent 65%),
    linear-gradient(165deg, #0a0a0d 0%, #0e0d14 50%, #07070a 100%);
}

/* Decorative soft orb — feels editorial, never noisy */
.hero-bg-glow {
  position: absolute;
  top: -8%;
  right: -12%;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 34%, rgba(255,255,255,.10) 0%, rgba(120,110,220,.08) 28%, transparent 60%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

/* Grain overlay — gentle, blended */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: .055;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.hero-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 48px;
  padding-top: 8px;
  padding-bottom: 28px;
}

.hero-content { max-width: 580px; }

/* Eyebrow badge */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245,243,239,.78);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px 6px 10px;
  border-radius: 100px;
  margin-bottom: 16px;
  opacity: 0;
  width: fit-content;
}

.eyebrow-dot {
  width: 6px; height: 6px;
  background: #8ad7a7;          /* mint status dot — fits the dark theme */
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(138,215,167,.7);
  animation: blink 2.5s ease-in-out infinite;
}

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.hero-title {
  font-family: var(--f-head);
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin-bottom: 20px;
  color: #fafafa;
}

.title-line { display: block; opacity: 0; }

.title-tertiary {
  font-size: .58em;
  font-weight: 400;
  color: rgba(245,243,239,.52);
  letter-spacing: -0.01em;
  margin-top: .28em;
  line-height: 1.3;
}

.hero-subtitle {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  color: rgba(245,243,239,.58);
  max-width: 460px;
  line-height: 1.72;
  margin-bottom: 28px;
  opacity: 0;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; }

/* CTA overrides for dark hero — primary inverts to light pill */
.hero .btn-primary {
  background: #f5f3ef;
  color: #0a0a0d;
  font-weight: 600;
}
.hero .btn-primary:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,255,255,.18);
}
.hero .btn-ghost {
  border-color: rgba(245,243,239,.24);
  color: rgba(245,243,239,.92);
}
.hero .btn-ghost:hover {
  border-color: rgba(245,243,239,.55);
  background: rgba(245,243,239,.05);
  color: #ffffff;
}

/* RIGHT — portrait stage + floating testimonial */
.hero-identity {
  position: relative;
  height: 400px;
  width: 100%;
  animation: heroIdentityIn 0.95s 1.85s var(--ease) both;
}

@keyframes heroIdentityIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hi-portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 290px;
  height: 290px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.02),
    0 20px 60px rgba(0,0,0,.5);
}

.hi-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(45%) contrast(1.04) brightness(.92);
  display: block;
  transition: filter 0.45s var(--ease);
}

.hero-identity:hover .hi-img {
  filter: grayscale(0%) contrast(1.04) brightness(.98);
}

/* Single testimonial — dark glass card, bottom-right of portrait */
.hero-testimonial {
  position: absolute;
  bottom: 2%;
  right: -8%;
  width: 272px;
  background: rgba(20,18,28,.58);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border-radius: 16px;
  padding: 22px 24px 20px;
  color: #f5f3ef;
  box-shadow:
    0 10px 28px rgba(0,0,0,.32),
    0 2px 6px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
  z-index: 2;
  opacity: 0;
  animation:
    htCardIn  0.85s 2.0s  var(--ease) forwards,
    htFloat   7s    2.85s ease-in-out infinite;
}

@keyframes htCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes htFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.hero-quote {
  margin: 0;
}

.hero-quote blockquote {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.65;
  color: rgba(245,243,239,.92);
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

.hero-quote figcaption {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(245,243,239,.52);
  line-height: 1.4;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-testimonial { animation: none; opacity: 1; }
}

/* Scroll hint — light on dark */
.hero-scroll {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(245,243,239,.42);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp 1s 2.2s forwards;
  z-index: 1;
}

.scroll-bar {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(245,243,239,.42), transparent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes fadeUp  { to { opacity: 1; } }
@keyframes pulse   { 0%,100% { transform: scaleY(1); opacity: .4; } 50% { opacity: .9; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}

.btn-primary {
  background: #1c1b19;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
}
.btn-primary:hover {
  background: #2d2b29;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}

.btn-ghost { border: 1.5px solid rgba(28,27,25,.2); color: var(--text); font-weight: 500; }
.btn-ghost:hover { border-color: rgba(28,27,25,.48); background: rgba(28,27,25,.04); color: var(--text); }

.btn-sm { padding: 10px 22px; font-size: 14px; }

.btn-full { width: 100%; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-head {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 96px;
}

.section-num {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  padding-top: 10px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--f-head);
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.section-sub {
  font-size: 17px;
  color: var(--muted);
  margin-top: 14px;
  font-weight: 400;
  line-height: 1.65;
}

/* ============================================================
   POSITIONING — stats + copy strip between hero and work
   ============================================================ */
.positioning {
  padding: 72px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pos-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}

.pos-stats {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.pos-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pos-body {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}

.pos-toolkit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pos-toolkit-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .6;
}

@media (max-width: 860px) {
  .pos-inner { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   WORK / PROJECTS
   ============================================================ */
.work {
  background:
    radial-gradient(ellipse 130% 50% at 50% 0%, rgba(80,85,197,.1) 0%, transparent 48%),
    #0c0b14;
  padding: 120px 0 160px;
}

/* Section-head text on dark background */
.work .section-num  { color: rgba(140,130,255,.7); }
.work .section-title { color: #f0eeff; }
.work .section-sub  { color: rgba(240,238,255,.42); }

.projects {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 52px 56px;

  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.32), 0 20px 60px rgba(0,0,0,.52);

  transition:
    box-shadow   .35s ease,
    transform    .35s var(--ease);
}

/*
  Rim-light effect — a soft white catch-light in the top-left corner.
  Gives the card a subtle 3D surface quality without being heavy.
  z-index: 0 keeps it behind child content.
*/
.project::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.55) 0%,
    transparent 42%
  );
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stacks above the pseudo overlay */
.project-visual,
.project-info { position: relative; z-index: 1; }

/* ── Per-project color identities ──────────────────────────────
   Each gradient radiates from the side where the mockup lives,
   fading to transparent so the text column stays clean.
   Border and hover glow are tinted to match.
   ─────────────────────────────────────────────────────────────*/

/* 01 — Blue (web project, mockup on left) */
.project[data-num="01"] {
  background:
    radial-gradient(ellipse 72% 110% at -4% 50%, rgba(170,120,255,.52) 0%, transparent 62%),
    linear-gradient(155deg, #fdfbff 0%, #f5f0ff 55%, #ece6ff 100%);
  border-color: rgba(129, 52, 175, 0.2);
}
.project[data-num="01"]:hover {
  border-color: rgba(129, 52, 175, 0.45);
  box-shadow:
    0 0 0 1px rgba(129, 52, 175, 0.15),
    0 12px 36px rgba(0,0,0,.38),
    0 32px 80px rgba(129, 52, 175, 0.28);
}

/* 02 — Indigo (dashboard, mockup on right — flipped card) */
.project[data-num="02"] {
  background:
    radial-gradient(ellipse 72% 110% at 104% 50%, rgba(120,140,255,.5) 0%, transparent 62%),
    linear-gradient(155deg, #f8f9ff 0%, #eef1ff 55%, #e3e8ff 100%);
  border-color: rgba(81, 91, 212, 0.2);
}
.project[data-num="02"]:hover {
  border-color: rgba(81, 91, 212, 0.42);
  box-shadow:
    0 0 0 1px rgba(81, 91, 212, 0.14),
    0 12px 36px rgba(0,0,0,.38),
    0 32px 80px rgba(81, 91, 212, 0.26);
}

/* 03 — Warm neutral (STAX e-commerce — editorial, fashion-focused) */
.project[data-num="03"] {
  background:
    radial-gradient(ellipse 72% 110% at -4% 50%, rgba(60,50,35,.10) 0%, transparent 62%),
    linear-gradient(155deg, #faf8f5 0%, #f0ebe3 55%, #e5ddd2 100%);
  border-color: rgba(100,85,60,.16);
}
.project[data-num="03"]:hover {
  border-color: rgba(100,85,60,.36);
  box-shadow:
    0 0 0 1px rgba(100,85,60,.12),
    0 12px 36px rgba(0,0,0,.38),
    0 32px 80px rgba(60,50,35,.20);
}

/* Dark mockup frame — screenshot pops against near-black */
.project[data-num="03"] .mockup-visual {
  background: #141210;
}
.project[data-num="03"] .mockup-visual img {
  object-fit: cover;
  object-position: top center;
  padding: 0;
}

.project:hover {
  transform: translateY(-7px);
  box-shadow: 0 8px 30px rgba(0,0,0,.42), 0 36px 88px rgba(0,0,0,.62);
}

.project-flip .project-visual { order: 2; }
.project-flip .project-info   { order: 1; }

/* ── Featured hero project — larger visual weight ── */
.project-featured {
  grid-template-columns: 1.18fr 1fr;
  padding: 62px 64px 62px 56px;
  gap: 80px;
}
.project-featured .project-title { font-size: clamp(18px, 1.9vw, 26px); }
.project-featured .project-desc  { font-size: 16px; max-width: 390px; }

/* ── Mockup shell ── */
.mockup {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  /* outline gives a subtle contained-UI feel without a heavy border */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.07),
    0 4px 20px rgba(0,0,0,.1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.project:hover .mockup {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.09),
    0 24px 60px rgba(0,0,0,.16);
}

/* Browser mockup */
.mockup-browser {
  background: linear-gradient(135deg, #0d1b2a 0%, #1b3a5c 100%);
  padding: 20px;
  aspect-ratio: 4/3;
}

.browser-chrome {
  background: rgba(255,255,255,.06);
  border-radius: 6px 6px 0 0;
  padding: 9px 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.browser-chrome span { width: 8px; height: 8px; border-radius: 50%; }
.browser-chrome span:nth-child(1) { background: #ff5f57; }
.browser-chrome span:nth-child(2) { background: #ffbd2e; }
.browser-chrome span:nth-child(3) { background: #28ca41; }

.browser-body {
  background: var(--surface);
  border-radius: 0 0 6px 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bb-hero   { height: 80px; background: linear-gradient(135deg, #1a3a60, #2a6aaf); border-radius: 5px; }
.bb-cards  { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.bb-card   { height: 52px; background: var(--border); border-radius: 4px; }
.bb-row    { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.bb-block  { height: 32px; background: var(--dim); border-radius: 4px; }
.bb-block.wide { background: var(--border); }

/* Dashboard mockup */
.mockup-dash {
  background: linear-gradient(135deg, #0a0d14, #13192a);
  aspect-ratio: 4/3;
  display: flex;
  gap: 0;
}

.dash-side {
  width: 56px;
  background: var(--surface);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}
.ds-logo  { width: 28px; height: 28px; background: var(--accent); border-radius: 6px; opacity: .6; }
.ds-items { display: flex; flex-direction: column; gap: 8px; }
.ds-item  { height: 26px; background: var(--border); border-radius: 4px; }
.ds-item.active { background: var(--accent); opacity: .5; }

.dash-main {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dm-topbar { height: 22px; background: var(--border); border-radius: 4px; width: 55%; }
.dm-cards  { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.dm-card   { height: 48px; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); }

.dm-chart {
  flex: 1;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--border);
  min-height: 60px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  overflow: hidden;
}

.chart-line {
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .5;
  transform: translateY(-24px);
  box-shadow: 0 0 20px var(--accent-glow);
}

.dm-table  { display: flex; flex-direction: column; gap: 5px; }
.dt-row    { height: 14px; background: var(--border); border-radius: 3px; }
.dt-row:nth-child(2) { width: 80%; }
.dt-row:nth-child(3) { width: 65%; }

/* Landing page mockup */
.mockup-lp {
  background: linear-gradient(140deg, #1a0533 0%, #2c1b68 50%, #0e0020 100%);
  aspect-ratio: 4/3;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-nav { height: 20px; background: rgba(255,255,255,.06); border-radius: 100px; width: 100%; }

.lp-hero { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.lph-label { width: 80px; height: 14px; background: var(--accent-dim); border-radius: 100px; }
.lph-h1   { height: 22px; background: rgba(255,255,255,.18); border-radius: 4px; }
.lph-h1.short { width: 68%; }
.lph-sub  { height: 12px; background: rgba(255,255,255,.08); border-radius: 4px; width: 85%; }
.lph-cta  { height: 30px; width: 110px; background: linear-gradient(90deg, #5055c5, #7b78e0); border-radius: 100px; opacity: .65; margin-top: 4px; }

.lp-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; flex: 1; }
.lp-feat { background: rgba(255,255,255,.05); border-radius: 8px; border: 1px solid rgba(255,255,255,.06); }

/* Image-based mockup — for real screenshot / hero visual previews */
.mockup-visual {
  aspect-ratio: 4/3;
  background: linear-gradient(150deg, #fefeff 0%, #f5f2fc 45%, #ede8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mockup-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 10px;
  display: block;
}

/* Project info */
.project-meta {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
}

.project-type {
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);  /* default; overridden per project below */
}

/* Per-project type label colors — match the card tint */
.project[data-num="01"] .project-type { color: #8134af; }
.project[data-num="02"] .project-type { color: #515bd4; }
.project[data-num="03"] .project-type { color: #8b6f42; }

.project-year { font-size: 12px; color: var(--muted); }

.project-title {
  font-family: var(--f-head);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.project-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.project-tags span {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--muted);
}

.project-actions { display: flex; align-items: center; gap: 24px; }

.link-arrow {
  font-size: 15px; font-weight: 500;
  border-bottom: 1px solid var(--border-hi);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
/* Default hover */
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }

/* Per-project hover colors */
.project[data-num="01"] .link-arrow:hover { color: #8134af; border-color: #8134af; }
.project[data-num="02"] .link-arrow:hover { color: #515bd4; border-color: #515bd4; }
.project[data-num="03"] .link-arrow:hover { color: #dd2a7b; border-color: #dd2a7b; }

/* Tag pills — subtle tinted borders per project */
.project[data-num="01"] .project-tags span { background: rgba(129,52,175,.08);  border-color: rgba(129,52,175,.22);  color: #8134af; }
.project[data-num="02"] .project-tags span { background: rgba(81,91,212,.08);   border-color: rgba(81,91,212,.22);   color: #515bd4; }
.project[data-num="03"] .project-tags span { background: rgba(221,42,123,.07);  border-color: rgba(221,42,123,.2);   color: #dd2a7b; }

.link-plain { font-size: 14px; color: var(--muted); transition: color .2s; }
.link-plain:hover { color: var(--text); }

/* ============================================================
   AI WORKFLOW
   ============================================================ */
.ai-section {
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(80,85,197,.06) 0%, transparent 52%),
    linear-gradient(180deg, #f0eeff 0%, #eceaff 55%, #e8e6ff 100%);
  padding-bottom: 40px;
}

.workflow-intro {
  font-size: 20px; color: #2a2825; line-height: 1.75;
  max-width: 640px; margin-bottom: 64px;
  font-weight: 400;
  letter-spacing: -.01em;
}

.workflow-grid {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;
  align-items: start;
  gap: 0;
  margin-bottom: 72px;
}

.workflow-step {
  background: #fff;
  border: none;
  border-radius: var(--r-lg);
  padding: 32px 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.09);
  transition: box-shadow .3s var(--ease), transform .35s var(--ease);
}

.workflow-step::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.workflow-step:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.12);
  transform: translateY(-4px);
}
.workflow-step:hover::before { transform: scaleX(1); }

.ws-num {
  font-family: var(--f-head);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; color: var(--accent);
  margin-bottom: 18px;
}

.ws-icon { width: 38px; height: 38px; color: var(--muted); margin-bottom: 14px; }
.ws-icon svg { width: 100%; height: 100%; }

.workflow-step h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.workflow-step p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 14px; }

.ws-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-tools span {
  font-size: 11px; font-weight: 500;
  padding: 3px 10px;
  background: var(--accent-dim); color: var(--accent);
  border-radius: 100px;
}

.workflow-arrow {
  display: flex; align-items: flex-start;
  padding-top: 54px;
  justify-content: center;
  color: var(--border-hi);
}
.workflow-arrow svg { width: 28px; height: auto; }

.workflow-quote {
  border-left: 2px solid var(--accent);
  padding: 20px 24px;
  font-size: clamp(14px, 1.4vw, 16px);
  font-style: italic;
  line-height: 1.75;
  letter-spacing: -.01em;
  color: var(--muted);
}

/* ============================================================
   AI WORKFLOW — WORKBENCH LAYOUT (wf-* system)
   Replaces old workflow-grid/workflow-step on the homepage.
   Old workflow-step class is retained below for case study pages.
   ============================================================ */

/* ── Two-column grid: visual left / steps right ── */
.wf-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 96px;
  align-items: start;
}

/* ── Left: editorial text column ── */
.wf-editorial {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.wf-ed-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* ── Panel title bars ── */
.wf-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  flex-shrink: 0;
}

.wf-panel--ai .wf-bar  { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); }
.wf-bar--light         { background: rgba(0,0,0,.03);       border-bottom: 1px solid rgba(0,0,0,.07); }
.wf-bar--brand         { background: rgba(100,40,180,.14);  border-bottom: 1px solid rgba(160,80,255,.2); }

.wf-dots { display: flex; gap: 5px; flex-shrink: 0; }
.wf-dots span          { width: 8px; height: 8px; border-radius: 50%; }
.wf-dots span:nth-child(1) { background: #ff5f57; }
.wf-dots span:nth-child(2) { background: #ffbd2e; }
.wf-dots span:nth-child(3) { background: #28ca41; }
.wf-dots--light span   { opacity: .52; }

.wf-bar-title          { font-size: 11px; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.4); }
.wf-bar-title--light   { color: rgba(0,0,0,.35); }

/* ── Panel 1: AI / Claude chat ── */
.wf-panel--ai {
  background: #0e0c18;
  border: 1px solid rgba(120,100,255,.14);
  box-shadow: 0 4px 28px rgba(0,0,0,.42), 0 0 0 1px rgba(120,100,255,.06);
  min-height: 200px;
}

.wf-chat {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.wfc-msg { display: flex; flex-direction: column; gap: 4px; }

.wfc-role {
  font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(170,160,255,.45);
}
.wfc-role--ai { color: rgba(80,200,130,.55); }

.wfc-msg p          { font-size: 12px; line-height: 1.65; font-family: var(--f-body); }
.wfc-msg--user p    { color: rgba(210,205,255,.65); }
.wfc-msg--ai p      { color: rgba(180,225,195,.55); }

.wfc-cursor {
  width: 7px; height: 13px;
  background: rgba(80,200,130,.65);
  border-radius: 1px;
  animation: wfc-blink 1.2s ease-in-out infinite;
}
@keyframes wfc-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Panel 2: Figma / Design ── */
.wf-panel--wire {
  background: #f0eeeb;
  border: 1px solid rgba(0,0,0,.09);
  box-shadow: 0 2px 14px rgba(0,0,0,.08);
  overflow: hidden;
}

.wf-wire-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.wfw-topbar { height: 18px; background: #d5d1cb; border-radius: 3px; }

.wfw-hero-strip { display: flex; flex-direction: column; gap: 5px; padding: 4px 0; }
.wfw-line        { height: 11px; background: #c5c0b8; border-radius: 3px; }
.wfw-line--h1    { height: 14px; background: #b2ada4; }
.wfw-line--short { width: 66%; }
.wfw-line--sub   { height: 8px; width: 80%; background: #cac5be; }

.wfw-btn-row { display: flex; gap: 6px; margin-top: 2px; }
.wfw-btn          { height: 18px; width: 56px; background: #b5b0a7; border-radius: 100px; }
.wfw-btn--ghost   { background: transparent; border: 1.5px dashed #b5b0a7; }

.wfw-card-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.wfw-card     { height: 44px; background: #d8d4ce; border-radius: 6px; border: 1.5px dashed #c2bdb5; }

.wfw-note {
  font-size: 9px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(0,0,0,.22); text-align: right;
  margin: 0;
}

/* ── Panel 3: Shipped UI ── */
.wf-panel--ui {
  background: #0a0a12;
  border: 1px solid rgba(160,80,255,.2);
  box-shadow: 0 4px 28px rgba(80,20,160,.34), 0 0 0 1px rgba(160,80,255,.08);
  overflow: hidden;
}

.wf-ui-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.wfui-topbar         { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wfui-logo           { width: 28px; height: 9px; background: rgba(255,255,255,.18); border-radius: 2px; }
.wfui-nav-items      { display: flex; gap: 7px; }
.wfui-nav-items span { width: 18px; height: 5px; background: rgba(255,255,255,.1); border-radius: 2px; }
.wfui-cta-pill       { width: 36px; height: 15px; background: rgba(160,80,255,.38); border-radius: 100px; }

.wfui-hero-content { display: flex; flex-direction: column; gap: 5px; padding: 2px 0; }
.wfui-badge        { width: 58px; height: 10px; background: rgba(160,80,255,.22); border-radius: 100px; border: 1px solid rgba(160,80,255,.3); }
.wfui-h1           { height: 13px; background: rgba(255,255,255,.2); border-radius: 3px; }
.wfui-h1--2        { width: 76%; background: rgba(255,255,255,.14); }
.wfui-sub          { height: 6px; width: 80%; background: rgba(255,255,255,.08); border-radius: 2px; margin-top: 1px; }

.wfui-btn-group { display: flex; gap: 5px; margin-top: 5px; }
.wfui-btn       { height: 18px; border-radius: 100px; }
.wfui-btn--pri  { width: 58px; background: linear-gradient(90deg, #7b2fe0, #a855f7); }
.wfui-btn--sec  { width: 44px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }

.wfui-cards-strip        { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.wfui-strip-card         { height: 40px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 7px; }
.wfui-strip-card--hi     { background: rgba(130,43,226,.22); border-color: rgba(160,80,255,.32); }

/* ── Right: editorial process steps ── */
.wf-section-lead {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 18px;
  max-width: 520px;
}

.wf-tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.wf-tool-tags span {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 16px;
  background: rgba(80,85,197,.07);
  border: 1px solid rgba(80,85,197,.16);
  border-radius: 100px;
  color: var(--accent);
  letter-spacing: .01em;
}

.wf-steps { display: flex; flex-direction: column; }

.wf-steps-list { list-style: none; }

.wf-step              { padding: 24px 0; border-top: 1px solid var(--border); }
.wf-step:first-child  { border-top: none; }
.wf-step:last-child   { border-bottom: 1px solid var(--border); }

.wf-step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}

.wf-step-num {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  flex-shrink: 0;
}

.wf-step-title {
  font-size: 15px; font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}

.wf-step-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 10px;
  padding-left: 30px;
}

.wf-step-tools {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-left: 30px;
}

.wf-step-tools span {
  font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px;
  background: var(--accent-dim); color: var(--accent);
  border-radius: 100px;
}

/* ============================================================
   ABOUT
   ============================================================ */
/* ============================================================
   ABOUT
   ============================================================ */
.about {
  background: var(--bg);
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

/* ── Intro card ── */
.about-intro {
  background: #fff;
  border: none;
  border-radius: var(--r-xl);
  padding: 56px 60px;
  margin-bottom: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 12px 36px rgba(0,0,0,.09);
}

.about-headline {
  font-family: var(--f-head);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.32;
  color: var(--text);
  margin-bottom: 24px;
}

.about-intro-body p {
  font-size: 16px;
  color: #3e3b37;
  line-height: 1.85;
  margin-bottom: 16px;
  max-width: 700px;
}

.about-intro-body p:last-child { margin-bottom: 0; }

/* ── How I work — 3-column methodology ── */
.how-i-work {
  margin-bottom: 28px;
}

.hiw-header {
  display: flex;
  align-items: baseline;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hiw-heading {
  font-family: var(--f-head);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  flex-shrink: 0;
}

.hiw-intro {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 0;
}

.hiw-col {
  padding: 28px 36px 28px 0;
  border-top: 2px solid var(--border);
}

.hiw-col + .hiw-col {
  padding-left: 36px;
  border-left: 1px solid var(--border);
}

.hiw-col--accent { border-top-color: var(--accent); }

.hiw-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}

.hiw-col-title {
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 10px;
}

.hiw-col-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
}

.about-stats-row {
  display: flex;
  align-items: center;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.astat { display: flex; flex-direction: column; gap: 5px; }

.astat-figures { line-height: 1; }

.astat-num    { font-family: var(--f-head); font-size: 36px; font-weight: 800; color: var(--accent); }
.astat-suffix { font-family: var(--f-head); font-size: 36px; font-weight: 800; color: var(--accent); }
.astat-label  { font-size: 13px; color: var(--muted); display: block; }

.astat-num, .astat-suffix { display: inline; }

.astat-domains {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

.astat-sep {
  width: 1px;
  height: 44px;
  background: var(--border);
  margin: 0 40px;
  flex-shrink: 0;
}

/* ── Process strip — no card, uses internal dividers for rhythm ── */
.about-workflow {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 40px 0;
  margin-bottom: 24px;
}

.about-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 32px;
}

.about-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.about-step {
  padding: 0 28px;
  border-right: 1px solid var(--border);
}

.about-step:first-child { padding-left: 0; }
.about-step:last-child  { border-right: none; padding-right: 0; }

.step-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(28,27,25,.22);
  display: block;
  margin-bottom: 14px;
}

.step-body h4 {
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: 8px;
}

.step-body p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

/* ── Capabilities grid ── */
.about-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.about-cap-card {
  background: #fff;
  border: none;
  border-radius: var(--r-xl);
  padding: 32px 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.09);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.about-cap-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 14px 36px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.about-cap-featured {
  background: rgba(80,85,197,.07);
  box-shadow: none;
}

.about-cap-featured:hover {
  background: rgba(80,85,197,.1);
  box-shadow: 0 4px 20px rgba(80,85,197,.1);
  transform: translateY(-2px);
}

.cap-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(28,27,25,.42);
  display: block;
  margin-bottom: 20px;
}

.cap-label-accent { color: var(--accent); }

.cap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cap-list li {
  font-size: 14px;
  color: var(--muted);
  padding-left: 14px;
  position: relative;
}

.cap-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 4px; height: 1px;
  background: var(--muted);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: #f5f0e8; padding: 100px 0 120px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}

.contact-title {
  font-family: var(--f-head);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin-top: 24px; margin-bottom: 20px;
}

.contact-sub { font-size: 16px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; }

.socials { display: flex; flex-direction: column; gap: 12px; }

.social-link {
  font-size: 15px; color: var(--muted);
  display: inline-block;
  transition: color .2s;
}
.social-link:hover { color: var(--accent); }

/* Form card */
.contact-right {
  background: #fff;
  border: none;
  border-radius: var(--r-xl);
  padding: 44px;
  box-shadow: 0 4px 16px rgba(0,0,0,.07), 0 20px 56px rgba(0,0,0,.12);
}

.contact-form { display: flex; flex-direction: column; gap: 20px; }

.field { display: flex; flex-direction: column; gap: 8px; }

.field label {
  font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 13px 16px;
  font-size: 15px;
  color: var(--text);
  font-family: var(--f-body);
  outline: none;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none;
  appearance: none;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--border-hi);
}

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }

.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }

.field select option { background: var(--surface-2); }

.field textarea { resize: vertical; min-height: 120px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 36px 0;
}

.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
}

.footer-inner p { font-size: 14px; color: var(--muted); }

.footer-top {
  font-size: 14px; color: var(--muted);
  transition: color .2s;
}
.footer-top:hover { color: var(--text); }

/* ============================================================
   SCROLL-REVEAL (IntersectionObserver)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal-left.visible { opacity: 1; transform: none; }

/* stagger helpers */
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .hero { min-height: max(70vh, 520px); }
  .hero-container { grid-template-columns: 1fr; gap: 40px; padding-top: 8px; padding-bottom: 28px; }
  .hero-content { max-width: 100%; }
  .hero-identity { height: 360px; max-width: 560px; margin: 0 auto; }
  .hi-portrait { width: 240px; height: 240px; }

  /* Pull the testimonial fully on-screen at tablet width */
  .hero-testimonial { bottom: 2%; right: 1%; width: 256px; }

  .workflow-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
  }
  .workflow-arrow { display: none; }

  /* Workbench layout: stack at 1024px */
  .wf-layout { grid-template-columns: 1fr; gap: 48px; }
  .wf-editorial { position: static; }

  .hiw-col { padding-left: 24px; padding-right: 24px; }
  .hiw-col:first-child { padding-left: 0; }

  .about-intro  { padding: 36px; }
  .about-workflow { padding: 32px 36px; }
  .about-steps { grid-template-columns: 1fr 1fr; }
  .about-step:nth-child(2) { border-right: none; padding-right: 0; }
  .about-step:nth-child(n+3) { padding-top: 28px; border-top: 1px solid var(--border); }
  .about-step:nth-child(3) { padding-left: 0; border-right: 1px solid var(--border); }
  .about-step:nth-child(4) { padding-right: 0; border-right: none; }

  .project { gap: 48px; }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .container { padding: 0 24px; }
  section    { padding: 88px 0; }

  .nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  /* Disable custom cursor on touch */
  .cursor, .cursor-follower { display: none; }
  body, button, a { cursor: auto; }

  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 48px;
  }
  .hero::after  { opacity: .045; }
  .hero-bg-glow { width: 440px; height: 440px; top: -8%; right: -20%; }

  .hero-container { grid-template-columns: 1fr; gap: 32px; padding-top: 0; padding-bottom: 0; }

  /* Mobile hero: stack portrait and testimonial, no absolute positioning */
  .hero-identity {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .hi-portrait {
    position: static;
    transform: none;
    width: 190px; height: 190px;
  }

  .hero-testimonial {
    position: static;
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 18px 20px 16px;
    animation: none;
    opacity: 1;
  }

  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn { width: 100%; justify-content: center; }

  /* Mobile nav pill — tighter and lighter padding */
  .nav { inset: 10px 0 auto; padding: 0 14px; }
  .nav-inner { padding: 8px 10px 8px 18px; gap: 16px; }

  .section-head { flex-direction: column; gap: 8px; }

  .project,
  .project-flip .project-visual,
  .project-flip .project-info { grid-template-columns: 1fr; order: unset; }

  .project { padding: 32px 28px; gap: 32px; }

  .project-flip .project-visual { order: 0; }
  .project-flip .project-info   { order: 1; }

  .workflow-grid { grid-template-columns: 1fr; }
  .ai-section { padding-bottom: 48px; }
  .about { padding-top: 48px; }

  /* Workbench layout: single column on mobile */
  .wf-layout { grid-template-columns: 1fr; gap: 36px; }
  .wf-step-desc, .wf-step-tools { padding-left: 0; }

  .hiw-grid { grid-template-columns: 1fr; }
  .hiw-col { padding: 22px 0; border-left: none !important; }
  .hiw-col + .hiw-col { padding-left: 0; }
  .hiw-header { flex-direction: column; gap: 6px; }

  .about-intro,
  .about-workflow { padding: 24px; }
  .about-caps { grid-template-columns: 1fr; }
  .about-steps { grid-template-columns: 1fr; }
  .about-step:nth-child(n) {
    padding: 0;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 22px;
  }
  .about-step:nth-child(n):not(:first-child) { padding-top: 22px; }
  .about-step:last-child { border-bottom: none; padding-bottom: 0; }
  .about-stats-row { flex-wrap: wrap; gap: 20px; }
  .astat-sep { display: none; }

  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-right { padding: 28px 24px; }

  .footer-inner { flex-direction: column; gap: 10px; text-align: center; }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {
  .project-actions { flex-direction: column; align-items: flex-start; gap: 14px; }

  .hi-portrait { width: 160px; height: 160px; }
  .hero-testimonial { max-width: 100%; }
  .hero-quote blockquote { font-size: 13.5px; line-height: 1.55; }
  .hero-quote figcaption { font-size: 11px; }
}