/* Projects index — intentionally extends the main JR Real Buildwell design system. */
.projects-header .brand img { width: 100%; height: auto; }

.projects-hero {
  position: relative;
  min-height: min(690px, calc(100svh - var(--header-h)));
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--deep);
  color: #fff;
}
.projects-hero-media,
.projects-hero-overlay { position: absolute; inset: 0; }
.projects-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.projects-hero-overlay {
  background:
    linear-gradient(90deg, rgba(5,31,36,.86) 0%, rgba(5,31,36,.69) 45%, rgba(5,31,36,.22) 75%, rgba(5,31,36,.12) 100%),
    linear-gradient(0deg, rgba(4,24,28,.47) 0%, rgba(4,24,28,.04) 55%);
}
.projects-hero-content { position: relative; z-index: 1; padding-top: 92px; padding-bottom: 78px; }
.projects-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 32px; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.projects-breadcrumb a:hover { color: #fff; }
.projects-breadcrumb span { opacity: .5; }
.projects-hero h1 { max-width: 760px; color: #fff; font-size: clamp(50px, 5.3vw, 76px); }
.projects-hero-intro { max-width: 690px; margin-top: 24px; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.8; }
.projects-hero-btn { margin-top: 32px; border: 1px solid rgba(255,255,255,.64); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.projects-hero-btn:hover { background: #fff; color: var(--forest); border-color: #fff; }

.projects-intro { padding-block: 82px; background: #fff; }
.projects-intro-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(52px, 8vw, 120px); align-items: start; }
.projects-intro-grid h2 { max-width: 560px; }
.projects-intro-copy > p { max-width: 650px; font-size: 14px; line-height: 1.8; }
.portfolio-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; border-top: 1px solid var(--border); }
.portfolio-stats div { min-height: 118px; padding: 22px 22px 0; border-left: 1px solid var(--border); }
.portfolio-stats div:first-child { padding-left: 0; border-left: 0; }
.portfolio-stats strong { display: block; color: var(--forest); font-family: var(--font-display); font-size: 31px; font-weight: 500; line-height: 1; }
.portfolio-stats span { display: block; max-width: 165px; margin-top: 10px; color: #6d7775; font-size: 10.5px; line-height: 1.55; }

.projects-listing { background: #f7f6f2; border-top: 1px solid #ebeae5; }
.projects-page-heading { margin-bottom: 38px; }
.projects-page-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.listing-card { min-width: 0; display: flex; flex-direction: column; background: rgba(255,255,255,.74); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background var(--transition), box-shadow var(--transition), transform var(--transition); }
.listing-card:hover { position: relative; z-index: 2; background: #fff; box-shadow: 0 18px 44px rgba(22,47,41,.08); transform: translateY(-3px); }
.listing-image { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #e9e9e4; }
.listing-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,37,38,.17)); pointer-events: none; }
.listing-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease), filter 700ms var(--ease); }
.listing-card:hover .listing-image img { transform: scale(1.035); }
.listing-badge { position: absolute; z-index: 1; left: 18px; top: 18px; min-height: 27px; display: inline-flex; align-items: center; padding: 0 10px; background: rgba(255,255,255,.92); color: var(--forest); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(8px); }
.listing-content { display: flex; flex: 1; flex-direction: column; padding: 27px 27px 28px; }
.listing-content .project-category { margin-bottom: 11px; }
.listing-content h3 { color: var(--deep); font-family: var(--font-display); font-size: 25px; font-weight: 500; line-height: 1.16; letter-spacing: -.02em; }
.listing-content > p:not(.project-category) { margin-top: 11px; font-size: 12px; line-height: 1.7; }
.listing-link { width: fit-content; margin-top: auto; padding-top: 22px; color: var(--forest); font-size: 11px; font-weight: 700; }
.listing-link span { display: inline-block; margin-left: 6px; transition: transform var(--transition); }
.listing-link:hover span { transform: translateX(4px); }

.projects-advisory { padding-block: 74px; background: var(--forest); color: #fff; }
.projects-advisory-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.78fr); gap: clamp(60px, 10vw, 150px); align-items: end; }
.projects-advisory h2 { max-width: 680px; color: #fff; }
.projects-advisory p { max-width: 570px; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.75; }
.projects-advisory-btn { margin-top: 24px; border: 1px solid rgba(255,255,255,.58); color: #fff; background: transparent; }
.projects-advisory-btn:hover { background: #fff; color: var(--forest); border-color: #fff; }
.projects-footer { border-top: 0; }
.projects-footer .brand img { width: 100%; height: auto; }
.projects-footer .footer-bottom nav a { color: #7e8785; font-size: 9.5px; transition: color var(--transition); }
.projects-footer .footer-bottom nav a:hover { color: var(--forest); }

@media (max-width: 1180px) {
  .projects-page-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1023px) {
  .projects-hero { min-height: 610px; }
  .projects-hero-overlay { background: linear-gradient(90deg, rgba(5,31,36,.82), rgba(5,31,36,.42)); }
  .projects-intro-grid, .projects-advisory-inner { grid-template-columns: 1fr; gap: 38px; }
  .projects-advisory-inner { gap: 26px; }
}

@media (max-width: 767px) {
  .projects-hero { min-height: 560px; }
  .projects-hero-media img { object-position: 60% center; }
  .projects-hero-overlay { background: linear-gradient(180deg, rgba(5,31,36,.31) 0%, rgba(5,31,36,.83) 68%, rgba(5,31,36,.94) 100%); }
  .projects-hero-content { padding-top: 70px; padding-bottom: 48px; }
  .projects-breadcrumb { margin-bottom: 24px; }
  .projects-hero h1 { font-size: clamp(42px, 13vw, 58px); }
  .projects-hero-intro { margin-top: 18px; font-size: 12.5px; line-height: 1.72; }
  .projects-hero-btn { min-height: 45px; margin-top: 26px; }
  .projects-intro { padding-block: 58px; }
  .projects-intro-grid { gap: 25px; }
  .portfolio-stats { grid-template-columns: 1fr; margin-top: 27px; }
  .portfolio-stats div { min-height: 0; padding: 17px 0; border-left: 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
  .portfolio-stats strong { font-size: 27px; }
  .portfolio-stats span { max-width: none; margin: 0; }
  .projects-listing { padding-block: 64px; }
  .projects-page-grid { grid-template-columns: 1fr; }
  .listing-image { aspect-ratio: 16/9.5; }
  .listing-content { padding: 23px 22px 25px; }
  .listing-content h3 { font-size: 23px; }
  .projects-advisory { padding-block: 58px; }
  .projects-advisory-inner { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .projects-hero-content { padding-bottom: 42px; }
  .projects-hero h1 { font-size: 43px; }
  .projects-page-heading .editorial-note { display: none; }
}