.projects-section { background: #fffdf8; }
.projects-intro { display: grid; grid-template-columns: 1fr .72fr; gap: 40px; align-items: end; }
.projects-intro .kicker, .projects-intro h2 { grid-column: 1; }
.projects-intro > p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 8px; color: #657083; font-size: 1rem; }
.reference-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 54px; }
.reference-card { position: relative; display: flex; flex-direction: column; min-height: 390px; padding: 29px; overflow: hidden; border: 1px solid rgba(14,23,39,.13); border-radius: 22px; background: #f5f1ea; transition: transform .2s ease, box-shadow .2s ease; }
.reference-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(14,23,39,.1); }
.reference-card { grid-column: span 6; }
.reference-card--dark { background: #17263b; color: #fff; }
.reference-card--sand { background: #f5f1ea; }
.reference-card--coral { background: #ff7356; }
.reference-card--mint { background: #dff3e9; }
.reference-card-top { display: flex; align-items: center; gap: 11px; color: #667487; font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.reference-card--dark .reference-card-top { color: #d9ff6f; }
.reference-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: #d9ff6f; color: #17263b; }
.reference-card--sand .reference-icon { background: #17263b; color: #fff; }
.reference-card--coral .reference-icon { background: #fff3e8; color: #17263b; }
.reference-card--mint .reference-icon { background: #fffdf8; color: #17263b; }
.reference-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reference-card h3 { margin: 50px 0 11px; font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: .98; letter-spacing: -.07em; }
.reference-lead { max-width: 510px; margin: 0; color: #566375; font-size: .95rem; }
.reference-card--dark .reference-lead { color: #d0d8e3; }
.reference-card ul { display: grid; gap: 6px; margin: 23px 0 0; padding: 15px 0 0; border-top: 1px solid rgba(14,23,39,.16); list-style: none; color: #485669; font-size: .78rem; }
.reference-card--dark ul { border-top-color: rgba(255,255,255,.18); color: #d0d8e3; }
.reference-card li::before { content: "•"; color: #df5c43; margin-right: 8px; }
.reference-card--dark li::before { color: #d9ff6f; }
.reference-card a, .reference-status { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: auto; padding-top: 24px; font-size: .8rem; font-weight: 850; text-decoration: underline; text-underline-offset: 4px; }
.reference-card--dark a { color: #d9ff6f; }
.reference-card--coral a { color: #17263b; }
.reference-status { color: #596475; text-decoration: none; }
.client-projects { display: grid; gap: 0; margin-top: 22px; }
.client-projects div { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(14,23,39,.13); }
.client-projects b { font-size: .85rem; }
.client-projects span { color: #657083; font-size: .71rem; font-weight: 750; text-align: right; }
@media (max-width: 800px) { .projects-intro, .reference-grid { grid-template-columns: 1fr; gap: 24px; } .projects-intro .kicker, .projects-intro h2, .projects-intro > p:last-child { grid-column: auto; grid-row: auto; } .reference-grid { margin-top: 34px; } .reference-card, .reference-card:nth-child(n) { grid-column: auto; min-height: auto; } .reference-card h3 { margin-top: 38px; } .client-projects div { grid-template-columns: 1fr; gap: 3px; } .client-projects span { text-align: left; } }