.projects-page { overflow: hidden; }
.projects-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .45fr); align-items: end; gap: clamp(32px, 8vw, 110px); min-height: min(680px, calc(100vh - 74px)); padding: clamp(72px, 10vw, 132px) clamp(18px, 5vw, 72px); background: #211719 url("../images/about-background.jpg") center / cover no-repeat; color: #fff; }
.projects-hero::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(33,23,25,.28), rgba(33,23,25,.04)); content: ""; }
.projects-hero-copy { max-width: 900px; }
.projects-hero h1 { max-width: 880px; margin: 14px 0 22px; font-size: clamp(2.65rem, 7vw, 5.8rem); line-height: .98; letter-spacing: -.035em; }
.projects-hero-copy > p { max-width: 720px; margin: 0; color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.projects-hero-mark { display: grid; gap: 12px; padding: 26px; border-top: 4px solid var(--brand); background: rgba(31,21,24,.58); backdrop-filter: blur(12px); }
.projects-hero-mark strong { color: #e5a8ad; font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: .9; }
.projects-hero-mark span { max-width: 190px; color: rgba(255,255,255,.78); font-size: .92rem; }
.projects-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, .75fr); gap: clamp(34px, 8vw, 120px); align-items: start; max-width: 1500px; margin: 0 auto; }
.projects-intro h2, .projects-heading h2, .projects-cta h2 { margin: 9px 0 0; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.06; letter-spacing: -.025em; }
.projects-intro-copy { display: grid; gap: 18px; padding-top: 24px; }
.projects-intro-copy p { font-size: 1.02rem; }
.projects-list-section { background: #fff; }
.projects-heading { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1500px; }
.project-card { position: relative; min-height: 285px; padding: clamp(26px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.project-card::before { position: absolute; top: 0; left: 0; width: 72px; height: 4px; background: var(--brand); content: ""; }
.project-number { display: block; margin-bottom: 52px; color: var(--brand); font-size: .82rem; font-weight: 850; letter-spacing: .08em; }
.project-card h3 { max-width: 310px; margin: 0 0 13px; font-size: 1.35rem; line-height: 1.18; }
.project-card p { font-size: .94rem; }
.projects-disclaimer { max-width: 900px; margin: 24px 0 0 !important; padding-left: 14px; border-left: 3px solid var(--brand); font-size: .82rem; }
.projects-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--deep); }
.projects-gallery figure { position: relative; overflow: hidden; min-height: 280px; margin: 0; background: var(--deep); }
.projects-gallery img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; transition: transform .35s ease; }
.projects-gallery figure:hover img { transform: scale(1.025); }
.projects-gallery figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 13px 15px; border-left: 3px solid var(--brand); background: rgba(43,30,32,.88); color: #fff; font-size: .9rem; font-weight: 800; backdrop-filter: blur(8px); }
.projects-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; background: linear-gradient(115deg, #f8f3f3 0 62%, #eadbdd 100%); }
.projects-cta > div { max-width: 860px; }
.projects-cta p { max-width: 690px; margin-top: 18px; font-size: 1.02rem; }
.projects-cta > .btn { min-width: 260px; }
@media (prefers-reduced-motion: reduce) {
  .projects-gallery img { transition: none; }
}
@media (max-width: 1000px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects-gallery { grid-template-columns: 1fr; }
  .projects-gallery figure { min-height: 320px; }
}
@media (max-width: 900px) {
  .projects-hero, .projects-intro, .projects-cta { grid-template-columns: 1fr; }
  .projects-hero { min-height: auto; }
  .projects-hero-mark { grid-template-columns: auto 1fr; align-items: center; max-width: 390px; }
  .projects-cta { align-items: start; }
}
@media (max-width: 620px) {
  .projects-hero { background-position: 68% center; }
  .projects-grid { grid-template-columns: 1fr; }
  .project-card { min-height: auto; }
  .project-number { margin-bottom: 34px; }
  .projects-gallery figure, .projects-gallery img { min-height: 230px; }
  .projects-cta > .btn { width: 100%; min-width: 0; }
}