:root {
  --bg: #0a0a0d;
  --bg-2: #0f1015;
  --panel: rgba(17, 18, 23, 0.92);
  --panel-strong: #171922;
  --text: #f5f6fb;
  --muted: #b1b5c7;
  --muted-2: #8d92a6;
  --line: rgba(255,255,255,.10);
  --soft-line: rgba(255,255,255,.06);
  --shadow: 0 18px 60px rgba(0,0,0,.30);
  --max: 1180px;
  --radius: 28px;
  --radius-sm: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(108,124,255,.10), transparent 26%),
    radial-gradient(circle at 88% 10%, rgba(255,255,255,.05), transparent 20%),
    linear-gradient(180deg, #09090c 0%, #0c0d12 42%, #0b0c10 100%);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin-top: 0; }

.shell {
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(9,10,14,.72);
  border-bottom: 1px solid var(--soft-line);
}

.nav {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 950;
  letter-spacing: -.075em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: .95rem;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #d6d9e8;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .79rem;
  font-weight: 800;
}

.eyebrow::before,
.section-kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #f3f6ff;
  box-shadow: 0 0 24px rgba(255,255,255,.55);
}

.hero {
  padding: clamp(70px, 10vw, 134px) 0 54px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 32px;
  align-items: end;
}

.hero h1 {
  margin: 18px 0 22px;
  max-width: 860px;
  font-size: clamp(3.65rem, 9.5vw, 8.7rem);
  line-height: .86;
  letter-spacing: -.085em;
  font-weight: 975;
}

.hero-copy {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.button,
.link-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 750;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.button:hover,
.link-pill:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.16);
}

.button-primary:hover {
  border-color: rgba(255,255,255,.28);
}

.button-secondary,
.link-pill {
  background: rgba(255,255,255,.025);
  color: var(--muted);
}

.button-secondary:hover,
.link-pill:hover {
  color: var(--text);
  border-color: rgba(255,255,255,.18);
}

.hero-panel {
  padding: 24px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(15,16,22,.88);
  box-shadow: var(--shadow);
}

.hero-panel-label {
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 800;
  margin-bottom: 18px;
}

.hero-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.hero-list li {
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.hero-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.hero-list span {
  display: block;
  font-size: 1rem;
  font-weight: 780;
  margin-bottom: 3px;
}

.hero-list em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: .93rem;
  line-height: 1.5;
}

.hero-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted-2);
  font-size: .92rem;
}

.section {
  padding: 24px 0 92px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.section-head-stacked h2,
.identity-strip h2,
.about-strip h2,
.content-card h2 {
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: -.05em;
  line-height: .95;
  margin: 12px 0 0;
}

.section-head p,
.identity-strip p,
.about-strip p,
.content-card p,
.page-hero p {
  color: var(--muted);
  line-height: 1.7;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.project-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 420px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.09);
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
  box-shadow: var(--shadow);
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.20);
}

.project-card:focus-visible {
  outline: 2px solid white;
  outline-offset: 4px;
}

.project-card::before,
.project-card::after {
  content: "";
  position: absolute;
  inset: auto auto -18% -8%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(26px);
  opacity: .34;
  z-index: -2;
}

.project-card::after {
  inset: -16% -8% auto auto;
  width: 220px;
  height: 220px;
  opacity: .22;
}

.card-scene {
  position: relative;
  min-height: 154px;
  border-radius: calc(var(--radius) - 10px);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  overflow: hidden;
}

.project-card .meta {
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 800;
}

.project-card h3 {
  margin: 12px 0 10px;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.project-card p {
  max-width: 520px;
  color: rgba(255,255,255,.80);
  line-height: 1.58;
  margin-bottom: 16px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.74);
  font-size: .82rem;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,255,255,.92);
  font-weight: 760;
}

.arrow { font-size: 1.25rem; }

/* Homepage card directions */
.puppyteeth {
  background:
    linear-gradient(145deg, rgba(255,77,169,.22), rgba(82,148,255,.15) 55%, rgba(16,16,23,.96)),
    #15131b;
}
.puppyteeth::before { background: #ff4ea6; }
.puppyteeth::after { background: #4d86ff; }
.puppyteeth .card-scene {
  background:
    linear-gradient(135deg, rgba(255,88,173,.20), rgba(82,148,255,.14) 64%, rgba(255,255,255,.02));
}
.puppyteeth .scene-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
}
.puppyteeth .scene-badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(9,10,14,.42);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 800;
}
.puppyteeth .scene-zigzag {
  position: absolute;
  right: 52px;
  top: 34px;
  width: 120px;
  height: 60px;
  background:
    linear-gradient(135deg, transparent 0 22%, rgba(255,255,255,.16) 22% 28%, transparent 28% 44%, rgba(255,255,255,.12) 44% 50%, transparent 50% 66%, rgba(255,255,255,.10) 66% 72%, transparent 72% 100%);
  transform: rotate(-8deg);
}
.puppyteeth .scene-noise {
  position: absolute;
  inset: auto 20px 20px auto;
  width: 118px;
  height: 44px;
  background-image: radial-gradient(rgba(255,255,255,.24) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: .55;
}

.izakt {
  background:
    linear-gradient(145deg, rgba(86,107,255,.18), rgba(181,100,255,.11) 58%, rgba(15,17,24,.96)),
    #12151e;
}
.izakt::before { background: #5770ff; }
.izakt::after { background: #c06dff; }
.izakt .card-scene {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(12,13,20,.66);
}
.izakt .scene-orb {
  position: absolute;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  right: 24px;
  top: 20px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.42), rgba(87,112,255,.58) 34%, rgba(30,34,64,.18) 72%, transparent 76%);
  box-shadow: 0 0 45px rgba(87,112,255,.26);
}
.izakt .scene-wave {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 30px;
  height: 38px;
  border-radius: 999px;
  background:
    radial-gradient(80px 30px at 10% 50%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(120px 40px at 32% 40%, rgba(255,255,255,.12), transparent 64%),
    radial-gradient(120px 40px at 56% 60%, rgba(255,255,255,.15), transparent 68%),
    radial-gradient(100px 34px at 84% 48%, rgba(255,255,255,.12), transparent 65%);
  opacity: .85;
}
.izakt .scene-lines {
  position: absolute;
  left: 22px;
  top: 22px;
  width: 148px;
  height: 82px;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 100% 14px;
  opacity: .55;
}

.forgotten {
  background:
    linear-gradient(145deg, rgba(101,145,96,.18), rgba(165,125,75,.10) 58%, rgba(14,18,15,.96)),
    #101612;
}
.forgotten::before { background: #6c9b67; }
.forgotten::after { background: #b98a58; }
.forgotten .card-scene {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(10,17,12,.74);
}
.forgotten .scene-moon {
  position: absolute;
  right: 24px;
  top: 22px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.45), rgba(217,234,196,.48) 48%, rgba(255,255,255,.08) 72%);
  box-shadow: 0 0 24px rgba(198,226,177,.18);
}
.forgotten .scene-topo {
  position: absolute;
  inset: 18px 18px 18px 18px;
  background:
    radial-gradient(circle at 20% 75%, transparent 0 54px, rgba(255,255,255,.08) 55px 56px, transparent 57px),
    radial-gradient(circle at 25% 72%, transparent 0 72px, rgba(255,255,255,.06) 73px 74px, transparent 75px),
    radial-gradient(circle at 48% 64%, transparent 0 70px, rgba(255,255,255,.07) 71px 72px, transparent 73px),
    radial-gradient(circle at 40% 62%, transparent 0 92px, rgba(255,255,255,.05) 93px 94px, transparent 95px),
    radial-gradient(circle at 72% 78%, transparent 0 56px, rgba(255,255,255,.06) 57px 58px, transparent 59px);
  opacity: .8;
}
.forgotten .scene-path {
  position: absolute;
  left: 32px;
  bottom: 22px;
  width: 144px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240,233,213,.55), rgba(240,233,213,.06));
  transform: rotate(-12deg);
}

.foxboy {
  background:
    linear-gradient(145deg, rgba(236,138,82,.18), rgba(201,162,110,.10) 58%, rgba(22,16,13,.96)),
    #171311;
}
.foxboy::before { background: #ec8a52; }
.foxboy::after { background: #cfaa74; }
.foxboy .card-scene {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(24,18,14,.74);
}
.foxboy .scene-folder {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  top: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    rgba(233,206,176,.08);
}
.foxboy .scene-tab {
  position: absolute;
  left: 32px;
  top: 20px;
  width: 96px;
  height: 24px;
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: 0;
  background: rgba(255,255,255,.10);
}
.foxboy .scene-stamp {
  position: absolute;
  right: 30px;
  top: 54px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.72);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .14em;
  display: grid;
  place-items: center;
  transform: rotate(14deg);
}
.foxboy .scene-check {
  position: absolute;
  left: 42px;
  top: 70px;
  width: 94px;
  height: 68px;
  background-image:
    linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
  background-size: 100% 16px, 16px 100%;
  opacity: .48;
}

.identity-strip,
.about-strip {
  margin-top: 20px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(14,15,20,.85);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}

.site-footer {
  border-top: 1px solid var(--soft-line);
  padding: 28px 0 46px;
  color: var(--muted-2);
  font-size: .9rem;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* Interior pages */
.page-hero {
  padding: 92px 0 42px;
}

.page-hero h1 {
  margin: 14px 0 18px;
  max-width: 900px;
  font-size: clamp(3.2rem, 8vw, 7.2rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.content-card {
  margin-bottom: 18px;
  padding: 26px 28px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(15,16,20,.86);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 650;
}

.back-link:hover { color: var(--text); }

.project-accent-puppyteeth {
  background:
    radial-gradient(circle at 10% 0%, rgba(255,77,169,.12), transparent 24%),
    radial-gradient(circle at 90% 10%, rgba(82,148,255,.08), transparent 22%),
    linear-gradient(180deg, #09090d 0%, #0d0d13 100%);
}
.project-accent-izakt {
  background:
    radial-gradient(circle at 10% 0%, rgba(86,107,255,.10), transparent 24%),
    radial-gradient(circle at 90% 10%, rgba(181,100,255,.06), transparent 22%),
    linear-gradient(180deg, #09090d 0%, #0d0f15 100%);
}
.project-accent-forgotten {
  background:
    radial-gradient(circle at 10% 0%, rgba(101,145,96,.10), transparent 24%),
    radial-gradient(circle at 90% 10%, rgba(185,138,88,.06), transparent 22%),
    linear-gradient(180deg, #080a09 0%, #0d1110 100%);
}
.project-accent-foxboy {
  background:
    radial-gradient(circle at 10% 0%, rgba(236,138,82,.10), transparent 24%),
    radial-gradient(circle at 90% 10%, rgba(207,170,116,.06), transparent 22%),
    linear-gradient(180deg, #090908 0%, #100d0d 100%);
}

/* Responsive */
@media (max-width: 920px) {
  .hero-grid,
  .identity-strip,
  .about-strip,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    min-height: 390px;
  }
}

@media (max-width: 760px) {
  .nav {
    min-height: 72px;
    flex-wrap: wrap;
    padding: 14px 0;
  }

  .nav-links {
    width: 100%;
    gap: 16px;
    font-size: .92rem;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .hero {
    padding-top: 56px;
  }

  .project-card {
    padding: 20px;
    min-height: 360px;
  }

  .card-scene {
    min-height: 132px;
  }

  .identity-strip,
  .about-strip,
  .content-card,
  .hero-panel {
    padding: 22px;
  }
}

@media (max-width: 560px) {
  .shell {
    width: min(calc(100% - 22px), var(--max));
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button,
  .link-pill {
    width: 100%;
  }

  .site-footer {
    padding-bottom: 32px;
  }
}

/* =========================================================
   Homepage identity + project art direction pass
   ========================================================= */
.home-page {
  --home-ink: #f6f4ef;
  --home-paper: #0a0a0c;
  --home-signal: #d7ff58;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(circle at 16% 8%, rgba(215,255,88,.055), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(125,142,255,.055), transparent 24%),
    #09090b;
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 24px;
  height: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  transform: rotate(45deg);
}

.brand-mark i {
  display: block;
  border-radius: 2px;
  background: rgba(255,255,255,.92);
  transition: transform .18s ease, background .18s ease;
}

.brand:hover .brand-mark i:nth-child(1),
.brand:focus-visible .brand-mark i:nth-child(1) { transform: translate(-2px,-2px); }
.brand:hover .brand-mark i:nth-child(4),
.brand:focus-visible .brand-mark i:nth-child(4) { transform: translate(2px,2px); }

.brand-mark-small { width: 14px; height: 14px; gap: 2px; }

.home-page .site-header {
  background: rgba(9,9,11,.80);
}

.hero-grid-home {
  align-items: stretch;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  gap: clamp(28px, 5vw, 74px);
}

.home-wordmark {
  margin: 18px 0 16px !important;
  font-size: clamp(5rem, 14vw, 10.8rem) !important;
  line-height: .76 !important;
  letter-spacing: -.105em !important;
  max-width: none !important;
  color: var(--home-ink);
  text-wrap: nowrap;
}

.hero-lede {
  max-width: 760px;
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -.035em;
  font-weight: 720;
}

.home-page .hero-copy {
  max-width: 640px;
  font-size: 1.04rem;
}

.home-page .eyebrow::before,
.home-page .section-kicker::before {
  background: var(--home-signal);
  box-shadow: 0 0 22px rgba(215,255,88,.35);
}

.home-page .button-primary {
  background: var(--home-signal);
  color: #111208;
  border-color: var(--home-signal);
  box-shadow: 0 10px 36px rgba(215,255,88,.09);
}
.home-page .button-primary:hover {
  background: #e1ff7c;
  border-color: #e1ff7c;
}

.text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  color: var(--muted);
  font-weight: 700;
}
.text-link:hover { color: var(--text); }

.signal-board {
  align-self: end;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(12,12,15,.76);
  box-shadow: 0 26px 80px rgba(0,0,0,.34);
}

.signal-board-top,
.signal-board-foot {
  min-height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #8f93a0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.signal-board-top { border-bottom: 1px solid rgba(255,255,255,.08); }
.signal-board-foot {
  border-top: 1px solid rgba(255,255,255,.08);
  justify-content: flex-start;
  color: #777b88;
}

.signal-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 28px 10px minmax(105px, 1fr) minmax(90px, auto) 16px;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  transition: background .18s ease, padding .18s ease;
}
.signal-row:first-of-type { border-top: 0; }
.signal-row:hover { background: rgba(255,255,255,.045); padding-left: 20px; }
.signal-row strong { font-size: .96rem; letter-spacing: -.02em; }
.signal-row em { color: #8f93a0; font-style: normal; font-size: .78rem; text-align: right; }
.signal-no { color: #666b76; font-size: .72rem; font-variant-numeric: tabular-nums; }
.signal-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 16px currentColor; }
.signal-pt .signal-dot { color: #ff61b4; background: currentColor; }
.signal-iz .signal-dot { color: #788cff; background: currentColor; }
.signal-fl .signal-dot { color: #8eae78; background: currentColor; }
.signal-fd .signal-dot { color: #e69a62; background: currentColor; }

.projects-section {
  position: relative;
  padding-top: 24px;
}

.projects-head {
  margin-bottom: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.projects-head h2 { margin: 10px 0 0; font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: .9; letter-spacing: -.075em; }
.projects-head p { max-width: 430px; margin: 0; }

.project-grid-art { gap: 22px; }

.project-grid-art .project-card {
  min-height: 520px;
  padding: 0;
  gap: 0;
  background: #121218;
  border-radius: 26px;
}
.project-grid-art .project-card::before,
.project-grid-art .project-card::after { display: none; }

.project-grid-art .project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.project-art {
  position: relative;
  min-height: 255px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.09);
  isolation: isolate;
}
.project-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) .65px, transparent .65px);
  background-size: 5px 5px;
  opacity: .08;
  pointer-events: none;
}

.art-index {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 8;
  font-size: .72rem;
  letter-spacing: .15em;
  font-weight: 900;
  color: rgba(255,255,255,.58);
}

.art-watermark {
  position: absolute;
  right: -10px;
  bottom: -34px;
  z-index: 1;
  font-size: clamp(8rem, 17vw, 12rem);
  font-weight: 1000;
  line-height: .8;
  letter-spacing: -.12em;
  color: rgba(255,255,255,.055);
  user-select: none;
}

.project-copy {
  flex: 1;
  padding: 24px 26px 25px;
  display: flex;
  flex-direction: column;
}
.project-grid-art .project-card h3 {
  margin-top: 10px;
  margin-bottom: 12px;
  font-size: clamp(2.5rem, 4.8vw, 4.1rem);
}
.project-grid-art .project-card p { margin-bottom: 26px; }
.project-grid-art .card-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.10); }
.project-grid-art .arrow { transition: transform .2s ease; }
.project-grid-art .project-card:hover .arrow { transform: translate(3px,-3px); }

/* PUPPYTEETH: stickered, loud, playful */
.project-grid-art .puppyteeth { background: #161119; }
.puppyteeth .project-art {
  background:
    linear-gradient(115deg, rgba(255,49,154,.92), rgba(255,85,179,.73) 34%, rgba(67,135,255,.82) 68%, #172448);
}
.puppyteeth .project-art::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    repeating-linear-gradient(125deg, transparent 0 28px, rgba(255,255,255,.13) 29px 31px, transparent 32px 58px);
  transform: rotate(-5deg);
  opacity: .45;
}
.pt-sticker {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0 14px;
  background: #101014;
  border: 2px solid rgba(255,255,255,.88);
  box-shadow: 5px 5px 0 rgba(255,255,255,.16);
  color: #fff;
  font-size: .84rem;
  font-weight: 950;
  letter-spacing: .08em;
}
.pt-sticker-one { left: 42px; top: 72px; transform: rotate(-7deg); }
.pt-sticker-two { left: 144px; top: 132px; transform: rotate(5deg); background: #d7ff58; color: #14160a; border-color: #111; }
.pt-cross { position: absolute; z-index: 3; width: 42px; height: 42px; }
.pt-cross::before,.pt-cross::after { content:""; position:absolute; left:19px; top:1px; width:5px; height:40px; border-radius:4px; background:rgba(255,255,255,.72); }
.pt-cross::before { transform: rotate(45deg); }
.pt-cross::after { transform: rotate(-45deg); }
.pt-cross-one { right: 88px; top: 52px; transform: rotate(8deg); }
.pt-cross-two { right: 45px; top: 110px; transform: scale(.68) rotate(-12deg); opacity:.7; }
.pt-track { position:absolute; left:-18px; right:-18px; bottom:28px; height:8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.82) 0 18px, transparent 18px 30px); transform: rotate(-3deg); opacity:.66; }

/* izakt: softer, moody, audio-visual */
.project-grid-art .izakt { background: #12141b; }
.izakt .project-art {
  background:
    radial-gradient(circle at 70% 35%, rgba(135,109,255,.34), transparent 26%),
    radial-gradient(circle at 30% 78%, rgba(75,106,255,.30), transparent 30%),
    linear-gradient(135deg, #111521, #17172a 55%, #0f1017);
}
.iz-orb { position:absolute; border-radius:50%; filter: blur(.2px); }
.iz-orb-a { width:145px; height:145px; right:46px; top:38px; background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.68), rgba(127,130,255,.48) 25%, rgba(85,71,180,.26) 58%, transparent 72%); box-shadow:0 0 70px rgba(99,103,255,.20); }
.iz-orb-b { width:72px; height:72px; left:54px; top:110px; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.26), rgba(112,77,255,.16) 48%, transparent 70%); }
.iz-wave { position:absolute; left:28px; right:28px; bottom:36px; height:60px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent), repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 2px, transparent 2px 9px); mask-image: radial-gradient(ellipse at center, #000 10%, transparent 75%); opacity:.55; }
.iz-scan { position:absolute; inset:0; background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(255,255,255,.025) 8px 9px); }

/* Forgotten Lands: quiet map / horizon / moon */
.project-grid-art .forgotten { background: #111712; }
.forgotten .project-art {
  background:
    linear-gradient(180deg, rgba(207,221,188,.05), transparent 45%),
    radial-gradient(circle at 74% 28%, rgba(218,234,194,.13), transparent 25%),
    linear-gradient(145deg, #172019, #101711 64%, #0f1310);
}
.fl-moon { position:absolute; width:68px; height:68px; right:54px; top:42px; border-radius:50%; background: radial-gradient(circle at 34% 30%, #f2efd8 0 8%, #cad9b5 42%, rgba(200,214,179,.22) 69%, transparent 72%); box-shadow:0 0 40px rgba(211,228,187,.16); }
.fl-ridge { position:absolute; left:-4%; width:108%; transform-origin:center bottom; }
.fl-ridge-back { bottom:51px; height:112px; background:#263327; clip-path:polygon(0 82%, 12% 52%, 24% 70%, 36% 31%, 48% 66%, 61% 38%, 75% 75%, 86% 49%, 100% 77%, 100% 100%, 0 100%); opacity:.68; }
.fl-ridge-front { bottom:0; height:120px; background:#111a12; clip-path:polygon(0 68%, 12% 50%, 22% 76%, 34% 58%, 48% 83%, 58% 61%, 70% 75%, 83% 45%, 100% 69%, 100% 100%, 0 100%); }
.fl-path { position:absolute; left:42%; bottom:-18px; width:90px; height:150px; border-radius:50%; border-left:2px solid rgba(225,212,178,.52); transform:rotate(22deg); opacity:.7; }

/* Foxboy Den: files, systems, warm studio paperwork */
.project-grid-art .foxboy { background: #19130f; }
.foxboy .project-art {
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(145deg, #3a2418, #211813 65%, #17110f);
  background-size: 22px 22px, 22px 22px, auto;
}
.fd-folder { position:absolute; left:50px; right:42px; top:66px; bottom:28px; border:1px solid rgba(247,221,191,.34); border-radius:8px; background:rgba(227,179,126,.09); transform:rotate(-2deg); box-shadow:10px 12px 0 rgba(0,0,0,.15); }
.fd-tab { position:absolute; left:62px; top:49px; width:118px; height:22px; border:1px solid rgba(247,221,191,.34); border-bottom:0; border-radius:7px 7px 0 0; background:#3f2a1d; transform:rotate(-2deg); }
.fd-rule { position:absolute; left:82px; height:2px; background:rgba(247,221,191,.25); transform:rotate(-2deg); }
.fd-rule-one { top:110px; width:120px; }
.fd-rule-two { top:130px; width:88px; }
.fd-stamp { position:absolute; right:72px; top:88px; width:82px; height:82px; border:2px solid rgba(236,159,98,.70); border-radius:50%; display:grid; place-items:center; text-align:center; color:rgba(242,171,112,.82); font-size:.76rem; line-height:1.05; font-weight:950; letter-spacing:.12em; transform:rotate(11deg); }

.identity-strip-home {
  margin-top: 24px;
  background: rgba(12,12,15,.72);
}

.footer-mark { display:inline-flex; align-items:center; gap:9px; }

@media (max-width: 920px) {
  .hero-grid-home { grid-template-columns: 1fr; }
  .signal-board { max-width: 720px; }
  .home-wordmark { font-size: clamp(4.8rem, 18vw, 8.5rem) !important; }
}

@media (max-width: 760px) {
  .signal-row { grid-template-columns: 24px 8px minmax(0,1fr) 16px; }
  .signal-row em { display:none; }
  .projects-head { align-items:flex-start; flex-direction:column; }
  .project-grid-art .project-card { min-height: 480px; }
  .project-art { min-height: 230px; }
}

@media (max-width: 560px) {
  .home-wordmark { font-size: clamp(4rem, 20vw, 6rem) !important; }
  .hero-lede { font-size:1.35rem; }
  .signal-board { border-radius:20px; }
  .project-grid-art .project-card { min-height: 450px; }
  .project-copy { padding:22px; }
  .project-art { min-height:210px; }
  .pt-sticker-two { left:118px; top:126px; }
  .fd-stamp { right:46px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .project-card, .button, .link-pill, .signal-row, .brand-mark i, .arrow { transition: none !important; }
}

/* =========================================================
   Project landing page pass
   ========================================================= */
.project-landing {
  --project-accent: #ffffff;
  --project-accent-soft: rgba(255,255,255,.12);
  --project-panel: rgba(16,17,22,.84);
}
.project-accent-puppyteeth { --project-accent:#ff66b8; --project-accent-soft:rgba(255,102,184,.14); --project-panel:rgba(22,15,24,.88); }
.project-accent-izakt { --project-accent:#8090ff; --project-accent-soft:rgba(128,144,255,.13); --project-panel:rgba(17,18,29,.88); }
.project-accent-forgotten { --project-accent:#94b47d; --project-accent-soft:rgba(148,180,125,.13); --project-panel:rgba(14,20,15,.90); }
.project-accent-foxboy { --project-accent:#e99a62; --project-accent-soft:rgba(233,154,98,.14); --project-panel:rgba(24,17,14,.90); }

.project-landing .site-header { background: rgba(9,9,11,.80); }
.project-landing .eyebrow::before,
.project-landing .section-kicker::before { background:var(--project-accent); box-shadow:0 0 22px var(--project-accent-soft); }

.project-hero { padding: 54px 0 26px; }
.project-hero > .back-link { margin-bottom: 26px; }
.project-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);
  gap:clamp(28px,5vw,72px);
  align-items:stretch;
}
.project-hero-copy { padding: 22px 0 20px; }
.project-code {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 0 16px;
  margin-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:var(--muted-2);
  font-size:.69rem;
  letter-spacing:.15em;
  font-weight:850;
  text-transform:uppercase;
}
.project-code span:last-child { color:var(--project-accent); }
.project-hero h1 {
  margin:16px 0 20px;
  max-width:790px;
  font-size:clamp(4rem,8.7vw,8rem);
  line-height:.82;
  letter-spacing:-.085em;
  font-weight:975;
}
.project-hero .project-lede {
  max-width:760px;
  margin:0 0 14px;
  color:#f1f2f7;
  font-size:clamp(1.35rem,2.4vw,2rem);
  line-height:1.18;
  letter-spacing:-.035em;
  font-weight:720;
}
.project-intro {
  max-width:680px;
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.72;
}
.project-primary {
  color:#0c0c0f;
  background:var(--project-accent);
  border-color:var(--project-accent);
}
.project-primary:hover { border-color:var(--project-accent); filter:brightness(1.08); }

.project-hero-art {
  position:relative;
  min-height:560px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:30px;
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  isolation:isolate;
}
.project-hero-art::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  background-image:radial-gradient(rgba(255,255,255,.13) .65px, transparent .65px);
  background-size:5px 5px;
  opacity:.055;
  pointer-events:none;
}
.landing-corner,
.landing-caption {
  position:absolute;
  z-index:24;
  color:rgba(255,255,255,.62);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.landing-corner { top:20px; left:22px; }
.landing-caption { bottom:20px; left:22px; right:22px; padding-top:13px; border-top:1px solid rgba(255,255,255,.16); }

.project-readout {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  overflow:hidden;
  background:rgba(10,11,14,.52);
}
.project-readout > div { min-height:152px; padding:24px; border-left:1px solid rgba(255,255,255,.08); }
.project-readout > div:first-child { border-left:0; }
.readout-label { display:block; margin-bottom:22px; color:var(--muted-2); font-size:.68rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.project-readout strong { display:block; margin-bottom:8px; font-size:1.24rem; letter-spacing:-.025em; }
.project-readout p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.55; }

.project-section { padding:94px 0 34px; }
.project-section-head {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);
  gap:42px;
  align-items:end;
  margin-bottom:28px;
}
.project-section-head h2,
.project-exit h2 {
  margin:12px 0 0;
  font-size:clamp(2.8rem,5.6vw,5.3rem);
  line-height:.91;
  letter-spacing:-.075em;
}
.project-section-head > p { margin:0; color:var(--muted); line-height:1.72; }

.feature-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
}
.feature-card {
  position:relative;
  min-height:275px;
  padding:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),var(--project-panel);
}
.feature-card-large {
  grid-row:span 2;
  min-height:570px;
  display:flex;
  flex-direction:column;
}
.feature-no { display:block; margin-bottom:22px; color:var(--muted-2); font-size:.68rem; font-weight:900; letter-spacing:.15em; }
.feature-card h3 { margin:18px 0 9px; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1; letter-spacing:-.05em; }
.feature-card p { margin:0; color:var(--muted); line-height:1.63; }
.feature-copy { margin-top:auto; padding-top:22px; }
.feature-visual {
  position:relative;
  flex:1;
  min-height:285px;
  overflow:hidden;
  border-radius:19px;
  border:1px solid rgba(255,255,255,.09);
}
.mini-symbol {
  position:relative;
  width:72px;
  height:72px;
  margin-top:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  color:var(--project-accent);
  background:var(--project-accent-soft);
  font-weight:950;
  font-size:2rem;
}

.project-exit {
  margin-top:54px;
  margin-bottom:24px;
  padding:34px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px;
  background:linear-gradient(135deg,var(--project-accent-soft),rgba(255,255,255,.02) 54%,rgba(255,255,255,.01));
}
.project-exit h2 { font-size:clamp(2.4rem,4.4vw,4.2rem); }
.project-exit p { max-width:720px; margin:14px 0 0; color:var(--muted); line-height:1.65; }

.project-next {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:92px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  overflow:hidden;
  background:rgba(10,11,14,.48);
}
.project-next a {
  min-height:128px;
  padding:20px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  column-gap:13px;
  border-left:1px solid rgba(255,255,255,.08);
  transition:background .18s ease;
}
.project-next a:first-child { border-left:0; }
.project-next a:hover { background:rgba(255,255,255,.045); }
.project-next strong { grid-column:1; grid-row:1; align-self:end; letter-spacing:-.025em; }
.project-next em { grid-column:1; grid-row:2; color:var(--muted-2); font-size:.78rem; font-style:normal; }
.project-next b { grid-column:2; grid-row:1/3; align-self:center; font-weight:500; }

/* PUPPYTEETH landing visuals */
.pt-landing-art {
  background:linear-gradient(135deg,#ff3e9f 0%,#ff63bb 34%,#4e86ff 70%,#17234b 100%);
}
.pt-landing-art::before { content:""; position:absolute; inset:-10%; background:repeating-linear-gradient(128deg,transparent 0 34px,rgba(255,255,255,.12) 35px 38px,transparent 39px 67px); transform:rotate(-3deg); opacity:.48; }
.pt-bigtype { position:absolute; left:-22px; top:126px; z-index:2; font-size:clamp(8rem,18vw,15rem); line-height:.7; letter-spacing:-.12em; font-weight:1000; color:rgba(18,16,25,.40); transform:rotate(-7deg); }
.pt-label { position:absolute; z-index:8; min-height:48px; padding:0 15px; display:flex; align-items:center; border:2px solid #fff; background:#111116; color:#fff; box-shadow:6px 6px 0 rgba(255,255,255,.18); font-size:.8rem; font-weight:950; letter-spacing:.09em; }
.pt-label-a { left:44px; top:88px; transform:rotate(-6deg); }
.pt-label-b { right:42px; top:250px; transform:rotate(6deg); background:#d7ff58; color:#111; border-color:#111; box-shadow:6px 6px 0 rgba(17,17,17,.20); }
.pt-landing-cross { position:absolute; z-index:7; width:58px; height:58px; }
.pt-landing-cross::before,.pt-landing-cross::after { content:""; position:absolute; left:26px; top:2px; width:6px; height:54px; border-radius:8px; background:rgba(255,255,255,.78); }
.pt-landing-cross::before { transform:rotate(45deg); }.pt-landing-cross::after { transform:rotate(-45deg); }
.pt-landing-cross-a { right:72px; top:84px; }.pt-landing-cross-b { left:74px; bottom:92px; transform:scale(.72) rotate(8deg); opacity:.7; }
.pt-tape { position:absolute; z-index:5; left:-7%; right:-7%; bottom:102px; height:12px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.90) 0 24px,transparent 24px 38px); transform:rotate(-5deg); opacity:.70; }
.pt-feature-album { background:linear-gradient(145deg,#2b1023,#ff4ba7 48%,#416fff); }
.pt-feature-album::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.08) 23px 25px,transparent 26px 48px); }
.pt-feature-album span { position:absolute; left:24px; bottom:24px; z-index:3; font-size:clamp(3.3rem,7vw,6.5rem); line-height:.72; letter-spacing:-.095em; font-weight:1000; color:#fff; }
.pt-feature-album i { position:absolute; right:32px; top:34px; width:112px; height:112px; border-radius:50%; border:18px solid rgba(17,17,22,.66); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12); }
.pt-mini-warning { border-radius:50%; border-width:2px; }
.pt-mini-live { display:flex; justify-content:center; gap:6px; }
.pt-mini-live i { width:6px; border-radius:5px; background:currentColor; }.pt-mini-live i:nth-child(1){height:22px}.pt-mini-live i:nth-child(2){height:42px}.pt-mini-live i:nth-child(3){height:30px}

/* izakt landing visuals */
.iz-landing-art { background:radial-gradient(circle at 70% 30%,rgba(124,107,255,.35),transparent 24%),radial-gradient(circle at 30% 72%,rgba(66,102,255,.26),transparent 29%),linear-gradient(145deg,#111522,#18172a 55%,#0e1018); }
.iz-landing-orb { position:absolute; border-radius:50%; }
.iz-landing-orb-a { width:210px; height:210px; right:46px; top:76px; background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.70),rgba(133,136,255,.49) 24%,rgba(83,70,181,.25) 55%,transparent 72%); box-shadow:0 0 90px rgba(102,105,255,.18); }
.iz-landing-orb-b { width:86px; height:86px; left:70px; top:202px; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.24),rgba(108,81,255,.16) 50%,transparent 72%); }
.iz-landing-wave { position:absolute; left:34px; right:34px; bottom:94px; height:84px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.42) 0 2px,transparent 2px 9px); mask-image:radial-gradient(ellipse at center,#000 12%,transparent 74%); opacity:.52; }
.iz-landing-scan { position:absolute; inset:0; background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(255,255,255,.026) 8px 9px); }
.iz-titleghost { position:absolute; left:18px; bottom:54px; color:rgba(255,255,255,.045); font-size:17rem; font-weight:1000; line-height:.75; letter-spacing:-.14em; }
.iz-feature-record { background:radial-gradient(circle at 70% 34%,rgba(139,122,255,.28),transparent 26%),linear-gradient(145deg,#121621,#20203b 66%,#12131b); }
.iz-feature-record span { position:absolute; left:24px; bottom:25px; z-index:3; font-size:clamp(3.2rem,6vw,5.6rem); line-height:.78; letter-spacing:-.085em; font-weight:950; }
.iz-feature-record i { position:absolute; right:30px; top:36px; width:148px; height:148px; border-radius:50%; background:repeating-radial-gradient(circle,#0f1018 0 8px,#202236 9px 10px); border:1px solid rgba(255,255,255,.14); }
.iz-feature-record b { position:absolute; right:78px; top:84px; width:52px; height:52px; border-radius:50%; background:#8187ff; box-shadow:inset 0 0 0 16px #25263e; }
.iz-mini-disc { border-radius:50%; }.iz-mini-disc::before { content:""; width:34px; height:34px; border-radius:50%; border:9px solid currentColor; opacity:.8; }.iz-mini-wave::before { content:""; width:42px; height:24px; background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 8px); mask-image:radial-gradient(ellipse at center,#000,transparent 74%); }

/* Forgotten Lands landing visuals */
.fl-landing-art { background:radial-gradient(circle at 74% 20%,rgba(208,226,184,.13),transparent 21%),linear-gradient(180deg,#1b281d 0%,#141e16 44%,#0c120d 100%); }
.fl-landing-moon { position:absolute; right:58px; top:74px; width:92px; height:92px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f3eed8 0 8%,#cbdab7 44%,rgba(196,214,176,.20) 70%,transparent 73%); box-shadow:0 0 46px rgba(207,226,184,.18); }
.fl-stars { position:absolute; inset:30px 24px 180px; background-image:radial-gradient(rgba(235,240,222,.38) 1px,transparent 1px); background-size:42px 37px; opacity:.35; }
.fl-mountain { position:absolute; left:-5%; width:110%; transform-origin:center bottom; }
.fl-mountain-back { bottom:122px; height:230px; background:#2a3a2c; clip-path:polygon(0 84%,9% 60%,18% 74%,29% 35%,40% 68%,51% 27%,63% 70%,75% 42%,88% 73%,100% 56%,100% 100%,0 100%); opacity:.67; }
.fl-mountain-mid { bottom:58px; height:210px; background:#18251a; clip-path:polygon(0 78%,12% 49%,24% 73%,38% 43%,51% 79%,64% 54%,77% 77%,89% 38%,100% 66%,100% 100%,0 100%); }
.fl-mountain-front { bottom:0; height:150px; background:#0c130d; clip-path:polygon(0 52%,10% 67%,19% 48%,31% 69%,42% 55%,54% 78%,64% 53%,78% 72%,90% 49%,100% 62%,100% 100%,0 100%); }
.fl-landing-path { position:absolute; left:46%; bottom:-26px; width:128px; height:222px; border-radius:50%; border-left:3px solid rgba(228,211,170,.50); transform:rotate(18deg); }
.fl-marker { position:absolute; left:36px; top:88px; z-index:5; padding:10px 12px; border:1px solid rgba(224,232,211,.20); color:rgba(229,235,219,.70); background:rgba(10,15,11,.34); font-size:.72rem; letter-spacing:.16em; font-weight:900; }
.fl-feature-map { background:linear-gradient(145deg,#162118,#101711); }
.fl-feature-map::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:28px 28px; }
.fl-map-ring { position:absolute; width:190px; height:140px; left:52px; top:55px; border:1px solid rgba(212,226,194,.20); border-radius:50%; transform:rotate(-13deg); }.fl-map-ring.ring-two{width:250px;height:180px;left:30px;top:38px;opacity:.6}.fl-map-route{position:absolute;left:90px;top:90px;width:190px;height:110px;border-left:2px dashed rgba(230,207,161,.54);border-bottom:2px dashed rgba(230,207,161,.54);border-radius:0 0 0 90px;transform:rotate(-11deg)}.fl-feature-map b{position:absolute;right:48px;bottom:36px;color:rgba(234,222,190,.7);font-size:4rem;font-weight:500}.fl-mini-grid::before{content:"";width:38px;height:38px;background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:12px 12px;opacity:.65}.fl-mini-compass{font-size:2.6rem}

/* Foxboy Den landing visuals */
.fd-landing-art { background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(145deg,#422719,#251a14 65%,#15100e); background-size:24px 24px,24px 24px,auto; }
.fd-sheet { position:absolute; border:1px solid rgba(247,221,191,.34); border-radius:10px; background:rgba(226,187,145,.10); box-shadow:12px 16px 0 rgba(0,0,0,.15); }
.fd-sheet-back { left:82px; right:48px; top:100px; bottom:60px; transform:rotate(5deg); opacity:.56; }.fd-sheet-front { left:48px; right:78px; top:82px; bottom:76px; transform:rotate(-3deg); }
.fd-sheet-tab { position:absolute; left:63px; top:60px; z-index:5; padding:10px 15px; border:1px solid rgba(247,221,191,.34); border-bottom:0; border-radius:8px 8px 0 0; background:#3d291d; color:rgba(249,226,201,.72); font-size:.67rem; font-weight:900; letter-spacing:.14em; transform:rotate(-3deg); }
.fd-sheet-line { position:absolute; z-index:6; left:96px; height:2px; background:rgba(247,221,191,.24); transform:rotate(-3deg); }.line-a{top:164px;width:160px}.line-b{top:190px;width:218px}.line-c{top:216px;width:132px}
.fd-landing-stamp { position:absolute; right:104px; top:248px; z-index:7; width:112px; height:112px; display:grid; place-items:center; border:3px solid rgba(236,159,98,.72); border-radius:50%; color:rgba(243,170,110,.86); text-align:center; font-size:.78rem; line-height:1.08; letter-spacing:.14em; font-weight:950; transform:rotate(11deg); }
.fd-paperclip { position:absolute; right:76px; top:74px; z-index:8; width:24px; height:72px; border:3px solid rgba(241,223,205,.50); border-radius:18px; transform:rotate(18deg); }.fd-paperclip::after{content:"";position:absolute;left:4px;top:8px;width:10px;height:48px;border:2px solid rgba(241,223,205,.35);border-radius:12px}
.fd-feature-file { background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(145deg,#3a2419,#1c1511);background-size:22px 22px,22px 22px,auto}.fd-feature-file span{position:absolute;left:24px;top:24px;font-size:.72rem;font-weight:900;letter-spacing:.16em;color:rgba(250,225,199,.72)}.fd-feature-file i{position:absolute;left:24px;right:24px;top:64px;height:1px;background:rgba(250,225,199,.20)}.fd-feature-file b{position:absolute;left:24px;bottom:30px;font-size:clamp(3.2rem,6vw,5.7rem);line-height:.78;letter-spacing:-.075em;color:rgba(248,222,195,.86)}.fd-feature-file em{position:absolute;right:28px;top:112px;width:108px;height:108px;border:3px solid rgba(234,153,95,.68);border-radius:50%;display:grid;place-items:center;color:rgba(239,163,105,.82);font-size:.72rem;font-style:normal;font-weight:950;letter-spacing:.11em;transform:rotate(10deg)}.fd-mini-card i{width:34px;height:42px;border:2px solid currentColor;border-radius:4px;position:relative}.fd-mini-card i::before{content:"";position:absolute;left:6px;right:6px;top:8px;height:9px;border:1px solid currentColor;border-radius:50%}.fd-mini-card i::after{content:"";position:absolute;left:6px;right:6px;bottom:8px;height:1px;background:currentColor;box-shadow:0 -6px 0 currentColor}.fd-mini-grid::before{content:"";width:40px;height:40px;background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:10px 10px;opacity:.7}

@media (max-width: 980px) {
  .project-hero-grid,
  .project-section-head { grid-template-columns:1fr; }
  .project-hero-art { min-height:500px; }
  .project-section-head { gap:20px; }
  .project-section-head > p { max-width:720px; }
  .project-exit { grid-template-columns:1fr; }
  .project-exit .button { justify-self:start; }
}

@media (max-width: 760px) {
  .project-hero { padding-top:38px; }
  .project-hero h1 { font-size:clamp(3.8rem,17vw,6.5rem); }
  .project-hero-art { min-height:420px; border-radius:24px; }
  .project-readout { grid-template-columns:1fr; }
  .project-readout > div { min-height:auto; border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .project-readout > div:first-child { border-top:0; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card-large { grid-row:auto; min-height:520px; }
  .project-next { grid-template-columns:1fr; }
  .project-next a { min-height:96px; border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .project-next a:first-child { border-top:0; }
}

@media (max-width: 560px) {
  .project-hero-art { min-height:360px; }
  .project-code { margin-bottom:22px; }
  .project-section { padding-top:72px; }
  .project-exit { padding:24px; }
  .project-exit .button { width:100%; }
  .pt-bigtype { top:118px; font-size:8.5rem; }
  .pt-label-a { left:24px; top:70px; }.pt-label-b { right:22px; top:218px; }
  .pt-landing-cross-a { right:36px; top:68px; }
  .iz-landing-orb-a { width:164px; height:164px; right:24px; top:78px; }.iz-titleghost { font-size:12rem; }
  .fl-landing-moon { right:30px; top:58px; width:72px; height:72px; }
  .fd-sheet-back { left:54px; right:28px; }.fd-sheet-front { left:26px; right:54px; }.fd-sheet-tab { left:41px; }.fd-sheet-line { left:70px; }.fd-landing-stamp { right:58px; top:205px; width:94px; height:94px; }
}

/* =========================================================
   Motion + content polish pass
   ========================================================= */

/* Shared reveal language: quiet, fast, and one-way. */
.motion-enabled .reveal-item {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition:
    opacity .72s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
    transform .72s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
    filter .72s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
}
.motion-enabled .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Header settles in without competing with the first read. */
.motion-enabled .site-header {
  animation: header-settle .58s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes header-settle {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reactive light follows the pointer very lightly on the big visual surfaces. */
.pointer-light {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.11), transparent 31%);
  transition: opacity .28s ease;
}
.project-card:hover > .pointer-light,
.project-hero-art:hover > .pointer-light { opacity: 1; }

/* Homepage cards: depth comes from the artwork moving, not the whole page shouting. */
.project-grid-art .project-art,
.project-grid-art .project-copy {
  transition: transform .55s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
}
.project-grid-art .project-card:hover .project-art { transform: translateY(-3px) scale(1.008); }
.project-grid-art .project-card:hover .project-copy { transform: translateY(-2px); }

/* PUPPYTEETH moves like stickers that never quite sit still. */
.motion-enabled .pt-sticker-one { animation: pt-sticker-a 5.6s ease-in-out infinite; }
.motion-enabled .pt-sticker-two { animation: pt-sticker-b 6.8s ease-in-out infinite; }
.motion-enabled .pt-cross-one { animation: pt-cross-drift 7.2s ease-in-out infinite; }
.motion-enabled .pt-track { animation: pt-track-slide 9s linear infinite; }
@keyframes pt-sticker-a { 0%,100%{transform:rotate(-7deg) translateY(0)} 50%{transform:rotate(-5deg) translateY(-4px)} }
@keyframes pt-sticker-b { 0%,100%{transform:rotate(5deg) translateY(0)} 50%{transform:rotate(3deg) translateY(3px)} }
@keyframes pt-cross-drift { 0%,100%{transform:rotate(8deg) scale(1)} 50%{transform:rotate(14deg) scale(1.04)} }
@keyframes pt-track-slide { from{background-position:0 0} to{background-position:120px 0} }

/* izakt: slow orbital motion, closer to breathing than spinning. */
.motion-enabled .iz-orb-a { animation: iz-orbit-a 8.8s ease-in-out infinite; }
.motion-enabled .iz-orb-b { animation: iz-orbit-b 10.5s ease-in-out infinite; }
.motion-enabled .iz-wave { animation: iz-wave-breathe 6.4s ease-in-out infinite; }
@keyframes iz-orbit-a { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-7px,5px,0) scale(1.035)} }
@keyframes iz-orbit-b { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(6px,-8px,0)} }
@keyframes iz-wave-breathe { 0%,100%{opacity:.46; transform:scaleY(.92)} 50%{opacity:.66; transform:scaleY(1.06)} }

/* Forgotten Lands: the world barely moves. That is the point. */
.motion-enabled .fl-moon { animation: fl-moon-glow 8s ease-in-out infinite; }
.motion-enabled .fl-path { animation: fl-path-breathe 7.4s ease-in-out infinite; }
@keyframes fl-moon-glow { 0%,100%{filter:brightness(.96); transform:translateY(0)} 50%{filter:brightness(1.08); transform:translateY(-3px)} }
@keyframes fl-path-breathe { 0%,100%{opacity:.54} 50%{opacity:.82} }

/* Foxboy Den: paper, stamp, and file movement stays tactile and tiny. */
.motion-enabled .fd-stamp { animation: fd-stamp-settle 7s ease-in-out infinite; }
.motion-enabled .fd-folder { animation: fd-folder-breathe 9s ease-in-out infinite; }
@keyframes fd-stamp-settle { 0%,100%{transform:rotate(11deg) translateY(0)} 50%{transform:rotate(9deg) translateY(-3px)} }
@keyframes fd-folder-breathe { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(-1.2deg) translateY(-2px)} }

/* Landing page hero motion. */
.motion-enabled .pt-bigtype { animation: landing-pt-pulse 6.2s ease-in-out infinite; }
.motion-enabled .pt-tape { animation: landing-tape 10s linear infinite; }
.motion-enabled .iz-landing-orb-a { animation: landing-orb-a 10s ease-in-out infinite; }
.motion-enabled .iz-landing-orb-b { animation: landing-orb-b 12s ease-in-out infinite; }
.motion-enabled .iz-landing-wave { animation: iz-wave-breathe 7s ease-in-out infinite; }
.motion-enabled .fl-landing-moon { animation: fl-moon-glow 9s ease-in-out infinite; }
.motion-enabled .fl-stars { animation: star-breathe 8s ease-in-out infinite; }
.motion-enabled .fd-sheet-front { animation: fd-sheet-front 9s ease-in-out infinite; }
.motion-enabled .fd-landing-stamp { animation: fd-landing-stamp 8.5s ease-in-out infinite; }
@keyframes landing-pt-pulse { 0%,100%{transform:translateY(0) rotate(-7deg)} 50%{transform:translateY(-4px) rotate(-6deg)} }
@keyframes landing-tape { from{background-position:0 0} to{background-position:160px 0} }
@keyframes landing-orb-a { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-9px,7px) scale(1.025)} }
@keyframes landing-orb-b { 0%,100%{transform:translate(0,0)} 50%{transform:translate(7px,-9px)} }
@keyframes star-breathe { 0%,100%{opacity:.26} 50%{opacity:.46} }
@keyframes fd-sheet-front { 0%,100%{transform:rotate(-3deg) translateY(0)} 50%{transform:rotate(-2.5deg) translateY(-3px)} }
@keyframes fd-landing-stamp { 0%,100%{transform:rotate(11deg) scale(1)} 50%{transform:rotate(9deg) scale(1.025)} }

/* Tiny living signals. */
.motion-enabled .signal-dot { animation: signal-pulse 4.8s ease-in-out infinite; }
.motion-enabled .signal-row:nth-child(3) .signal-dot { animation-delay:.6s; }
.motion-enabled .signal-row:nth-child(4) .signal-dot { animation-delay:1.2s; }
.motion-enabled .signal-row:nth-child(5) .signal-dot { animation-delay:1.8s; }
@keyframes signal-pulse { 0%,100%{box-shadow:0 0 9px currentColor; opacity:.74} 50%{box-shadow:0 0 20px currentColor; opacity:1} }

/* Navigation and action micro-motion. */
.nav-links a,
.text-link,
.back-link,
.project-next a,
.card-footer,
.footer-mark {
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}
.text-link:hover,
.back-link:hover { transform: translateX(2px); }
.project-next a:hover b { transform: translate(3px,-3px); }
.project-next b { transition: transform .2s ease; }

/* Keep motion from becoming a battery-eating tiny disco. */
@media (hover: none), (pointer: coarse) {
  .pointer-light { display:none; }
  .project-grid-art .project-card:hover .project-art,
  .project-grid-art .project-card:hover .project-copy { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .reveal-item,
  .motion-enabled .site-header,
  .motion-enabled .pt-sticker-one,
  .motion-enabled .pt-sticker-two,
  .motion-enabled .pt-cross-one,
  .motion-enabled .pt-track,
  .motion-enabled .iz-orb-a,
  .motion-enabled .iz-orb-b,
  .motion-enabled .iz-wave,
  .motion-enabled .fl-moon,
  .motion-enabled .fl-path,
  .motion-enabled .fd-stamp,
  .motion-enabled .fd-folder,
  .motion-enabled .pt-bigtype,
  .motion-enabled .pt-tape,
  .motion-enabled .iz-landing-orb-a,
  .motion-enabled .iz-landing-orb-b,
  .motion-enabled .iz-landing-wave,
  .motion-enabled .fl-landing-moon,
  .motion-enabled .fl-stars,
  .motion-enabled .fd-sheet-front,
  .motion-enabled .fd-landing-stamp,
  .motion-enabled .signal-dot {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
}

.status-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.025);
  font-size:.88rem;
  font-weight:750;
}


/* =========================================================
   About page + connective tissue pass
   ========================================================= */

.nav-links a[aria-current="page"] {
  color: var(--text);
  position: relative;
}
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 1px;
  background: rgba(255,255,255,.6);
}

/* About */
.about-page {
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 14% 4%, rgba(215,255,88,.052), transparent 27%),
    radial-gradient(circle at 86% 18%, rgba(117,129,255,.055), transparent 24%),
    linear-gradient(180deg,#09090c,#0b0c11 58%,#090a0d);
  background-size: 32px 32px,32px 32px,auto,auto,auto;
}
.about-hero { padding: clamp(70px,9vw,120px) 0 64px; }
.about-hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); gap:46px; align-items:center; }
.about-hero h1 { margin:18px 0 24px; max-width:820px; font-size:clamp(3.7rem,8.5vw,8rem); line-height:.86; letter-spacing:-.082em; }
.about-lede { max-width:760px; margin-bottom:18px; color:#e0e2eb; font-size:clamp(1.25rem,2.4vw,1.72rem); line-height:1.42; letter-spacing:-.025em; }
.about-intro { max-width:690px; margin:0; color:var(--muted); font-size:1.05rem; line-height:1.72; }

.about-signal { position:relative; overflow:hidden; min-height:465px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.018)),rgba(13,14,18,.92); box-shadow:var(--shadow); }
.about-signal::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,#000,transparent 86%); }
.about-signal-top,.about-signal-foot { position:absolute; left:22px; right:22px; z-index:4; display:flex; justify-content:space-between; gap:14px; color:var(--muted-2); font-size:.67rem; letter-spacing:.15em; font-weight:850; }
.about-signal-top { top:20px; }.about-signal-foot { bottom:20px; justify-content:flex-start; }
.about-signal-core { position:absolute; z-index:5; left:50%; top:44%; transform:translate(-50%,-50%); width:178px; height:178px; border:1px solid rgba(255,255,255,.16); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle,rgba(215,255,88,.08),rgba(255,255,255,.025) 56%,transparent 72%); box-shadow:0 0 80px rgba(215,255,88,.035); }
.about-signal-core strong { margin-top:11px; font-size:1.05rem; letter-spacing:-.045em; }.about-signal-core em { max-width:115px; margin-top:5px; color:var(--muted-2); font-size:.64rem; line-height:1.25; font-style:normal; }
.about-core-mark { display:grid; grid-template-columns:repeat(2,8px); gap:3px; transform:rotate(45deg); }.about-core-mark i { width:8px;height:8px;background:#d7ff58;border-radius:2px;box-shadow:0 0 14px rgba(215,255,88,.2); }
.about-signal-lines { position:absolute; inset:0; z-index:2; }.about-signal-lines i { position:absolute; left:50%; top:44%; width:1px; height:150px; transform-origin:top; background:linear-gradient(rgba(255,255,255,.20),transparent); }.about-signal-lines i:nth-child(1){transform:rotate(48deg)}.about-signal-lines i:nth-child(2){transform:rotate(132deg)}.about-signal-lines i:nth-child(3){transform:rotate(228deg)}.about-signal-lines i:nth-child(4){transform:rotate(312deg)}
.about-node { position:absolute; z-index:5; padding:8px 10px; border:1px solid rgba(255,255,255,.11); border-radius:999px; background:#101116; font-size:.65rem; font-weight:850; letter-spacing:.035em; box-shadow:0 10px 22px rgba(0,0,0,.18); }.node-pt{left:28px;top:112px;color:#ff72b7}.node-iz{right:40px;top:104px;color:#9fa7ff}.node-fl{left:38px;bottom:88px;color:#b7cdaa}.node-fd{right:27px;bottom:96px;color:#eab37e}

.about-statement { padding:78px 0; border-top:1px solid var(--soft-line); border-bottom:1px solid var(--soft-line); }
.about-statement-grid { display:grid; grid-template-columns:1fr .92fr; gap:60px; margin-top:28px; align-items:start; }.about-statement h2 { margin:0; max-width:660px; font-size:clamp(2.8rem,6vw,5.8rem); line-height:.92; letter-spacing:-.065em; }.about-statement p { color:var(--muted); font-size:1.08rem; line-height:1.75; }.about-statement p:last-child{margin-bottom:0}

.about-projects { padding:88px 0; }.about-section-head { display:block; margin-bottom:34px; }.about-section-head h2{margin:12px 0 0;font-size:clamp(2.8rem,5.5vw,5.1rem);line-height:.92;letter-spacing:-.06em}.about-section-head>p{max-width:420px;margin:0;color:var(--muted);line-height:1.65}
.about-project-list { border-top:1px solid var(--line); }.about-project-link { --project-accent:#fff; position:relative; display:grid; grid-template-columns:minmax(170px,.72fr) minmax(180px,.85fr) 1.35fr 32px; gap:20px; align-items:center; min-height:108px; border-bottom:1px solid var(--line); transition:background .22s ease,padding .22s ease; }.about-project-link::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--project-accent); opacity:.55; transform:scaleY(.18); transition:transform .22s ease,opacity .22s ease; }.about-project-link:hover { background:rgba(255,255,255,.026); padding-left:12px; }.about-project-link:hover::before { transform:scaleY(1); opacity:1; }.about-project-link strong { font-size:1.18rem; letter-spacing:-.03em; }.about-project-link em { color:var(--muted-2); font-size:.78rem; font-style:normal; }.about-project-link p { margin:0; color:var(--muted); line-height:1.5; font-size:.92rem; }.about-project-link>b { justify-self:end; font-weight:500; transition:transform .2s ease; }.about-project-link:hover>b { transform:translate(3px,-3px); }.about-project-pt{--project-accent:#ff4fa8}.about-project-iz{--project-accent:#7f88ff}.about-project-fl{--project-accent:#8ca881}.about-project-fd{--project-accent:#d88f58}

.about-maker { padding:0 0 96px; }.about-maker-card { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center; padding:36px; border:1px solid var(--line); border-radius:26px; background:linear-gradient(135deg,rgba(215,255,88,.04),transparent 35%),rgba(15,16,21,.86); }.about-maker-card::after { content:"IZAKTLY"; position:absolute; right:-18px; bottom:-36px; color:rgba(255,255,255,.018); font-size:9rem; line-height:1; font-weight:1000; letter-spacing:-.1em; pointer-events:none; }.about-maker-index { color:var(--muted-2); font-size:.75rem; letter-spacing:.18em; font-weight:850; }.about-maker h2{margin:10px 0 8px;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.055em}.about-maker p{max-width:710px;margin:0;color:var(--muted);line-height:1.65}

/* Connective project strip */
.project-next-wrap { margin-top:0; border-top:1px solid var(--line); }
.project-next-label { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:23px 0 19px; color:var(--muted-2); font-size:.78rem; }
.project-next-wrap .project-next { width:100%; margin:0; border-left:1px solid rgba(255,255,255,.08); border-right:1px solid rgba(255,255,255,.08); }

/* Contact connective map */
.contact-hero { padding-bottom:50px; }.contact-hero p { max-width:760px; }.contact-project-map { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:92px; border:1px solid var(--line); border-radius:24px; overflow:hidden; }.contact-project { --project-accent:#fff; position:relative; min-height:160px; padding:22px; display:grid; align-content:end; gap:6px; border-left:1px solid var(--line); background:rgba(255,255,255,.018); transition:background .2s ease; }.contact-project:first-child{border-left:0}.contact-project::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--project-accent);opacity:.65}.contact-project:hover{background:rgba(255,255,255,.045)}.contact-project strong{font-size:1.05rem}.contact-project em{color:var(--muted-2);font-size:.75rem;font-style:normal}.contact-project b{position:absolute;right:20px;top:18px;font-weight:500}.contact-pt{--project-accent:#ff4fa8}.contact-iz{--project-accent:#7f88ff}.contact-fl{--project-accent:#8ca881}.contact-fd{--project-accent:#d88f58}

/* Full footer / persistent site map */
.site-footer { margin-top:0; padding:0; border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)); }
.footer-main { display:grid; grid-template-columns:1.25fr 1fr .55fr; gap:56px; padding-top:52px; padding-bottom:46px; }
.footer-identity { max-width:420px; }.footer-brand { display:inline-flex; align-items:center; gap:11px; font-size:1.45rem; font-weight:950; letter-spacing:-.065em; }.footer-identity p { margin:18px 0 20px; color:var(--muted-2); line-height:1.6; }.footer-motto,.footer-label { color:var(--muted-2); font-size:.65rem; letter-spacing:.17em; font-weight:850; }.footer-projects,.footer-utility { display:flex; flex-direction:column; }.footer-label { margin-bottom:12px; }.footer-project { --footer-accent:#fff; display:grid; grid-template-columns:1fr 20px; gap:8px; align-items:center; min-height:42px; border-bottom:1px solid var(--soft-line); position:relative; }.footer-project::before{content:"";position:absolute;left:-9px;width:3px;height:3px;border-radius:50%;background:var(--footer-accent);box-shadow:0 0 10px var(--footer-accent)}.footer-project strong { font-size:.82rem; font-weight:700; }.footer-project b { justify-self:end; font-weight:400; color:var(--muted-2); transition:transform .18s ease; }.footer-project:hover b{transform:translate(2px,-2px)}.footer-pt{--footer-accent:#ff4fa8}.footer-iz{--footer-accent:#7f88ff}.footer-fl{--footer-accent:#8ca881}.footer-fd{--footer-accent:#d88f58}.footer-utility a { padding:8px 0; color:var(--muted); font-size:.88rem; }.footer-utility a:hover{color:var(--text)}.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:18px; padding-bottom:28px; border-top:1px solid var(--soft-line); color:var(--muted-2); font-size:.72rem; letter-spacing:.04em; }

@media (max-width: 920px) {
  .about-hero-grid,.about-statement-grid,.about-section-head { grid-template-columns:1fr; }
  .about-signal { min-height:420px; }
  .about-project-link { grid-template-columns:1fr 32px; gap:12px 18px; padding:18px 0; }.about-project-link strong{grid-column:1}.about-project-link em{grid-column:1}.about-project-link p{grid-column:1;max-width:620px}.about-project-link>b{grid-column:2;grid-row:1/4;align-self:center}
  .about-maker-card { grid-template-columns:1fr auto; }.about-maker-card .button{justify-self:end}.footer-main{grid-template-columns:1fr 1fr}.footer-identity{grid-column:1/-1;max-width:620px}.contact-project-map{grid-template-columns:1fr 1fr}.contact-project:nth-child(3){border-left:0;border-top:1px solid var(--line)}.contact-project:nth-child(4){border-top:1px solid var(--line)}
}
@media (max-width: 620px) {
  .nav-links a[aria-current="page"]::after { bottom:-5px; }
  .about-hero { padding-top:56px; }.about-signal{min-height:390px}.node-pt{left:18px}.node-iz{right:18px}.node-fl{left:20px}.node-fd{right:18px}.about-signal-core{width:150px;height:150px}.about-statement,.about-projects{padding:64px 0}.about-project-link{grid-template-columns:1fr 22px}.about-project-link:hover{padding-left:6px}.about-maker-card{grid-template-columns:1fr;padding:25px}.about-maker-card .button{width:100%}.project-next-label{align-items:flex-start;flex-direction:column}.contact-project-map{grid-template-columns:1fr}.contact-project{border-left:0;border-top:1px solid var(--line)}.contact-project:first-child{border-top:0}.footer-main{grid-template-columns:1fr;gap:36px;padding-top:40px}.footer-identity{grid-column:auto}.footer-bottom{flex-direction:column;gap:7px}
}


/* =========================================================
   Real media pass
   ========================================================= */
/* Media-card selectors intentionally carry higher specificity than the
   earlier project art-direction rules. Those rules use the `background`
   shorthand, which otherwise resets background-image / position / size. */
.project-grid-art .project-card .project-art[class*="media-card-"],
.project-hero-art[class*="media-hero-"],
.feature-visual[class*="feature-media"] {
  background-repeat: no-repeat;
}

.project-grid-art .project-card .project-art[class*="media-card-"] {
  background-size: cover;
  background-position: center center;
}

.project-grid-art .project-card .project-art.media-card-pt {
  background-image:
    linear-gradient(180deg, rgba(10,10,14,.06) 0%, rgba(10,10,14,.16) 52%, rgba(10,10,14,.64) 100%),
    url('assets/media/puppyteeth-hero.webp');
  background-size: cover, cover;
  background-position: center center, center 28%;
}
.project-grid-art .project-card .project-art.media-card-iz {
  background-image:
    linear-gradient(180deg, rgba(10,10,14,.10) 0%, rgba(10,10,14,.22) 58%, rgba(10,10,14,.66) 100%),
    url('assets/media/izakt-hero.webp');
  background-size: cover, cover;
  background-position: center center, center center;
}
.project-grid-art .project-card .project-art.media-card-fl {
  background-image:
    linear-gradient(180deg, rgba(10,10,14,.10) 0%, rgba(10,10,14,.16) 48%, rgba(10,10,14,.58) 100%),
    url('assets/media/forgotten-hero.webp');
  background-size: cover, cover;
  background-position: center center, center center;
}
.project-grid-art .project-card .project-art.media-card-fd {
  background-image:
    linear-gradient(180deg, rgba(10,10,14,.08) 0%, rgba(10,10,14,.16) 54%, rgba(10,10,14,.60) 100%),
    url('assets/media/foxboy-den-hero.webp');
  background-size: cover, cover;
  background-position: center center, center center;
}

.project-hero-art[class*="media-hero-"] {
  background-size: cover;
  background-position: center center;
}
.project-hero-art[class*="media-hero-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(8,8,11,.12) 0%, rgba(8,8,11,.12) 55%, rgba(8,8,11,.62) 100%);
}
.project-hero-art .landing-corner,
.project-hero-art .landing-caption { z-index: 24; }
.media-hero-pt { background-image: url('assets/media/puppyteeth-hero.webp'); background-position: center 30%; }
.media-hero-iz { background-image: url('assets/media/izakt-hero.webp'); }
.media-hero-fl { background-image: url('assets/media/forgotten-hero.webp'); }
.media-hero-fd { background-image: url('assets/media/foxboy-den-hero.webp'); }

.feature-visual[class*="feature-media"] {
  background-position: center center;
  background-size: cover;
}
.feature-visual[class*="feature-media"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,9,12,.03) 0%, rgba(9,9,12,.18) 48%, rgba(9,9,12,.56) 100%);
  pointer-events: none;
}
.pt-feature-media {
  background-image:
    radial-gradient(circle at 78% 18%, rgba(74,132,255,.28), transparent 22%),
    linear-gradient(145deg, rgba(255,72,171,.22), rgba(13,13,17,.0) 40%),
    url('assets/media/puppyteeth-fullbody.webp');
  background-size: auto, auto, contain;
  background-position: center, center, center bottom;
  background-repeat: no-repeat;
  background-color: #151119;
}
.iz-feature-media {
  background-image:
    linear-gradient(145deg, rgba(125,133,255,.22), rgba(12,14,20,.0) 40%),
    url('assets/media/izakt-logo.webp'),
    url('assets/media/izakt-my-decay.webp');
  background-size: auto, 20%, contain;
  background-position: center, 24px 22px, center center;
  background-repeat: no-repeat;
  background-color: #111521;
}
.fl-feature-media {
  background-image:
    linear-gradient(145deg, rgba(207,221,188,.08), rgba(12,17,13,.10) 42%),
    url('assets/media/forgotten-battle.webp');
  background-size: auto, cover;
  background-position: center, center center;
  background-repeat: no-repeat;
}
.fd-feature-media {
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255,244,214,.18), transparent 26%),
    url('assets/media/foxboy-den-wordmark.webp'),
    url('assets/media/foxboy-den-raccoon.webp'),
    url('assets/media/foxboy-den-rufus.webp'),
    linear-gradient(145deg, #3a2419, #1c1511);
  background-size: auto, 56%, 34%, 34%, auto;
  background-position: center, center 18px, 10% bottom, 90% bottom, center;
  background-repeat: no-repeat;
}

.art-index {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(12,12,16,.45);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 760px) {
  .project-hero-art[class*="media-hero-"] { min-height: 420px; }
  .fd-feature-media {
    background-size: auto, 70%, 38%, 38%, auto;
    background-position: center, center 20px, 6% bottom, 96% bottom, center;
  }
}


/* =========================================================
   Homepage studio showcase pass
   ========================================================= */
.home-hero {
  padding: clamp(84px, 10vw, 142px) 0 clamp(64px, 7vw, 92px);
}
.home-hero-lockup {
  max-width: 1040px;
}
.home-hero .home-wordmark {
  margin: 22px 0 20px !important;
}
.home-hero .hero-lede {
  margin: 0;
  max-width: none;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.studio-showcase {
  padding-top: 0;
  padding-bottom: 96px;
}
.studio-showcase-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.studio-showcase-head h2 {
  margin: 0;
  font-size: clamp(2.8rem, 5.6vw, 5.6rem);
  line-height: .86;
  letter-spacing: -.075em;
}

.studio-project-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 42px;
  gap: 18px;
}
.home-page .studio-project.project-card {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  background: #111216;
  box-shadow: 0 22px 60px rgba(0,0,0,.24);
  isolation: isolate;
}
.home-page .studio-project.project-card::before,
.home-page .studio-project.project-card::after {
  display: none;
}
.home-page .studio-project.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 32px 90px rgba(0,0,0,.38);
}
.studio-pt { grid-column: 1 / span 7; grid-row: span 10; }
.studio-iz { grid-column: 8 / span 5; grid-row: span 10; }
.studio-fl { grid-column: 1 / span 5; grid-row: span 9; }
.studio-fd { grid-column: 6 / span 7; grid-row: span 9; }

.studio-project-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(1.01);
  transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.studio-project:hover .studio-project-media {
  transform: scale(1.045);
}
.studio-project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,8,11,.03) 0%, rgba(7,8,11,.14) 42%, rgba(7,8,11,.86) 100%);
}
.studio-project .media-card-pt {
  background-image: url('assets/media/puppyteeth-hero.webp');
  background-position: center 28%;
}
.studio-project .media-card-iz {
  background-image: url('assets/media/izakt-hero.webp');
}
.studio-project .media-card-fl {
  background-image: url('assets/media/forgotten-hero.webp');
}
.studio-project .media-card-fd {
  background-image: url('assets/media/foxboy-den-hero.webp');
}

.studio-project-overlay {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  padding: 26px 28px 28px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 8px 22px;
}
.studio-project-type {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.home-page .studio-project h3 {
  grid-column: 1;
  margin: 0;
  color: #fff;
  font-size: clamp(2.45rem, 4.7vw, 5rem);
  line-height: .88;
  letter-spacing: -.072em;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.home-page .studio-project p {
  grid-column: 1;
  margin: 4px 0 0;
  max-width: 520px;
  color: rgba(255,255,255,.78);
  font-size: .95rem;
  line-height: 1.5;
}
.studio-project-link {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.92);
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
}
.studio-project-link b {
  font-size: 1rem;
  font-weight: 500;
  transition: transform .2s ease;
}
.studio-project:hover .studio-project-link b { transform: translate(3px,-3px); }

@media (max-width: 920px) {
  .studio-project-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-rows: auto;
  }
  .studio-pt,.studio-iz,.studio-fl,.studio-fd {
    grid-column: auto;
    grid-row: auto;
    min-height: 430px !important;
  }
  .studio-project-overlay { padding: 24px; }
}
@media (max-width: 680px) {
  .home-hero { padding-top: 66px; }
  .studio-project-grid { grid-template-columns: 1fr; }
  .studio-pt,.studio-iz,.studio-fl,.studio-fd { min-height: 390px !important; }
  .studio-project-overlay {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .studio-project-link {
    grid-column: 1;
    grid-row: auto;
    margin-top: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-project-media,
  .studio-project-link b { transition: none !important; transform: none !important; }
}

/* =========================================================
   Site-wide presentation consistency pass
   Project-type modules
   ========================================================= */
.project-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(10,11,14,.54);
}
.project-meta > div {
  min-height: 92px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.project-meta > div:first-child { border-left: 0; }
.project-meta span {
  color: var(--muted-2);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.project-meta strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.content-section {
  padding: 92px 0 24px;
}
.content-section.section-divider {
  margin-top: 58px;
  padding-top: 72px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.content-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .65fr);
  align-items: end;
  gap: 38px;
  margin-bottom: 28px;
}
.content-heading h2 {
  margin: 12px 0 0;
  font-size: clamp(2.8rem, 5.6vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.075em;
}
.content-heading > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

/* Release/catalogue module shared by music projects */
.release-grid {
  display: grid;
  gap: 18px;
}
.release-grid-three { grid-template-columns: 1.25fr .875fr .875fr; }
.release-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.release-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background: rgba(14,15,20,.82);
  box-shadow: 0 20px 54px rgba(0,0,0,.18);
}
.release-art {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #171820;
}
.release-card-featured .release-art { min-height: 330px; }
.release-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(7,8,11,.66) 100%);
  pointer-events: none;
}
.release-art > span {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  font-weight: 1000;
  line-height: .79;
  letter-spacing: -.085em;
  text-shadow: 0 4px 26px rgba(0,0,0,.34);
}
.release-info { padding: 20px 22px 22px; }
.release-type {
  display: block;
  margin-bottom: 10px;
  color: var(--muted-2);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.release-info h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.release-info p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
}
.release-art-pt-main {
  background-image:
    linear-gradient(145deg, rgba(255,61,161,.22), rgba(62,115,255,.22)),
    url('assets/media/puppyteeth-fullbody.webp');
  background-size: auto, contain;
  background-position: center, 74% 18%;
  background-repeat: no-repeat;
  background-color: #171118;
}
.release-art-pt-kaleido {
  background:
    radial-gradient(circle at 75% 20%, rgba(87,188,255,.70), transparent 26%),
    radial-gradient(circle at 22% 72%, rgba(255,83,181,.52), transparent 28%),
    linear-gradient(145deg, #251538, #11233f 58%, #10141d);
}
.release-art-pt-chew {
  background:
    radial-gradient(circle at 70% 28%, rgba(255,82,170,.56), transparent 28%),
    linear-gradient(145deg, #29101f, #15151d 56%, #122340);
}
.release-art-decay {
  background-image: url('assets/media/izakt-my-decay.webp');
  background-size: cover;
  background-position: center;
}
.release-art-blueish {
  background:
    radial-gradient(circle at 28% 30%, rgba(90,131,255,.58), transparent 28%),
    radial-gradient(circle at 74% 68%, rgba(255,112,188,.50), transparent 30%),
    linear-gradient(145deg, #131927, #231c36 58%, #12141b);
}

/* Shared animation + entertainment module */
.entertainment-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}
.entertainment-card {
  min-height: 235px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), var(--project-panel);
}
.entertainment-card-wide {
  grid-row: span 2;
  min-height: 488px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.entertainment-visual {
  flex: 1;
  min-height: 285px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.entertainment-copy { padding: 0; }
.entertainment-card-wide .entertainment-copy { padding: 22px 24px 24px; }
.entertainment-copy > span,
.game-card > span,
.resident-card > div:last-child > span,
.game-showcase-copy > span,
.studio-capability-grid span {
  display: block;
  margin-bottom: 16px;
  color: var(--muted-2);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.entertainment-copy h3,
.game-card h3,
.game-showcase-copy h3,
.resident-card h3 {
  margin: 0;
  font-size: clamp(1.55rem, 2.8vw, 2.6rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.entertainment-copy p,
.game-card p,
.game-showcase-copy p,
.resident-card p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.entertainment-pt-video {
  background-image:
    linear-gradient(180deg, rgba(8,8,11,.04), rgba(8,8,11,.28)),
    url('assets/media/puppyteeth-hero.webp');
  background-position: center, center 30%;
}
.entertainment-fd-animation {
  background-image:
    linear-gradient(180deg, rgba(8,8,11,.02), rgba(8,8,11,.20)),
    url('assets/media/foxboy-den-hero.webp');
  background-position: center;
}

/* izakt visual module */
.visual-feature {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
}
.visual-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,11,.06), rgba(8,8,11,.60));
}
.izakt-visual-feature { background-image: url('assets/media/izakt-hero.webp'); }
.visual-feature-label {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 22px;
  color: rgba(255,255,255,.76);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .15em;
}

/* Game-specific modules */
.game-showcase {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  min-height: 510px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 26px;
  background: var(--project-panel);
}
.game-showcase-visual {
  min-height: 500px;
  background-image:
    linear-gradient(180deg, rgba(8,10,8,.02), rgba(8,10,8,.28)),
    url('assets/media/forgotten-battle.webp');
  background-size: cover;
  background-position: center;
}
.game-showcase-copy {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-left: 1px solid rgba(255,255,255,.08);
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.game-card {
  min-height: 250px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), var(--project-panel);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.development-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(10,11,14,.50);
}
.development-strip span {
  min-height: 82px;
  display: grid;
  place-items: center;
  border-left: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .14em;
}
.development-strip span:first-child { border-left: 0; }

/* Foxboy Den resident + studio modules */
.resident-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.resident-card {
  min-height: 480px;
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(240px,1.15fr);
  align-items: end;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(233,154,98,.10), rgba(255,255,255,.02)), var(--project-panel);
}
.resident-image {
  height: 100%;
  min-height: 480px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.resident-card > div:last-child { padding: 30px 28px; }
.resident-raccoon .resident-image { background-image: url('assets/media/foxboy-den-raccoon.webp'); }
.resident-rufus .resident-image { background-image: url('assets/media/foxboy-den-rufus.webp'); }
.studio-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(10,11,14,.48);
}
.studio-capability-grid article {
  min-height: 150px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-left: 1px solid rgba(255,255,255,.08);
}
.studio-capability-grid article:first-child { border-left: 0; }
.studio-capability-grid strong {
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -.025em;
}

/* Related projects: remove legacy empty numbering column */
.project-next a {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
}
.project-next a > strong { grid-column: 1; grid-row: 1; }
.project-next a > em { grid-column: 1; grid-row: 2; }
.project-next a > b { grid-column: 2; grid-row: 1 / 3; }

/* Keep project CTAs aligned across project types */
.project-exit { margin-top: 76px; }
.project-next-wrap { margin-top: 34px; }

@media (max-width: 980px) {
  .release-grid-three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .release-grid-three .release-card-featured { grid-column: 1 / -1; }
  .resident-showcase { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .project-meta,
  .content-heading,
  .game-showcase,
  .game-grid,
  .studio-capability-grid {
    grid-template-columns: 1fr;
  }
  .project-meta > div,
  .studio-capability-grid article {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .project-meta > div:first-child,
  .studio-capability-grid article:first-child { border-top: 0; }
  .game-showcase-copy { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .entertainment-grid { grid-template-columns: 1fr; }
  .entertainment-card-wide { grid-row: auto; min-height: 450px; }
  .development-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .development-strip span:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .development-strip span:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); }
}

@media (max-width: 620px) {
  .content-section { padding-top: 70px; }
  .content-section.section-divider { margin-top: 38px; padding-top: 56px; }
  .release-grid-three,
  .release-grid-two { grid-template-columns: 1fr; }
  .release-grid-three .release-card-featured { grid-column: auto; }
  .release-card-featured .release-art,
  .release-art { min-height: 250px; }
  .resident-card { grid-template-columns: 1fr; min-height: 0; }
  .resident-image { min-height: 360px; }
  .development-strip { grid-template-columns: 1fr; }
  .development-strip span { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .development-strip span:first-child { border-top: 0; }
  .game-showcase-visual { min-height: 360px; }
  .visual-feature { min-height: 360px; }
}