/* ============================================================
   Secondary pages — projects archive, project detail,
   services, styles library, about
   ============================================================ */

.page-hero {
  padding: 190px var(--gutter) 70px; background: var(--stone);
  border-bottom: 1px solid var(--line-on-light);
}
.page-hero .display-2 { margin-top: 20px; max-width: 18ch; }
.page-hero .lede { margin-top: 24px; }
.page-hero-meta { display: flex; gap: 40px; margin-top: 46px; flex-wrap: wrap; }
.page-hero-meta div { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-on-light-soft); letter-spacing: 0.06em; }
.page-hero-meta b { display: block; color: var(--text-on-light); font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 4px; }

/* ---- Projects archive ---- */
.filters-bar {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 40px var(--gutter);
  border-bottom: 1px solid var(--line-on-light); position: sticky; top: 0; background: var(--stone); z-index: 40;
}
.filter-pill {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 18px; border: 1px solid var(--line-on-light); background: transparent; transition: all var(--dur-fast) var(--ease-soft);
}
.filter-pill.active, .filter-pill:hover { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }

.archive-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line-on-light); margin-top: 2px;
}
.archive-card { background: var(--stone); display: flex; flex-direction: column; transition: opacity .3s, transform .3s; }
.archive-card.hidden { display: none; }
.archive-card-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--ink); }
.archive-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-arch); }
.archive-card:hover .archive-card-media img { transform: scale(1.06); }
.archive-card-body { padding: 26px 24px; }
.archive-card-body .pc-loc { font-family: var(--font-mono); font-size: 0.68rem; color: var(--brass); text-transform: uppercase; letter-spacing: 0.06em; }
.archive-card-body h3 { margin-top: 8px; font-size: 1.3rem; }
.archive-card-body .pc-sub { margin-top: 8px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-on-light-soft); }
@media (max-width: 980px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .archive-grid { grid-template-columns: 1fr; } .filters-bar { top: 0; overflow-x: auto; flex-wrap: nowrap; } }

/* ---- Project detail ---- */
.pd-hero { position: relative; height: 82vh; min-height: 480px; overflow: hidden; }
.pd-hero img { width: 100%; height: 100%; object-fit: cover; }
.pd-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,15,0.5), rgba(20,18,15,0.1) 40%, rgba(20,18,15,0.75)); }
.pd-hero-content { position: absolute; left: 0; right: 0; bottom: 46px; padding: 0 var(--gutter); color: var(--text-on-dark); }
.pd-hero-content .display-2 { max-width: 22ch; }
.pd-hero-meta { display: flex; gap: 30px; margin-top: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-on-dark-soft); text-transform: uppercase; }

.pd-subnav {
  position: sticky; top: 0; z-index: 60; background: var(--stone); border-bottom: 1px solid var(--line-on-light);
  display: flex; gap: 30px; padding: 20px var(--gutter); overflow-x: auto;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-light-soft);
}
.pd-subnav a:hover, .pd-subnav a.active { color: var(--brass); }

.pd-block { padding: 100px 0; border-bottom: 1px solid var(--line-on-light); }
.pd-block-grid { display: grid; grid-template-columns: 0.6fr 1fr; gap: 8vw; }
.pd-block-grid .eyebrow { margin-bottom: 22px; }
.pd-block-grid p { color: var(--text-on-light-soft); max-width: 56ch; font-size: 1.05rem; }
.pd-media { margin-top: 60px; overflow: hidden; }
.pd-media img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transform: scale(1.1); transition: transform 1s var(--ease-arch); }
.pd-media.in-view img { transform: scale(1); }
.pd-palette { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.pd-palette span { font-family: var(--font-mono); font-size: 0.72rem; padding: 10px 16px; border: 1px solid var(--line-on-light); }
.pd-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.pd-room-media { aspect-ratio: 3/4; overflow: hidden; }
.pd-room-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-room h4 { margin-top: 14px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 860px) {
  .pd-block-grid { grid-template-columns: 1fr; }
  .pd-rooms { grid-template-columns: 1fr; }
}
.pd-cta { padding: 130px 0; text-align: center; background: var(--ink); color: var(--text-on-dark); }
.pd-cta .display-2 { max-width: 20ch; margin: 24px auto 0; }
.pd-cta .btn-row { margin-top: 40px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ---- Services page ---- */
.services-detail-grid { display: flex; flex-direction: column; }
.svc-block { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-on-light); }
.svc-block:nth-child(even) .svc-media { order: 2; }
.svc-media { position: relative; aspect-ratio: 5/4; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-text { padding: 70px var(--gutter); }
.svc-text .eyebrow { margin-bottom: 16px; }
.svc-text h2 { font-size: var(--step-3); }
.svc-text p.lede { margin-top: 18px; }
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.svc-cols h5 { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass); margin-bottom: 14px; }
.svc-cols ul { display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; color: var(--text-on-light-soft); }
.svc-cols li::before { content: "— "; color: var(--brass); }
.svc-text .btn { margin-top: 40px; }
@media (max-width: 900px) {
  .svc-block, .svc-block:nth-child(even) .svc-media { grid-template-columns: 1fr; order: initial; }
  .svc-cols { grid-template-columns: 1fr; }
}

/* ---- Styles library page ---- */
.styles-library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line-on-light); margin-top: 2px; }
.style-lib-card { background: var(--stone); }
.style-lib-media { aspect-ratio: 4/5; overflow: hidden; }
.style-lib-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-arch); }
.style-lib-card:hover .style-lib-media img { transform: scale(1.06); }
.style-lib-body { padding: 28px 26px; }
.style-lib-body h3 { font-size: 1.3rem; }
.style-lib-body p { margin-top: 10px; color: var(--text-on-light-soft); font-size: 0.9rem; }
.style-lib-swatches { display: flex; gap: 8px; margin-top: 18px; }
.style-lib-swatches span { width: 24px; height: 24px; border: 1px solid var(--line-on-light); }
.style-lib-body .sl-materials { margin-top: 16px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--brass); letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 980px) { .styles-library-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .styles-library-grid { grid-template-columns: 1fr; } }

/* ---- About page ---- */
.about-intro { padding: 190px var(--gutter) 100px; background: var(--stone); }
.about-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; }
.about-intro .display-1 { max-width: 14ch; }
.about-intro-right p { color: var(--text-on-light-soft); font-size: 1.05rem; }
@media (max-width: 860px) { .about-intro-grid { grid-template-columns: 1fr; gap: 30px; } }

.about-media-full { height: 70vh; min-height: 400px; overflow: hidden; }
.about-media-full img { width: 100%; height: 100%; object-fit: cover; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.value-item { border-top: 1px solid var(--line-on-light); padding-top: 22px; }
.value-item .eyebrow { margin-bottom: 14px; }
.value-item p { color: var(--text-on-light-soft); margin-top: 12px; }
@media (max-width: 760px) { .values-grid { grid-template-columns: 1fr; } }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px; }
.team-card-media { aspect-ratio: 3/4; overflow: hidden; }
.team-card-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4); transition: filter .4s; }
.team-card:hover .team-card-media img { filter: grayscale(0); }
.team-card h4 { margin-top: 14px; font-family: var(--font-display); font-size: 1.05rem; }
.team-card span { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-on-light-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
@media (max-width: 860px) { .team-grid { grid-template-columns: 1fr 1fr; } }