:root { --navy: #0a192f; --gold: #c5a059; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--navy); background: #fafaf8; font-family: 'Inter', sans-serif; }
.site-nav { display: flex; justify-content: space-between; padding: 40px 8%; background: white; }
.brand { display: block; }
.brand img { display: block; }
h1, h2 { font-family: 'Playfair Display', serif; font-weight: 400; }
.projects-header { padding: 76px 8% 80px; background: var(--navy); color: white; }
.eyebrow { margin: 0 0 22px; font-size: .7rem; text-transform: uppercase; letter-spacing: 3px; color: #e0c58d; }
h1 { margin: 0 0 22px; font-size: clamp(2.6rem, 5vw, 4.5rem); }
.projects-header > p:last-child { max-width: 670px; margin: 0; font-size: 1.15rem; line-height: 1.8; color: #dbe0e8; }
.projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 64px 8% 88px; }
.project-card { position: relative; min-height: 500px; display: flex; align-items: end; overflow: hidden; color: white; text-decoration: none; background: var(--navy); }
.project-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.project-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,25,47,.04) 10%, rgba(10,25,47,.82) 60%, rgba(10,25,47,.97)); }
.card-content { position: relative; z-index: 1; padding: 32px 28px; }
.card-content h2 { margin: 0 0 16px; font-size: 2rem; line-height: 1.2; }
.card-content p { margin: 0 0 28px; line-height: 1.7; font-size: .92rem; color: #eef0f4; }
.card-action { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid #ffffff55; font-size: .7rem; text-transform: uppercase; letter-spacing: 2px; }
.card-action span { font-size: 1.2rem; line-height: .8; }
.project-card:hover > img, .project-card:focus-visible > img { transform: scale(1.04); }
footer { padding: 48px 8%; text-align: center; background: var(--navy); color: white; font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; }
@media (max-width: 900px) {
  .site-nav { padding: 20px; }
  .site-nav > div:first-child { flex-direction: column; gap: 10px; text-align: center; }
  .site-nav > div:first-child > div { margin-left: 0 !important; font-size: .6rem !important; }
  .projects-header { padding: 52px 8%; }
  .projects-grid { grid-template-columns: 1fr; padding: 32px 8% 48px; }
  .project-card { min-height: 390px; }
}
@media (prefers-reduced-motion: reduce) { .project-card > img { transition: none; } }