/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --ink:    #121314;
  --panel:  #1A1C1D;
  --line:   #2C302F;
  --fg:     #ECEAE3;
  --muted:  #9A9D97;
  --brass:  #D9A441;
  --green:  #34d399;
  --glass:  rgba(255,255,255,.025);
  --pad:    clamp(18px,2.5vw,40px);
  --r:      14px;
  --eout:   cubic-bezier(.16,1,.3,1);
}

/* ═══════════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--ink);
  color: var(--fg);
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
a, button { color: inherit; text-decoration: none; cursor: none; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: rgba(217,164,65,.3); border-radius: 2px; }

/* ═══════════════════════════════════════════
   FILM JITTER (nesilnoble-style)
═══════════════════════════════════════════ */
a, button {
  animation: film .72s steps(1) infinite;
}
@keyframes film {
  0%  { transform: translate(0,0); }
  14% { transform: translate(-.4px,.3px); }
  28% { transform: translate(.4px,-.4px); }
  42% { transform: translate(-.3px,-.3px); }
  57% { transform: translate(.5px,.3px); }
  71% { transform: translate(-.3px,.4px); }
  85% { transform: translate(.3px,-.4px); }
}

/* ═══════════════════════════════════════════
   CURSOR
═══════════════════════════════════════════ */
#cur-dot {
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass); pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
  will-change: left, top;
}
#cur-ring {
  position: fixed; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(217,164,65,.35); pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .3s, height .3s, border-color .25s;
  will-change: left, top;
}
body.hover #cur-dot  { width: 12px; height: 12px; background: var(--green); }
body.hover #cur-ring { width: 50px; height: 50px; border-color: rgba(52,211,153,.4); }

/* ═══════════════════════════════════════════
   GRAIN
═══════════════════════════════════════════ */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  opacity: .025;
  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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-anim 8s steps(10) infinite;
}
@keyframes grain-anim {
  0%,100% { transform: translate(0,0);       }
  10%     { transform: translate(-5%,-10%);  }
  20%     { transform: translate(-15%,5%);   }
  30%     { transform: translate(7%,-25%);   }
  40%     { transform: translate(-5%,25%);   }
  50%     { transform: translate(-15%,10%);  }
  60%     { transform: translate(15%,0%);    }
  70%     { transform: translate(0%,15%);    }
  80%     { transform: translate(3%,35%);    }
  90%     { transform: translate(-10%,10%);  }
}

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
#site { position: relative; z-index: 1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
section { position: relative; }

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem var(--pad);
  transition: background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(18,19,20,.9);
  border-bottom-color: var(--line);
  backdrop-filter: blur(28px) saturate(180%);
}
.nav-left { display: flex; align-items: center; gap: 1.4rem; }
.nav-logo {
  font-family: 'Anybody', sans-serif;
  font-size: .9rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg);
}
.nav-status {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  font-family: 'JetBrains Mono', monospace;
}
.nav-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 2.4s infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.nav-links {
  display: flex; align-items: center; gap: 2.5rem;
  list-style: none;
  font-family: 'Anybody', sans-serif;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}
.nav-links a { color: var(--muted); transition: color .2s; position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1px; background: var(--brass);
  transition: width .35s var(--eout);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { width: 100%; }
.nav-email {
  font-family: 'Anybody', sans-serif;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 7px;
  padding: .38rem 1rem; color: var(--muted); background: none;
  transition: color .2s, border-color .2s, background .2s;
}
.nav-email:hover { color: var(--fg); border-color: rgba(217,164,65,.4); background: var(--glass); }
.nav-ham {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none;
}
.nav-ham span { display: block; width: 22px; height: 1.5px; background: var(--fg); border-radius: 2px; transition: .3s; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
#hero {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 4rem;
  padding: 7rem var(--pad) 5rem;
  padding-left: max(var(--pad), calc((100vw - 1200px) / 2 + var(--pad)));
  padding-right: max(var(--pad), calc((100vw - 1200px) / 2 + var(--pad)));
  background: transparent;
}
.hero-left { display: flex; flex-direction: column; gap: 2rem; }
.hero-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass);
}
.hero-headline {
  font-family: 'Anybody', sans-serif;
  font-size: clamp(48px,7.2vw,116px);
  font-weight: 900; line-height: .92;
  letter-spacing: -.04em; text-transform: uppercase;
}
.hero-headline .line  { display: block; overflow: hidden; }
.hero-headline .word  { display: block; transform: translateY(110%); opacity: 0; will-change: transform; }
.hero-headline .hl    {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(217,164,65,.6);
}
.hero-sub {
  font-size: clamp(.92rem,1.25vw,1.05rem);
  color: var(--muted); max-width: 46ch; line-height: 1.78;
  opacity: 0; transform: translateY(18px);
}
.hero-cta { display: flex; gap: 1rem; opacity: 0; transform: translateY(14px); }

/* campaign log */
.hero-right { position: relative; display: flex; flex-direction: column; gap: 0; }
.hero-log {
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  opacity: 0; transform: scale(.95) translateX(24px);
  will-change: transform, opacity;
}
.log-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1.1rem;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--line);
}
.log-dot { width: 10px; height: 10px; border-radius: 50%; }
.log-dot.r { background: #ff5f56; }
.log-dot.y { background: #ffbd2e; }
.log-dot.g { background: #27c93f; }
.log-filename {
  font-size: .68rem; color: var(--muted); margin-left: .5rem;
}
.log-body {
  padding: 1.25rem 1.1rem; display: flex; flex-direction: column;
  gap: .55rem; min-height: 210px;
}
.log-line {
  font-size: .73rem; color: var(--muted);
  opacity: 0; transition: opacity .4s;
}
.log-line.visible { opacity: 1; }
.log-ok { color: #27c93f; margin-left: .5rem; }
.log-cursor { animation: blink 1.1s steps(1) infinite; color: var(--brass); }
@keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:0; } }
.log-facts {
  display: flex; align-items: center; justify-content: space-around;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.01);
}
.log-fact { text-align: center; }
.log-fact strong {
  font-family: 'Anybody', sans-serif;
  font-size: 1.7rem; font-weight: 900; color: var(--brass);
  display: block; line-height: 1;
}
.log-fact span {
  font-size: .63rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
  font-family: 'JetBrains Mono', monospace;
}
.log-sep { width: 1px; height: 30px; background: var(--line); }

/* scroll hint */
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: .55rem;
  opacity: 0;
}
.scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(217,164,65,.8), transparent);
  animation: scroll-line 2.2s ease-in-out infinite;
}
@keyframes scroll-line {
  0%,100%{ transform: scaleY(1); opacity: .6; }
  50%    { transform: scaleY(.55); opacity: 1; }
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .72rem 1.5rem; border-radius: 10px;
  font-family: 'Anybody', sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  transition: all .25s var(--eout); border: none; overflow: hidden;
}
.btn-primary {
  background: var(--brass); color: #0d0e0f;
  box-shadow: 0 0 28px rgba(217,164,65,.2);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 44px rgba(217,164,65,.38); }
.btn-ghost {
  background: var(--glass); color: var(--fg);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: rgba(255,255,255,.05); border-color: rgba(217,164,65,.35); }

/* ═══════════════════════════════════════════
   SHARED SECTION STYLES
═══════════════════════════════════════════ */
.s-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass); margin-bottom: .8rem;
}
.s-title {
  font-family: 'Anybody', sans-serif;
  font-size: clamp(2.1rem,4vw,4.8rem);
  font-weight: 900; line-height: .93; letter-spacing: -.04em; text-transform: uppercase;
}
.s-title .stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(217,164,65,.55);
}
.s-head { margin-bottom: clamp(2.5rem,5vh,4rem); }

.rev {
  opacity: 0; transform: translateY(38px);
  transition: opacity .8s var(--eout), transform .9s var(--eout);
}
.rev.in { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════
   TOOL MARQUEE
═══════════════════════════════════════════ */
.marquee {
  overflow: hidden;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.marquee-track { display: flex; }
.marquee-items {
  display: flex; gap: 2.5rem; white-space: nowrap; flex-shrink: 0;
  animation: marquee-scroll 28s linear infinite;
}
.marquee-items:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; color: var(--muted); letter-spacing: .06em;
}
.marquee-item::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--brass); opacity: .5; flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   LOGO WALL
═══════════════════════════════════════════ */
#logos { padding: clamp(4rem,9vh,7rem) var(--pad); background: var(--ink); }
.logos-grid {
  display: grid; grid-template-columns: repeat(6,1fr);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.logo-card {
  position: relative; padding: 2.25rem 1.5rem;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
  overflow: hidden; transition: background .3s;
  min-height: 100px;
}
.logo-card:last-child { border-right: none; }
.logo-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(217,164,65,.14) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.logo-card:hover::before { opacity: 1; }
.logo-card img {
  max-height: 32px; width: auto; max-width: 90px;
  filter: grayscale(1) brightness(.45); transition: filter .35s;
}
.logo-card:hover img { filter: grayscale(0) brightness(1); }
.logo-text {
  font-family: 'Anybody', sans-serif;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  transition: color .35s;
}
.logo-card:hover .logo-text { color: var(--brass); }

/* ═══════════════════════════════════════════
   SELECTED WORK
═══════════════════════════════════════════ */
#work { padding: clamp(5rem,12vh,9rem) var(--pad); background: var(--ink); }
.work-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(2.5rem,5vh,4rem); gap: 2rem;
}
.work-sub { font-size: .92rem; color: var(--muted); max-width: 28ch; text-align: right; }
.work-list { border-top: 1px solid var(--line); }
.work-row {
  display: grid;
  grid-template-columns: 180px 1fr 2.5fr 130px 2.5rem;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: padding-left .3s var(--eout);
}
.work-row::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(217,164,65,.04);
  opacity: 0; transition: opacity .3s;
}
.work-row:hover::before { opacity: 1; }
.work-row:hover { padding-left: .5rem; }
.work-row-thumb {
  aspect-ratio: 16/10; overflow: hidden;
  border-radius: 8px; background: var(--panel); flex-shrink: 0;
  position: relative; z-index: 1;
}
.work-row-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .65s var(--eout);
}
.work-row:hover .work-row-thumb img { transform: scale(1.07) rotate(.5deg); }
.work-row-thumb-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1c1e20, #24261f);
  background-size: 200% 200%; animation: grad-shift 5s ease infinite;
  font-family: 'Anybody', sans-serif; font-size: 1.3rem; font-weight: 900;
  color: rgba(217,164,65,.4); letter-spacing: .06em;
}
@keyframes grad-shift {
  0%,100%{ background-position: 0 50%; }
  50%    { background-position: 100% 50%; }
}
.work-row-info { position: relative; z-index: 1; }
.work-row-title {
  font-family: 'Anybody', sans-serif;
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: .25rem;
}
.work-row-domain {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; color: var(--muted);
}
.work-row-desc {
  font-size: .83rem; color: var(--muted); line-height: 1.55;
  position: relative; z-index: 1;
}
.work-row-tag {
  display: inline-block; padding: .3rem .8rem;
  border-radius: 100px; border: 1px solid var(--line);
  font-size: .66rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  position: relative; z-index: 1;
}
.work-row-arrow {
  color: var(--brass); font-size: 1.2rem;
  transition: transform .3s var(--eout);
  text-align: center; position: relative; z-index: 1;
}
.work-row:hover .work-row-arrow { transform: translate(4px,-4px); }

/* ═══════════════════════════════════════════
   RESULTS LEDGER
═══════════════════════════════════════════ */
#results {
  padding: clamp(5rem,12vh,9rem) var(--pad);
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.results-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0;
}
.result-item {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .5rem;
}
.result-item:last-child { border-right: none; }
.result-num {
  font-family: 'Anybody', sans-serif;
  font-size: clamp(2.8rem,4.5vw,5.2rem);
  font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: var(--brass);
}
.result-label {
  font-size: .8rem; font-weight: 600; color: var(--fg); margin-bottom: .1rem;
}
.result-client {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem; color: var(--muted); letter-spacing: .06em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════ */
#services { padding: clamp(5rem,12vh,9rem) var(--pad); background: var(--ink); }
.svc-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.svc-card {
  padding: 2.25rem 2rem 2.5rem;
  background: var(--panel); border-right: 1px solid var(--line);
  position: relative; overflow: hidden; transition: background .3s;
  display: flex; flex-direction: column; gap: 0;
}
.svc-card:nth-child(3n) { border-right: none; }
.svc-card:nth-child(n+4) { border-top: 1px solid var(--line); }
.svc-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(217,164,65,.07) 0%, transparent 55%);
  opacity: 0; transition: opacity .3s;
}
.svc-card:hover::before { opacity: 1; }
.svc-icon {
  width: 36px; height: 36px; margin-bottom: 1.5rem;
  color: rgba(217,164,65,.5);
}
.svc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .14em;
  color: rgba(217,164,65,.3); margin-bottom: 1rem;
}
.svc-card h3 {
  font-family: 'Anybody', sans-serif;
  font-size: 1rem; font-weight: 800; margin-bottom: .6rem; letter-spacing: -.01em;
}
.svc-card p { font-size: .84rem; color: var(--muted); line-height: 1.7; flex: 1; }
.svc-tools {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1.25rem;
}
.svc-tools span {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: .15rem .45rem;
}

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
#about { padding: clamp(5rem,12vh,9rem) var(--pad); background: var(--panel); }
.about-grid {
  display: grid; grid-template-columns: 1fr 1.55fr; gap: 4.5rem; align-items: start;
}

/* photo */
.about-photo-col { position: relative; }
.about-photo-wrap { position: relative; display: block; width: 100%; }
.about-photo-frame {
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line);
  animation: photo-float 7s ease-in-out infinite;
  will-change: transform;
  position: relative;
}
.about-photo-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18,19,20,.55) 100%);
  pointer-events: none;
}
.about-photo-frame img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  display: block; transition: transform 1s var(--eout);
}
.about-photo-wrap:hover .about-photo-frame img { transform: scale(1.04); }
@keyframes photo-float {
  0%,100% { transform: translateY(0) rotate(-.4deg); }
  50%      { transform: translateY(-10px) rotate(.4deg); }
}
.about-photo-tag {
  position: absolute; bottom: 1.25rem; right: -0.5rem;
  background: rgba(18,19,20,.9);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .45rem 1.1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; color: var(--muted);
  white-space: nowrap;
  display: flex; align-items: center; gap: .45rem;
  backdrop-filter: blur(12px); z-index: 2;
}
.about-photo-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 2.4s infinite; flex-shrink: 0;
}
.timeline-divider {
  height: 1px; background: var(--line); margin: 2rem 0 1.5rem;
}
.about-intro {
  font-family: 'Anybody', sans-serif;
  font-size: clamp(1.8rem,3vw,2.8rem);
  font-weight: 900; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 2rem;
}
.about-intro em { font-style: normal; color: var(--brass); }
.about-p { font-size: .975rem; color: var(--muted); line-height: 1.88; margin-bottom: 1rem; }
.about-p strong { color: var(--fg); font-weight: 600; }
.about-p em { font-style: italic; color: rgba(236,234,227,.7); }
.about-cta { margin-top: 1.75rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* career timeline */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.5rem;
}
.tl-item {
  display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.tl-item:first-child { border-top: 1px solid var(--line); }
.tl-year {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; color: var(--muted); flex: 0 0 130px;
  padding-top: .15rem; letter-spacing: .03em;
}
.tl-role {
  font-size: .88rem; font-weight: 600; color: var(--fg); line-height: 1.4;
}
.tl-org { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.tl-item.tl-current .tl-year { color: var(--brass); }
.tl-item.tl-current .tl-role { color: var(--fg); }
.tl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); flex-shrink: 0; margin-top: .35rem;
  transition: background .3s;
}
.tl-item.tl-current .tl-dot { background: var(--brass); box-shadow: 0 0 0 3px rgba(217,164,65,.2); }

/* ═══════════════════════════════════════════
   TOOLKIT
═══════════════════════════════════════════ */
#toolkit { padding: clamp(5rem,12vh,9rem) var(--pad); background: var(--ink); }
.toolkit-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.toolkit-col {
  padding: 2rem 1.75rem 2.5rem;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.toolkit-col:last-child { border-right: none; }
.toolkit-label {
  font-family: 'Anybody', sans-serif;
  font-size: .8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fg); margin-bottom: 1.25rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.toolkit-items { display: flex; flex-direction: column; gap: .5rem; }
.toolkit-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: .73rem; color: var(--muted);
  padding: .35rem 0;
  border-bottom: 1px solid rgba(44,48,47,.5);
  transition: color .2s;
}
.toolkit-item:hover { color: var(--brass); }
.toolkit-item:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════ */
#testimonials { padding: clamp(5rem,12vh,9rem) var(--pad); background: var(--panel); }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.testi-card {
  padding: 1.75rem; border-radius: var(--r);
  background: var(--ink); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .85rem;
  transition: border-color .3s, transform .35s var(--eout);
}
.testi-card:hover { border-color: rgba(217,164,65,.28); transform: translateY(-3px); }
.testi-stars { display: flex; gap: 3px; }
.testi-star  { width: 12px; height: 12px; fill: #D9A441; }
.testi-text  { font-size: .87rem; color: var(--muted); line-height: 1.75; font-style: italic; flex: 1; }
.testi-author {
  display: flex; align-items: center; gap: .7rem;
  padding-top: .75rem; border-top: 1px solid var(--line);
}
.testi-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brass), #a07520);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anybody', sans-serif; font-size: .7rem; font-weight: 800; color: #0d0e0f;
}
.testi-name { font-size: .87rem; font-weight: 700; }
.testi-role { font-size: .72rem; color: var(--muted); }

/* ═══════════════════════════════════════════
   BOOK
═══════════════════════════════════════════ */
#book { padding: clamp(5rem,12vh,9rem) var(--pad); background: var(--ink); }
.book-inner {
  display: grid; grid-template-columns: auto 1fr;
  gap: 5rem; align-items: center;
  max-width: 900px;
}
.book-wrap {
  perspective: 900px;
}
.book-cover {
  display: flex; align-items: stretch;
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(4deg);
  transition: transform .5s var(--eout);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.55));
}
.book-wrap:hover .book-cover { transform: rotateY(-6deg) rotateX(2deg); }
.book-spine {
  width: 28px; height: 220px;
  background: linear-gradient(180deg, #a07520, #6b4e15);
  border-radius: 3px 0 0 3px;
  flex-shrink: 0;
}
.book-face {
  width: 150px; height: 220px;
  background: linear-gradient(145deg, #1d1b14, #29260e);
  border: 1px solid rgba(217,164,65,.3);
  border-radius: 0 6px 6px 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.25rem; gap: .5rem; text-align: center;
}
.book-face-title {
  font-family: 'Anybody', sans-serif;
  font-size: 1rem; font-weight: 900; line-height: 1.1;
  color: var(--brass); text-transform: uppercase; letter-spacing: .04em;
}
.book-face-title em { font-style: normal; color: #fff; }
.book-face-sub {
  font-size: .6rem; color: var(--muted); line-height: 1.45;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
}
.book-face-author {
  font-size: .63rem; color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: .5rem; letter-spacing: .08em; text-transform: uppercase;
}
.book-face-line {
  width: 40px; height: 1px; background: rgba(217,164,65,.4); margin: .25rem 0;
}
.book-info { display: flex; flex-direction: column; gap: 1.25rem; }
.book-info .s-title { text-transform: uppercase; }
.book-info p { font-size: .95rem; color: var(--muted); line-height: 1.8; max-width: 42ch; }

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
#contact { padding: clamp(5rem,12vh,9rem) var(--pad); background: var(--panel); }
.contact-inner { max-width: 820px; }
.contact-headline {
  font-family: 'Anybody', sans-serif;
  font-size: clamp(2.8rem,5.5vw,6.8rem);
  font-weight: 900; line-height: .9; letter-spacing: -.04em; text-transform: uppercase;
  margin-bottom: 2.5rem;
}
.contact-headline .stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(217,164,65,.55);
}
.contact-email-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.contact-email-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(.85rem,1.5vw,1.1rem);
  color: var(--fg); letter-spacing: .03em;
  user-select: all; -webkit-user-select: all;
}
.btn-copy {
  font-family: 'Anybody', sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 7px;
  padding: .35rem .9rem; color: var(--muted); background: none;
  transition: color .2s, border-color .2s;
}
.btn-copy:hover { color: var(--brass); border-color: rgba(217,164,65,.4); }
.contact-links  { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 3rem; }
.contact-link   {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .75rem 1.4rem; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: .84rem; font-weight: 600;
  transition: all .25s var(--eout);
}
.contact-link:hover { border-color: rgba(217,164,65,.4); background: rgba(217,164,65,.06); transform: translateY(-2px); }
.contact-link svg { width: 17px; height: 17px; }
.form-wrap {
  border: 1px solid var(--line); border-radius: 20px;
  padding: 2rem; background: var(--glass); backdrop-filter: blur(12px);
}
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cf-g    { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.cf-g.full { grid-column: 1/-1; }
.cf-g label {
  font-size: .68rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
  font-family: 'JetBrains Mono', monospace;
}
.cf-g input, .cf-g textarea {
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 10px; padding: .75rem 1rem;
  color: var(--fg); font-family: 'Hanken Grotesk', sans-serif; font-size: .9rem;
  transition: border-color .25s; outline: none; resize: vertical; cursor: none;
}
.cf-g input:focus, .cf-g textarea:focus { border-color: rgba(217,164,65,.5); }
.cf-g textarea { min-height: 120px; }
.cf-g input::placeholder, .cf-g textarea::placeholder { color: rgba(236,234,227,.18); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
  padding: 2rem var(--pad);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .76rem; color: var(--muted); flex-wrap: wrap; gap: .5rem;
  background: var(--ink);
}
footer a { transition: color .2s; }
footer a:hover { color: var(--fg); }

/* ═══════════════════════════════════════════
   MOBILE MENU
═══════════════════════════════════════════ */
.mob-menu {
  display: none; position: fixed; inset: 0; z-index: 490;
  background: rgba(18,19,20,.97); backdrop-filter: blur(28px);
  flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem;
}
.mob-menu.open { display: flex; }
.mob-menu a {
  font-family: 'Anybody', sans-serif; font-size: 1.6rem; font-weight: 900;
  text-transform: uppercase; color: var(--muted); transition: color .2s;
}
.mob-menu a:hover { color: var(--brass); }
.mob-close {
  position: absolute; top: 1.5rem; right: var(--pad);
  background: none; border: none; color: var(--fg); font-size: 1.4rem;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1200px) {
  .work-row { grid-template-columns: 150px 1fr 1.5fr 110px 2rem; gap: 1.25rem; }
}
@media (max-width: 1100px) {
  .svc-grid        { grid-template-columns: repeat(2,1fr); }
  .svc-card:nth-child(3n)   { border-right: 1px solid var(--line); }
  .svc-card:nth-child(2n)   { border-right: none; }
  .svc-card:nth-child(n+3)  { border-top: 1px solid var(--line); }
  .results-grid    { grid-template-columns: repeat(2,1fr); }
  .result-item:nth-child(2) { border-right: none; }
  .result-item:nth-child(n+3){ border-top: 1px solid var(--line); }
  .toolkit-grid    { grid-template-columns: repeat(2,1fr); }
  .toolkit-col:nth-child(2n){ border-right: none; }
  .toolkit-col:nth-child(n+3){ border-top: 1px solid var(--line); }
  .logos-grid      { grid-template-columns: repeat(3,1fr); }
  .logo-card:nth-child(3n)  { border-right: none; }
  .logo-card:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  #hero            { grid-template-columns: 1fr; padding-top: 6.5rem; gap: 3rem; }
  .about-grid      { grid-template-columns: 1fr; gap: 3rem; }
  .about-photo-col { max-width: 340px; margin: 0 auto; }
  .about-photo-tag { right: 0; }
  .testi-grid      { grid-template-columns: 1fr 1fr; }
  .svc-grid        { grid-template-columns: 1fr; }
  .svc-card:nth-child(n)   { border-right: none; }
  .svc-card:nth-child(n+2) { border-top: 1px solid var(--line); }
  .nav-links, .nav-email   { display: none; }
  .nav-ham         { display: flex; }
  .work-head       { flex-direction: column; align-items: flex-start; }
  .work-sub        { text-align: left; }
  .work-row { grid-template-columns: 120px 1fr auto; grid-template-rows: auto auto; gap: .75rem 1rem; }
  .work-row-desc   { display: none; }
  .work-row-arrow  { grid-column: 3; grid-row: 1; align-self: center; }
  .work-row-tag    { grid-column: 2; grid-row: 2; }
  .book-inner { grid-template-columns: 1fr; justify-items: center; gap: 3rem; }
}
@media (max-width: 600px) {
  .testi-grid { grid-template-columns: 1fr; }
  .cf-grid    { grid-template-columns: 1fr; }
  footer      { flex-direction: column; text-align: center; }
  .results-grid { grid-template-columns: repeat(2,1fr); }
  .logos-grid  { grid-template-columns: repeat(2,1fr); }
  .logo-card:nth-child(2n)  { border-right: none; }
  .logo-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .toolkit-grid { grid-template-columns: 1fr; }
  .toolkit-col  { border-right: none !important; }
  .toolkit-col:nth-child(n+2){ border-top: 1px solid var(--line); }
  .work-row { grid-template-columns: 90px 1fr 2rem; }
}
@media (max-width: 360px) {
  .hero-headline { font-size: 44px; }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  a, button    { animation: none !important; }
  .grain       { display: none; }
  .marquee-items { animation: none !important; }
  .log-cursor  { animation: none !important; }
  .scroll-line { animation: none !important; }
  .about-photo-frame { animation: none !important; }
  .tl-item.tl-current .tl-dot { box-shadow: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}