.projects-stage { font-family: var(--heading-font); position: relative; isolation: isolate; display: flex; flex: 1; flex-direction: column; min-height: 720px; padding: 0 clamp(22px, 5vw, 88px) 42px; }
.projects-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.projects-halo { position: absolute; left: 51%; top: 54%; width: min(850px, 78vw); aspect-ratio: 1; border-radius: 50%; background: var(--circle); opacity: .33; transform: translate(-50%, -50%); }
.projects-orbit { position: absolute; left: 50%; top: 53%; width: min(940px, 88vw); height: 580px; border: 1px dashed var(--sand); border-radius: 50%; opacity: .68; transform: translate(-50%, -50%) rotate(-15deg); }
.projects-spark { position: absolute; color: var(--sand); font-size: 45px; animation: turn 38s linear infinite; }
.projects-spark-one { top: 30%; left: 7%; }
.projects-spark-two { right: 8%; bottom: 17%; font-size: 31px; }
.projects-squiggle { position: absolute; right: 7%; top: 25%; width: 70px; stroke: var(--ink); stroke-width: 2; animation: float-doodle 7s ease-in-out infinite; }
.projects-heading { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; padding: 14px 20px 0; text-align: center; }
.projects-heading .hero-kicker { margin-bottom: 8px; font-size: 18px; }
.projects-heading h1 { font-size: clamp(60px, 7vw, 104px); }
.projects-intro { max-width: 600px; margin: 16px auto 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; }
.project-categories { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 58px); width: min(1180px, 100%); margin: 33px auto 0; }
.project-category { min-width: 0; }
.project-category-link { display: block; color: inherit; }
.project-canvas { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; aspect-ratio: 1.52; overflow: hidden; border: 1px solid rgb(17 73 0 / 17%); border-radius: 4px; background: rgb(251 245 204 / 68%); box-shadow: 0 18px 50px rgb(17 73 0 / 8%); }
.project-canvas::before { position: absolute; z-index: 3; inset: 14px; content: ''; border: 1px solid rgb(17 73 0 / 13%); pointer-events: none; }
.project-canvas-identity { background: linear-gradient(145deg, rgb(251 245 204 / 85%), rgb(230 220 158 / 42%)); }
.canvas-stamp { position: absolute; z-index: 2; top: 27px; right: 29px; font: 500 10px/1 'Barlow Condensed', sans-serif; letter-spacing: 1.8px; }
.canvas-note { position: absolute; z-index: 2; bottom: 28px; left: 29px; font: 500 10px/1 'Barlow Condensed', sans-serif; letter-spacing: 1.8px; }
.project-canvas-motion { background: linear-gradient(130deg, rgb(230 220 158 / 52%), rgb(251 245 204 / 88%)); }
.project-preview-logo-grid { position: absolute; z-index: 1; inset: 47px 28px 65px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: clamp(8px,1.2vw,14px); }
.project-preview-logo { display: grid; grid-column: span 2; min-width: 0; min-height: 0; place-items: center; overflow: hidden; padding: 10px; border: 1px solid rgb(17 73 0 / 12%); border-radius: 6px; background: rgb(255 254 248 / 88%); box-shadow: 0 7px 18px rgb(17 73 0 / 5%); }
.project-preview-logo:nth-child(4) { grid-column: 2 / span 2; }
.project-preview-logo:nth-child(5) { grid-column: 4 / span 2; }
.project-preview-logo img { display: block; width: 92%; height: 88%; object-fit: contain; object-position: center; mix-blend-mode: multiply; transition: transform .35s ease; }
.project-preview-logo.logo-preview-maxine img { width: 68%; height: 70%; }
.project-preview-logo.logo-preview-toka img { width: 62%; height: 72%; }
.project-motion-preview { position: absolute; z-index: 1; inset: 50px 45px 65px; display: flex; align-items: center; justify-content: center; gap: clamp(9px,1.5vw,18px); }
.project-motion-frame { position: relative; display: block; min-width: 0; overflow: hidden; border: 1px solid rgb(17 73 0 / 15%); border-radius: 6px; background: #fffef8; box-shadow: 0 10px 26px rgb(17 73 0 / 12%); }
.project-motion-your-name { width: 40%; aspect-ratio: 1; }
.project-motion-pareidolia { width: 52%; aspect-ratio: 16 / 9; }
.project-motion-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.project-motion-frame span { position: absolute; left: 9px; bottom: 9px; padding: 6px 8px; border-radius: 3px; background: rgb(255 254 248 / 90%); color: var(--ink); font: 500 9px/1 'Barlow Condensed',sans-serif; letter-spacing: 1.4px; }
.project-category-copy { padding: 16px 3px 0; }
.project-index { display: flex; align-items: center; gap: 12px; margin: 0 0 7px; font: 500 11px/1.2 'Barlow Condensed', sans-serif; letter-spacing: 1.8px; }
.project-index span:first-child { opacity: .65; }
.project-category h2 { margin: 0; font: 800 clamp(23px, 2.7vw, 34px)/1.08 var(--heading-font); letter-spacing: -.02em; }
.projects-contact { position: relative; display: inline-flex; align-items: center; gap: 12px; align-self: center; margin: 58px auto 0; padding: 0 0 5px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font: 800 16px/1.2 var(--heading-font); letter-spacing: .7px; text-transform: uppercase; }
.projects-contact > span:last-child { font: 18px/1 Arial, sans-serif; transition: transform .2s; }
.projects-contact:hover > span:last-child { transform: translate(3px, -3px); }
.projects-page .page-dialog h2 { white-space: normal; }
@media (max-width: 900px) {
  .projects-stage { min-height: 780px; padding-inline: 28px; }
  .project-categories { gap: 24px; }
  .project-canvas { aspect-ratio: 1.25; }
  .projects-heading h1 { font-size: 9vw; }
  .project-category h2 { font-size: clamp(22px, 3.2vw, 29px); }
}
@media (max-width: 700px) {
  .projects-stage { min-height: 0; padding: 8px 18px 36px; }
  .projects-heading { padding: 12px 2px 0; }
  .projects-heading .hero-kicker { font-size: 15px; }
  .projects-heading h1 { font-size: 12vw; line-height: 1.06; white-space: normal; }
  .projects-intro { margin-top: 12px; font-size: 15px; }
  .project-categories { grid-template-columns: 1fr; gap: 27px; width: min(500px, 100%); margin-top: 23px; }
  .project-canvas { aspect-ratio: 1.45; }
  .project-canvas::before { inset: 10px; }
  .canvas-stamp { top: 21px; right: 22px; }
  .canvas-note { bottom: 22px; left: 22px; }
  .project-preview-logo-grid { inset: 38px 18px 49px; gap: 7px; }
  .project-preview-logo { padding: 6px; }
  .project-motion-preview { inset: 40px 18px 49px; gap: 8px; }
  .project-motion-frame span { left: 5px; bottom: 5px; padding: 4px 5px; font-size: 8px; }
  .project-category-copy { padding-top: 12px; }
  .project-category h2 { font-size: clamp(24px, 7vw, 31px); }

  .projects-contact { margin-top: 44px; font-size: 14px; }
  .projects-halo { top: 53%; width: 520px; }
  .projects-orbit { top: 53%; width: 570px; height: 520px; }
  .projects-spark-one { top: 24%; left: 4%; font-size: 30px; }
  .projects-spark-two { right: 5%; bottom: 12%; }
  .projects-squiggle { top: 22%; right: 5%; width: 48px; }
}
.project-canvas { transition: transform .35s ease, box-shadow .35s ease; }
.project-category:hover .project-canvas { transform: translateY(-4px); box-shadow: 0 22px 55px rgb(17 73 0 / 13%); }
.project-category:hover .project-preview-logo img { transform: scale(1.04); }
.project-category:hover .project-motion-frame img { transform: scale(1.035); }