/* ─── Variables ──────────────────────────────────────────── */
:root {
  --ink:       #1a1814;
  --muted:     #6b6b6b;
  --hairline:  #ececec;
  --paper:     #ffffff;
  --bio-tint:  #f5f4f1;
  --accent:    #c44a2b;
  --font:      'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --page-max:  1120px;
  --page-pad:  clamp(20px, 5vw, 56px);
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { -webkit-tap-highlight-color: transparent; }
::selection { background: #c44a2b22; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; }

/* ─── Animations ─────────────────────────────────────────── */
@keyframes tc-pulse {
  0%   { transform: scale(1);   opacity: 0.35; }
  70%  { transform: scale(2.2); opacity: 0;    }
  100% { transform: scale(2.2); opacity: 0;    }
}
@keyframes tc-hue-drift {
  0%   { filter: hue-rotate(0deg)   saturate(1);    }
  50%  { filter: hue-rotate(18deg)  saturate(1.15); }
  100% { filter: hue-rotate(-8deg)  saturate(0.95); }
}
@keyframes tc-blob-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25%      { transform: translate3d(16vw, 12vh, 0) scale(1.3); }
  60%      { transform: translate3d(-10vw, 20vh, 0) scale(0.82); }
  80%      { transform: translate3d(6vw, -8vh, 0) scale(1.1); }
}
@keyframes tc-blob-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35%      { transform: translate3d(-18vw, -14vh, 0) scale(1.25); }
  70%      { transform: translate3d(12vw, 10vh, 0) scale(0.8); }
}
@keyframes tc-blob-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  40%      { transform: translate3d(-16vw, -18vh, 0) scale(0.78); }
  75%      { transform: translate3d(8vw, 12vh, 0) scale(1.2); }
}
@keyframes tc-blob-d {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  28%      { transform: translate3d(-12vw, 16vh, 0) scale(1.35); }
  62%      { transform: translate3d(10vw, -14vh, 0) scale(0.75); }
}
@keyframes tc-blob-e {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
  42%      { transform: translate3d(18vw, 20vh, 0) scale(0.78); }
  78%      { transform: translate3d(-12vw, -10vh, 0) scale(1.3); }
}
@keyframes tc-blob-f {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); }
  32%      { transform: translate3d(-16vw, -20vh, 0) scale(1.25); }
  68%      { transform: translate3d(14vw, 12vh, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__blob, .availability__dot::after { animation: none !important; }
  .hero__blobs { animation: none !important; }
}

/* ─── Utilities ──────────────────────────────────────────── */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.accent-text { color: var(--accent); }
.tc-desktop-only { display: flex; }
.tc-mobile-only  { display: none;  }
@media (max-width: 680px) {
  .tc-desktop-only { display: none; }
  .tc-mobile-only  { display: flex; }
}

/* ─── Button ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 200ms ease;
}
.btn:hover { background: var(--accent); }

/* ─── Nav ────────────────────────────────────────────────── */
.nav {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.nav__brand {
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nav__mark {
  height: 25px;
  width: auto;
  display: block;
}
.nav__name {
  font-size: 15px;
  font-weight: 500;
}
.nav__contact {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 200ms ease;
}
.nav__contact:hover { opacity: 1; }

/* ─── Availability ───────────────────────────────────────── */
.availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(16px, 2vw, 22px);
  font-size: 13px;
  color: var(--muted);
}
.availability__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}
.availability__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.25;
  animation: tc-pulse 2.2s ease-out infinite;
}

/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  background: #f4efe6;
  padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 80px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero__blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: tc-hue-drift 14s ease-in-out infinite alternate;
}
.hero__blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.hero__blob--a {
  top: -15%; left: -10%;
  width: 55vw; height: 55vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 35% 35%, #c44a2b66, #c44a2b00 65%);
  filter: blur(40px);
  animation: tc-blob-a 18s ease-in-out infinite;
}
.hero__blob--b {
  top: -10%; right: -20%;
  width: 65vw; height: 65vw;
  max-width: 1100px; max-height: 1100px;
  background: radial-gradient(circle at 55% 45%, #d8a86872, #d8a86800 62%);
  filter: blur(45px);
  animation: tc-blob-b 23s ease-in-out infinite;
}
.hero__blob--c {
  bottom: -25%; left: 20%;
  width: 50vw; height: 50vw;
  max-width: 800px; max-height: 800px;
  background: radial-gradient(circle at 50% 50%, #b9c2a668, #b9c2a600 65%);
  filter: blur(60px);
  animation: tc-blob-c 30s ease-in-out infinite;
}
.hero__blob--d {
  top: 20%; right: -5%;
  width: 45vw; height: 45vw;
  max-width: 750px; max-height: 750px;
  background: radial-gradient(circle at 50% 50%, #e8734a70, #e8734a00 62%);
  filter: blur(50px);
  animation: tc-blob-d 20s ease-in-out infinite;
}
.hero__blob--e {
  bottom: 0%; right: -10%;
  width: 40vw; height: 40vw;
  max-width: 680px; max-height: 680px;
  background: radial-gradient(circle at 45% 55%, #c17a9e62, #c17a9e00 62%);
  filter: blur(55px);
  animation: tc-blob-e 28s ease-in-out infinite;
}
.hero__blob--f {
  top: -5%; right: 5%;
  width: 35vw; height: 35vw;
  max-width: 580px; max-height: 580px;
  background: radial-gradient(circle at 50% 40%, #e8c44a60, #e8c44a00 62%);
  filter: blur(45px);
  animation: tc-blob-f 25s ease-in-out infinite;
}
.hero__content {
  position: relative;
  z-index: 1;
}
.hero__heading {
  font-weight: 600;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 16ch;
}
.hero__lede {
  margin-top: clamp(20px, 2.5vw, 28px);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ─── Stats ──────────────────────────────────────────────── */
.stats {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(48px, 6vw, 72px) 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(28px, 3.5vw, 56px);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat__number {
  font-weight: 500;
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.78);
}
.stat__label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.4;
  max-width: 26ch;
}

/* ─── Services ───────────────────────────────────────────── */
.services {
  border-top: 1px solid var(--hairline);
  padding: clamp(56px, 7vw, 88px) 0;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: clamp(40px, 5vw, 64px);
}
.service {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service__header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.service__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #c44a2b14;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.service__title {
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 20px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.service__body {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 52ch;
}

/* ─── Work Samples ───────────────────────────────────────── */
.samples {
  background: var(--paper);
  padding: 0 0 clamp(56px, 7vw, 96px);
}
.samples__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(16px, 2vw, 22px);
}
.samples__heading {
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* ─── Bio / Strategy ─────────────────────────────────────── */
.bio {
  background: var(--bio-tint);
  padding: clamp(64px, 8vw, 112px) 0;
}
.bio__inner {
  max-width: 760px;
  margin: 0 auto;
}
.bio__heading {
  margin-bottom: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.bio__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

/* ─── Clients ────────────────────────────────────────────── */
.clients {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid #c4beac;
}
.clients__heading {
  margin-bottom: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 18px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.clients__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.clients__list li {
  padding: 14px 0;
  font-size: 15px;
  color: var(--ink);
}

/* ─── Contact ────────────────────────────────────────────── */
.contact {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(64px, 8vw, 96px);
}
.contact__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: clamp(28px, 4vw, 48px);
}
.contact__heading {
  margin-bottom: clamp(16px, 2vw, 22px);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.contact__lede {
  margin-bottom: clamp(28px, 3.5vw, 40px);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.contact__email {
  display: inline-flex;
  align-items: center;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: color 200ms ease;
}
.contact__email:hover { color: var(--accent); }

/* ─── Footer ─────────────────────────────────────────────── */
.footer-rule {
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--hairline);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.footer__copy {
  font-size: 13px;
  color: #9a9a9a;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 680px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
}