/* Page-specific: projects uses bespoke BEM nav (.nav__*) and a filterable card grid. */
    :root { --pad-x: 24px; }
    @media (min-width: 768px)  { :root { --pad-x: 48px; } }
    @media (min-width: 1100px) { :root { --pad-x: 80px; } }
    .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-x); }
    body { line-height: 1.6; }

    /* Page hero */
    .hero { padding: 160px var(--pad-x) 64px; border-bottom: 1px solid var(--mid); }
    .hero__label { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); margin-bottom: 20px; }
    .hero__headline { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(36px, 6vw, 72px); line-height: 1.05; color: var(--ink); max-width: 840px; margin-bottom: 20px; }
    .hero__headline em { font-style: normal; color: var(--accent); }
    .hero__sub { font-size: 17px; color: var(--stone); max-width: 560px; font-weight: 300; }

    /* Filters */
    .filters { padding: 32px var(--pad-x); border-bottom: 1px solid var(--mid); display: flex; flex-direction: column; gap: 20px; }
    @media (min-width: 768px) { .filters { flex-direction: row; gap: 48px; align-items: center; } }
    .filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .filter-group__label { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); margin-right: 4px; }
    .pill { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .04em; padding: 6px 16px; cursor: pointer; border: 1px solid var(--mid); background: transparent; color: var(--stone); transition: all .15s; white-space: nowrap; }
    .pill:hover { border-color: var(--ink); color: var(--ink); }
    .pill.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

    /* Projects grid */
    .projects-section { padding: 64px var(--pad-x); }
    #projects-grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
    @media (min-width: 600px) { #projects-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1100px) { #projects-grid { grid-template-columns: repeat(3, 1fr); } }
    .project-card { display: block; text-decoration: none; color: var(--ink); background: var(--bg); overflow: hidden; transition: background .2s, transform .22s ease, box-shadow .22s ease; }
    .project-card:hover { background: var(--mid); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(12,12,11,.08); }
    .project-card--featured { grid-column: 1 / -1; }
    @media (min-width: 1100px) { .project-card--featured { grid-column: span 2; } }
    .project-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 4/3; }
    .project-card--featured .project-card__img-wrap { aspect-ratio: 16/7; }
    .project-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
    .project-card:hover .project-card__img { transform: scale(1.03); }
    .project-card__category { position: absolute; top: 16px; left: 16px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: var(--white); color: var(--ink); padding: 5px 10px; }
    .project-card__info { padding: 20px 24px 24px; }
    .project-card__title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
    .project-card--featured .project-card__title { font-size: 22px; }
    .project-card__meta { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--stone); font-weight: 400; }

    /* No-results variant for grid pages (must span full grid width) */
    .no-results { grid-column: 1 / -1; text-align: center; padding: 80px 0; color: var(--stone); font-size: 16px; }

    /* CTA strip */
    .cta-strip { background: var(--accent); padding: 80px var(--pad-x); display: flex; flex-direction: column; gap: 24px; }
    @media (min-width: 768px) { .cta-strip { flex-direction: row; align-items: center; justify-content: space-between; } }
    .cta-strip__headline { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(24px, 4vw, 40px); color: var(--white); line-height: 1.1; }
    .cta-strip__link { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--white); border: 2px solid var(--white); padding: 16px 36px; white-space: nowrap; transition: background .15s, color .15s; }
    .cta-strip__link:hover { background: var(--white); color: var(--accent); }

    /* Portfolio gallery shares the Insights palette and type rhythm. */
    body { background:#121212; }
    .hero { padding-top:128px; padding-bottom:40px; border-color:#383838; }
    .hero__headline { color:#fafaf8; letter-spacing:-.045em; font-size:clamp(36px,4.6vw,64px); max-width:1000px; }
    .hero__label,.hero__sub,.filter-group__label,.project-card__meta,.no-results { color:#bcbcbc; }
    .hero__sub { font-weight:400; max-width:660px; line-height:1.6; }
    .filters { padding-top:20px; padding-bottom:20px; border-color:#383838; flex-wrap:wrap; gap:20px 32px; }
    .pill { min-height:44px; font-size:14px; color:#ddd; border-color:#555; }
    .pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }
    .pill:hover { border-color:#fafaf8; color:#fff; }
    #projects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 28px; }
    .project-card { background:#1d1d1d; }
    .project-card:hover { background:#252525; box-shadow:none; transform:translateY(-3px); }
    .project-card__img-wrap { aspect-ratio:3/2; }
    .project-card__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .project-card__title { color:#fafaf8; font-size:22px; line-height:1.3; }
    .project-card__meta { font-size:14px; line-height:1.6; }
    .project-card__category { background:#121212; color:#eee; font-size:12px; letter-spacing:.06em; }
    .project-card__info { padding:24px; }
    @media(max-width:767px) {
      .hero { padding:100px 24px 24px; }
      .hero__label { margin-bottom:12px; }
      .hero__headline { font-size:36px; }
      .hero__sub { font-size:16px; }
      .filters { gap:12px; padding:16px 24px; }
      .filter-group { flex-wrap:nowrap; width:100%; overflow-x:auto; padding-bottom:4px; }
      .filter-group__label { min-width:56px; font-size:12px; }
      .pill { flex-shrink:0; }
      .projects-section { padding:24px; }
      #projects-grid { grid-template-columns:1fr; gap:28px; }
      .project-card__info { padding:20px; }
      .project-card__title { font-size:20px; }
      .cta-strip { padding:40px 24px; }
    }