/* Listing + article extras on top of product-v3.css */

    .page-hero {
      padding: 28px 0 8px;
    }
    .page-hero .container { padding-top: 0; }
    .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.1rem, 4vw, 3.2rem);
      font-weight: 600;
      letter-spacing: -0.035em;
      line-height: 1.05;
      color: var(--navy);
      margin: 0 0 16px;
    }
    .page-hero-desc,
    .page-hero-lead,
    .page-hero .lede {
      font-size: 17px;
      line-height: 1.65;
      color: var(--muted);
      max-width: 40rem;
      font-weight: 400;
    }
    .page-hero .crumb,
    .page-hero .breadcrumb {
      padding: 0;
      margin: 0 0 18px;
    }

    .breadcrumb {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 1rem;
    }
    .breadcrumb a { color: var(--steel); text-decoration: none; }
    .breadcrumb a:hover { color: var(--cta); }

    .category-bar,
    .filter-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
    }
    .cat-chip,
    .filter-chip {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      padding: 0.45rem 0.85rem;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: var(--white);
      color: var(--navy);
      cursor: pointer;
    }
    .cat-chip:hover,
    .filter-chip:hover { border-color: var(--steel); color: var(--steel); }
    .cat-chip.active,
    .filter-chip.active {
      background: var(--navy);
      border-color: var(--navy);
      color: var(--white);
    }

    .news-section { padding: 36px 0 72px; }
    .news-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
      gap: 48px;
      align-items: start;
    }
    .featured {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      margin-bottom: 1.5rem;
      background: var(--white);
      transition: border-color 0.15s;
    }
    .featured:hover { border-color: var(--steel); }
    .featured-thumb {
      position: relative;
      min-height: 260px;
      background: var(--mist);
      overflow: hidden;
    }
    .featured-thumb img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
    }
    .featured-body {
      padding: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .featured-body h2 {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.4vw, 1.7rem);
      font-weight: 600;
      letter-spacing: -0.03em;
      color: var(--navy);
      line-height: 1.2;
      margin: 0 0 0.75rem;
    }
    .featured-body p {
      font-size: 0.95rem;
      color: var(--muted);
      line-height: 1.55;
      margin: 0;
    }

    .post-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.75rem;
      font-size: 0.8125rem;
      color: var(--muted);
      margin-bottom: 0.75rem;
    }
    .post-cat {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.6875rem;
      color: var(--steel);
    }
    .post-cat.eco { color: var(--teal); }
    .post-cat.project { color: var(--cta); }

    .post-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
    }
    .post-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      background: var(--white);
      display: flex;
      flex-direction: column;
      transition: border-color 0.15s;
    }
    .post-card:hover { border-color: var(--steel); }
    .post-card.hidden,
    .project-card.hidden { display: none !important; }
    .post-thumb {
      aspect-ratio: 16/9;
      background: var(--mist);
      overflow: hidden;
    }
    .post-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .post-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
    .post-card h3 {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--navy);
      line-height: 1.3;
      margin-bottom: 0.5rem;
    }
    .post-card .excerpt {
      font-size: 0.875rem;
      color: var(--muted);
      line-height: 1.55;
      margin: 0;
    }

    .sidebar { position: sticky; top: calc(var(--header-height) + 1rem); }
    .sidebar-block {
      margin-bottom: 2rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--line);
    }
    .sidebar-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .sidebar-block h3 {
      font-family: var(--font-display);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--navy);
      margin: 0 0 1rem;
    }
    .topic-list { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
    .topic-list a {
      color: var(--navy);
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 500;
    }
    .topic-list a:hover { color: var(--cta); }
    .cta-box {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 1.35rem 1.4rem;
    }
    .cta-box h3 {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--navy);
      margin: 0 0 0.5rem;
    }
    .cta-box p { font-size: 0.875rem; color: var(--muted); margin: 0 0 1rem; }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 28px;
    }
    .project-card {
      border-radius: 8px;
      overflow: hidden;
      background: var(--white);
      border: 1px solid var(--line);
      text-decoration: none;
      color: inherit;
      display: block;
      transition: border-color 0.15s;
    }
    .project-card:hover { border-color: var(--steel); }
    .project-thumb {
      aspect-ratio: 16/10;
      background: var(--mist);
      overflow: hidden;
    }
    .project-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .project-body { padding: 1.25rem; }
    .project-sector {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--steel);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 0.375rem;
    }
    .project-card h3 {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--navy);
      margin: 0 0 0.35rem;
      line-height: 1.3;
    }
    .project-excerpt,
    .project-location {
      font-size: 0.875rem;
      color: var(--muted);
      line-height: 1.5;
      margin: 0;
    }

    .article-wrap { padding: 28px 40px 72px; }
    .article { max-width: 760px; margin: 0 auto; }
    .article-header { margin-bottom: 2rem; }
    .article-header h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 600;
      letter-spacing: -0.035em;
      color: var(--navy);
      line-height: 1.08;
      margin: 0.75rem 0 1rem;
    }
    .article-lead {
      font-size: 1.125rem;
      color: var(--muted);
      line-height: 1.65;
    }
    .article-hero { margin: 2rem 0 1.75rem; border-radius: 8px; overflow: hidden; }
    .article-hero img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
    .article-body {
      font-size: 1.0625rem;
      line-height: 1.75;
      color: var(--ink);
    }
    .article-body p { margin-bottom: 1.25rem; }
    .article-body h2 {
      font-family: var(--font-display);
      font-size: 1.45rem;
      font-weight: 600;
      letter-spacing: -0.025em;
      color: var(--navy);
      margin: 2rem 0 0.75rem;
    }
    .article-body h3 {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--navy);
      margin: 1.5rem 0 0.5rem;
    }
    .article-body ul { margin: 0 0 1.25rem 1.25rem; }
    .article-body li { margin-bottom: 0.5rem; }
    .article-body a { color: var(--steel); }

    .model-cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1.25rem 0 1.75rem; }
    .model-card {
      display: grid;
      grid-template-columns: 5.5rem 1fr;
      gap: 0.85rem;
      align-items: center;
      padding: 0.85rem 1rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      text-decoration: none;
      color: inherit;
      background: var(--white);
    }
    .model-card:hover { border-color: var(--steel); }
    .model-card img {
      width: 5.5rem; height: 4rem; object-fit: cover; border-radius: 4px; background: var(--mist);
    }
    .model-card strong { display: block; color: var(--navy); font-size: 0.9375rem; margin-bottom: 0.2rem; }
    .model-card span { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }

    .pull-quote {
      margin: 1.75rem 0;
      padding: 1.25rem 1.35rem;
      background: var(--white);
      border-left: 3px solid var(--cta);
      font-size: 1.05rem;
      color: var(--navy);
      line-height: 1.55;
      font-weight: 500;
    }
    .pull-quote cite {
      display: block;
      margin-top: 0.65rem;
      font-size: 0.75rem;
      font-weight: 600;
      font-style: normal;
      color: var(--muted);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .facts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin: 1.5rem 0 2rem;
    }
    .fact {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 1rem 1.15rem;
    }
    .fact dt {
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.25rem;
    }
    .fact dd { font-weight: 600; color: var(--navy); font-size: 0.975rem; }

    .specs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 2rem; }
    .specs-wrap {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }
    .specs-wrap h3 {
      font-family: var(--font-display);
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--white);
      background: var(--navy);
      padding: 0.75rem 1rem;
    }
    .specs-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
    .specs-table th,
    .specs-table td {
      text-align: left;
      padding: 0.65rem 1rem;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
    }
    .specs-table th { width: 48%; font-weight: 600; color: var(--navy); background: var(--mist); }
    .specs-table tr:last-child th,
    .specs-table tr:last-child td { border-bottom: none; }
    .spec-note { font-size: 0.8125rem; color: var(--muted); margin-bottom: 1.5rem; }

    .gallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin: 2rem 0;
    }
    .gallery figure { margin: 0; border-radius: 8px; overflow: hidden; background: var(--mist); }
    .gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
    .gallery figcaption { font-size: 0.75rem; color: var(--muted); padding: 0.5rem 0.15rem 0; }
    .gallery .wide { grid-column: 1 / -1; }
    .gallery .wide img { aspect-ratio: 16/9; }

    .article-cta {
      margin-top: 2.5rem;
      padding: 1.75rem;
      background: var(--white);
      border-radius: 8px;
      border: 1px solid var(--line);
    }
    .article-cta h3 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 0.5rem;
    }
    .article-cta p { font-size: 0.9375rem; color: var(--muted); margin-bottom: 1.25rem; }
    .article-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

    @media (max-width: 1100px) {
      .news-layout { grid-template-columns: 1fr; }
      .sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
      .sidebar-block { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
      .featured { grid-template-columns: 1fr; }
      .featured-thumb { aspect-ratio: 16/10; min-height: 0; }
      .featured-thumb img { position: static; }
      .projects-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .post-grid, .sidebar, .facts, .gallery, .specs-split, .projects-grid { grid-template-columns: 1fr; }
      .article-wrap { padding: 22px 20px 56px; }
      .featured-body { padding: 1.5rem; }
      .model-card { grid-template-columns: 4.5rem 1fr; }
    }