:root {
  --projects-ink: #07090b;
  --projects-paper: #f7f6f2;
  --projects-accent: #d6ff00;
  --projects-muted: #686963;
}

html { scroll-behavior: smooth; }

.projects-page { background: var(--projects-paper); color: var(--projects-ink); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }
.skip-link { background: var(--projects-ink); color: #fff; left: 1rem; padding: .75rem 1rem; position: fixed; top: -5rem; z-index: 10; }
.skip-link:focus { top: 1rem; }
.projects-header { align-items: center; display: flex; justify-content: space-between; max-width: 1600px; margin: 0 auto; padding: 1.5rem clamp(1.25rem, 4vw, 4rem); }
.projects-logo img { display: block; max-height: 44px; max-width: 190px; object-fit: contain; }
.projects-home-link { align-items: center; border: 1px solid #c9cbc3; border-radius: 999px; color: var(--projects-ink); display: inline-flex; gap: .5rem; padding: .7rem 1rem; text-decoration: none; transition: background .25s ease, color .25s ease; }
.projects-home-link:hover, .projects-home-link:focus { background: var(--projects-ink); color: #fff; }
.projects-intro { max-width: 1600px; min-height: 62vh; padding: clamp(5rem, 12vw, 11rem) clamp(1.25rem, 7vw, 8rem) 5rem; position: relative; }
.projects-intro::after { background: var(--projects-accent); border-radius: 50%; bottom: 6%; content: ""; height: min(26vw, 300px); opacity: .9; position: absolute; right: clamp(1rem, 8vw, 8rem); width: min(26vw, 300px); z-index: 0; }
.projects-eyebrow { color: var(--projects-muted); font-size: .75rem; font-weight: 700; letter-spacing: .14em; margin: 0 0 1.25rem; text-transform: uppercase; }
.projects-intro h1 { font-size: clamp(3.4rem, 9vw, 9.5rem); font-weight: 700; letter-spacing: -.075em; line-height: .83; margin: 0; max-width: 1050px; position: relative; z-index: 1; }
.projects-intro h1 span { -webkit-text-stroke: 1.5px var(--projects-ink); color: transparent; }
.projects-summary { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.55; margin: 2.5rem 0 1.5rem; max-width: 480px; position: relative; z-index: 1; }
.projects-scroll-link { align-items: center; color: var(--projects-ink); display: inline-flex; font-weight: 700; gap: .6rem; position: relative; text-decoration: none; z-index: 1; }
.projects-scroll-link i { background: var(--projects-ink); border-radius: 50%; color: #fff; padding: .45rem; }
.projects-grid-section { background: var(--projects-ink); color: #fff; padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 6vw, 7rem); scroll-margin-top: 1rem; }
.projects-section-heading { align-items: end; display: grid; grid-template-columns: 1fr auto; margin: 0 auto clamp(2.5rem, 5vw, 5rem); max-width: 1500px; }
.projects-section-heading .projects-eyebrow { color: #a5a69f; grid-column: 1 / -1; }
.projects-section-heading h2 { font-size: clamp(2.6rem, 5vw, 5.75rem); letter-spacing: -.06em; line-height: .9; margin: 0; }
.selected-project-message { color: #d2d3cc; margin: 0; max-width: 230px; }
.projects-grid { display: grid; gap: clamp(1rem, 2vw, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 auto; max-width: 1500px; }
.project-card { color: inherit; display: block; opacity: 0; text-decoration: none; transform: translateY(38px); transition: opacity .6s ease, transform .6s ease; }
.page-ready .project-card { opacity: 1; transform: translateY(0); }
.page-ready .project-card:nth-child(2) { transition-delay: .1s; }
.page-ready .project-card:nth-child(3) { transition-delay: .2s; }
.page-ready .project-card:nth-child(4) { transition-delay: .3s; }
.project-card article { background: #16191d; border: 1px solid #2e3338; height: 100%; padding: clamp(.75rem, 1.2vw, 1.25rem); transition: background .25s ease, transform .25s ease; }
.project-card:hover article, .project-card:focus article { background: #252a30; transform: translateY(-9px); }
.project-card:focus { outline: 3px solid var(--projects-accent); outline-offset: 4px; }
.project-card-image { aspect-ratio: 1.35 / 1; overflow: hidden; }
.project-card-image img { height: 100%; object-fit: cover; transition: transform .5s ease; width: 100%; }
.project-card-image video { background: #000; height: 100%; object-fit: cover; width: 100%; }
.project-card:hover img, .project-card:focus img { transform: scale(1.055); }
.project-card-video { cursor: pointer; }
.project-card-content { padding: 1.15rem .35rem .3rem; }
.project-card-content p { color: #aeb0aa; font-size: .72rem; font-weight: 700; letter-spacing: .09em; margin: 0 0 .9rem; text-transform: uppercase; }
.project-card-content div { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.project-card h3 { font-size: clamp(1.45rem, 2.5vw, 2.6rem); letter-spacing: -.055em; line-height: 1; margin: 0; }
.project-card-arrow { align-items: center; background: var(--projects-accent); border-radius: 50%; color: var(--projects-ink); display: inline-flex; flex: 0 0 auto; font-size: 1.25rem; height: 2.8rem; justify-content: center; transition: transform .25s ease; width: 2.8rem; }
.project-card:hover .project-card-arrow, .project-card:focus .project-card-arrow { transform: rotate(45deg); }
.project-card.is-selected article { background: #2c3320; border-color: var(--projects-accent); box-shadow: 0 0 0 5px rgba(214, 255, 0, .22); transform: translateY(-9px); }
.project-card.is-selected .project-card-arrow { transform: rotate(45deg); }
.projects-cta { align-items: center; background: var(--projects-accent); display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 8vw, 8rem); }
.projects-cta p { font-size: clamp(1.8rem, 4vw, 4rem); font-weight: 700; letter-spacing: -.06em; margin: 0; }
.projects-cta a { color: var(--projects-ink); font-weight: 700; text-decoration: none; }
.projects-cta a i { display: inline-block; margin-left: .4rem; transition: transform .2s ease; }
.projects-cta a:hover i, .projects-cta a:focus i { transform: translate(3px, -3px); }
@media (max-width: 650px) { .projects-header { padding-top: 1rem; } .projects-logo img { max-width: 125px; } .projects-home-link { font-size: .82rem; } .projects-intro { min-height: 70vh; } .projects-intro::after { bottom: 8%; height: 145px; width: 145px; } .projects-section-heading { display: block; } .selected-project-message { margin-top: 1.25rem; } .projects-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } .project-card { opacity: 1; transform: none; } }