/* ─── Variables ──────────────────────────────────────────── */
:root {
  --ink:        #1a1814;
  --muted:      #6b6b6b;
  --hairline:   #ececec;
  --paper:      #ffffff;
  --tint:       #f4efe6;
  --card:       #e6e1d6;
  --card-hover: #dcd6c8;
  --accent:     #c44a2b;
  --font:       'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --page-max:   1280px;
  --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) {
  .pf-blob,
  .pf-availability__dot::after { animation: none !important; }
  .pf-header__blobs            { animation: none !important; }
}

/* ─── Utilities ──────────────────────────────────────────── */
.pf-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.pf-accent { color: var(--accent); }

/* ─── Button ─────────────────────────────────────────────── */
.pf-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;
}
.pf-btn:hover { background: var(--accent); }

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

/* ─── Availability dot ───────────────────────────────────── */
.pf-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.pf-availability__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}
.pf-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;
}

/* ─── Header ─────────────────────────────────────────────── */
.pf-header {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 64px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pf-header__blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: tc-hue-drift 14s ease-in-out infinite alternate;
}
.pf-blob {
  position: absolute;
  border-radius: 50%;
}
.pf-blob--a {
  top: -15%; left: -10%;
  width: 55vw; height: 55vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 35% 35%, #c44a2b80, #c44a2b00 65%);
  filter: blur(60px);
  mix-blend-mode: screen;
  animation: tc-blob-a 18s ease-in-out infinite;
}
.pf-blob--b {
  top: 30%; right: -15%;
  width: 60vw; height: 60vw;
  max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle at 60% 50%, #d8a86866, #d8a86800 65%);
  filter: blur(70px);
  mix-blend-mode: screen;
  animation: tc-blob-b 23s ease-in-out infinite;
}
.pf-blob--c {
  bottom: -25%; left: 20%;
  width: 50vw; height: 50vw;
  max-width: 800px; max-height: 800px;
  background: radial-gradient(circle at 50% 50%, #4a6e6a66, #4a6e6a00 65%);
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: tc-blob-c 30s ease-in-out infinite;
}
.pf-blob--d {
  top: 20%; right: -5%;
  width: 45vw; height: 45vw;
  max-width: 750px; max-height: 750px;
  background: radial-gradient(circle at 50% 50%, #e8734a60, #e8734a00 62%);
  filter: blur(50px);
  mix-blend-mode: screen;
  animation: tc-blob-d 20s ease-in-out infinite;
}
.pf-blob--e {
  bottom: 0%; right: -10%;
  width: 40vw; height: 40vw;
  max-width: 680px; max-height: 680px;
  background: radial-gradient(circle at 45% 55%, #c17a9e55, #c17a9e00 62%);
  filter: blur(55px);
  mix-blend-mode: screen;
  animation: tc-blob-e 28s ease-in-out infinite;
}
.pf-blob--f {
  top: -5%; right: 5%;
  width: 35vw; height: 35vw;
  max-width: 580px; max-height: 580px;
  background: radial-gradient(circle at 50% 40%, #e8c44a55, #e8c44a00 62%);
  filter: blur(45px);
  mix-blend-mode: screen;
  animation: tc-blob-f 25s ease-in-out infinite;
}
.pf-header__content {
  position: relative;
  z-index: 1;
}
.pf-header__heading {
  font-weight: 600;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--paper);
  max-width: 20ch;
  margin: 0;
}
.pf-header__lede {
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ─── Body section ───────────────────────────────────────── */
.pf-body {
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 8vw, 112px);
}

/* ─── Art placeholder ────────────────────────────────────── */
.pf-art {
  aspect-ratio: 16 / 10;
  width: 100%;
  border-radius: 7px;
  background: var(--card);
  position: relative;
  overflow: hidden;
  transition: background 240ms ease;
  flex-shrink: 0;
}
.pf-art--sm {
  aspect-ratio: 4 / 3;
}
.pf-art--img { background: none; }
.pf-art__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-art__label {
  position: absolute;
  top: 14px; left: 16px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* ─── Featured cards ─────────────────────────────────────── */
.pf-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  margin-bottom: clamp(36px, 4vw, 56px);
}
.pf-featured {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 9px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  transition: border-color 240ms ease, transform 240ms ease;
}
.pf-featured:hover {
  transform: translateY(-2px);
  border-color: #c44a2b55;
}
.pf-featured:hover .pf-art {
  background: var(--card-hover);
}
.pf-featured__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px;
  min-width: 0;
}
.pf-card__meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pf-featured__title {
  font-weight: 600;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
.pf-featured__summary {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.pf-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-top: auto;
  padding-top: 8px;
}
.pf-arrow { color: var(--accent); }

/* ─── Tags ───────────────────────────────────────────────── */
.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pf-tag {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

/* ─── Forward-looking quote ──────────────────────────────── */
.pf-quote {
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  background: var(--ink);
  border-radius: 9px;
  position: relative;
  overflow: hidden;
}
.pf-quote__inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.pf-quote__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: clamp(16px, 2vw, 20px);
}
.pf-quote__rule {
  width: 18px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
  display: inline-block;
}
.pf-quote__text {
  margin: 0;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: balance;
}
.pf-quote__text .pf-accent { color: var(--accent); }

/* ─── Work card grid ─────────────────────────────────────── */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
.pf-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 9px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  transition: border-color 240ms ease, transform 240ms ease;
}
.pf-card:hover { transform: translateY(-2px); border-color: #c44a2b55; }
.pf-card:hover .pf-art { background: var(--card-hover); }
.pf-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}
.pf-card__top-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pf-card__title {
  font-weight: 600;
  font-size: clamp(20px, 1.6vw, 24px);
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
.pf-card__summary {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* ─── CTA ────────────────────────────────────────────────── */
.pf-cta {
  background: var(--tint);
  padding: clamp(56px, 7vw, 96px) 0;
}
.pf-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.4vw, 26px);
}
.pf-cta__heading {
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  text-wrap: balance;
  max-width: 20ch;
  margin: 0;
}
.pf-cta__lede {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 52ch;
}

/* ─── Footer ─────────────────────────────────────────────── */
.pf-footer-rule {
  border-top: 1px solid var(--hairline);
}
.pf-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  padding-bottom: 24px;
}
.pf-footer__copy {
  font-size: 13px;
  color: #9a9a9a;
}
.pf-footer__back {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.pf-footer__back:hover { color: var(--ink); }

/* ─── Clients strip ──────────────────────────────────────── */
.pf-clients {
  border-bottom: 1px solid var(--hairline);
  padding: clamp(16px, 2vw, 22px) 0;
}
.pf-clients__inner {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.5vw, 32px);
  flex-wrap: wrap;
}
.pf-clients__heading {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.pf-clients__list {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

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

}
@media (max-width: 680px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-availability { display: none; }
}