/* ===========================================================
   pages.css — sub-page styles (Collection, Story, Sustainability,
   Projects, Why, Fit For Us)
   =========================================================== */

/* ---------- Page hero (shared) ---------- */
.page-hero {
  padding-top: 56px;
  padding-bottom: 64px;
  background: var(--paper-50);
}
.ph-breadcrumbs {
  font-size: 12px;
  color: var(--paper-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ph-breadcrumbs a { cursor: pointer; }
.ph-breadcrumbs a:hover { color: var(--green-700); }
.ph-breadcrumbs span { color: var(--paper-500); }

.ph-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
}
.ph-copy-wide { max-width: 920px; }

.ph-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 24px;
  text-wrap: balance;
}
.ph-h1 em { font-style: italic; color: var(--green-700); }

.ph-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 32px;
}

.ph-aside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--paper-300);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ph-aside-stat {
  background: var(--paper-50);
  padding: 24px 20px;
}
.ph-aside-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--green-900);
  margin-bottom: 6px;
}
.ph-aside-unit {
  font-size: 1.1rem;
  margin-left: 4px;
  color: var(--paper-600);
}
.ph-aside-lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-700);
  font-weight: 600;
  font-family: var(--font-mono);
}

@media (max-width: 900px) {
  .ph-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Filter bar ---------- */
.cat-bar-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-page);
  border-block: 1px solid var(--border-subtle);
  padding-block: 16px;
}
.cat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cat-chips {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  border: 1px solid transparent;
  transition: all var(--dur-base) var(--ease-standard);
}
.cat-chip:hover { background: var(--paper-200); }
.cat-chip.on {
  background: var(--green-900);
  color: var(--paper-50);
  font-weight: 600;
}
.cat-chip-n {
  font-size: 10px;
  opacity: 0.65;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.08);
}
.cat-chip.on .cat-chip-n { background: rgba(245,239,226,0.15); opacity: 0.85; }

.cat-tools {
  display: flex; gap: 16px; align-items: center;
}
.cat-result {
  font-size: 11px;
  color: var(--paper-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cat-view {
  display: flex; gap: 4px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 3px;
}
.cat-view button {
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--fg-2);
}
.cat-view button.on {
  background: var(--green-900);
  color: var(--paper-50);
}

/* ---------- Catalog grid ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
}
@media (max-width: 700px) {
  .cat-grid { grid-template-columns: 1fr; gap: 32px; }
}
.cat-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-standard);
}
.cat-card:hover { transform: translateY(-2px); }

.cat-photo {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-200);
}
.cat-badge {
  position: absolute;
  top: 12px; left: 12px;
}
.cat-quick {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: var(--paper-50);
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--green-900);
  opacity: 0;
  transform: translateY(-4px);
  transition: all var(--dur-base) var(--ease-standard);
}
.cat-card:hover .cat-quick { opacity: 1; transform: translateY(0); }

.cat-meta { display: flex; flex-direction: column; gap: 4px; }
.cat-code {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-600);
}
.cat-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}
.cat-mat {
  font-size: 13px;
  color: var(--fg-2);
}
.cat-specs {
  margin-top: 8px;
  display: flex; gap: 8px; align-items: center;
  font-size: 12px;
  color: var(--fg-2);
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.cat-specs-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper-600);
  margin-right: 4px;
}
.cat-specs .dot { color: var(--paper-500); }

/* ---------- Catalog list ---------- */
.cat-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cat-list-head {
  display: grid;
  grid-template-columns: 80px 110px 1.6fr 1.4fr 80px 80px 50px;
  gap: 16px;
  padding: 14px 20px;
  background: var(--paper-100);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper-700);
  font-weight: 600;
  align-items: center;
}
.cat-list-row {
  display: grid;
  grid-template-columns: 80px 110px 1.6fr 1.4fr 80px 80px 50px;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  align-items: center;
  transition: background var(--dur-base);
}
.cat-list-row:hover { background: var(--paper-100); }
.cat-list-thumb { width: 60px; }
.cat-list-thumb .ph { border-radius: 6px; }
.cat-list-code { font-size: 12px; color: var(--paper-700); }
.cat-list-name {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
}
.cat-list-name strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
}
.cat-list-num { text-align: right; font-size: 13px; }
.cat-list-cta {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--paper-200);
  display: flex; align-items: center; justify-content: center;
  margin-left: auto;
}
.cat-list-cta:hover { background: var(--green-600); color: var(--paper-50); }

@media (max-width: 900px) {
  .cat-list-head, .cat-list-row { grid-template-columns: 60px 1fr 60px; gap: 10px; }
  .cat-list-head > :nth-child(n+4), .cat-list-row > :nth-child(n+4):not(:last-child) { display: none; }
}

.cat-loadmore {
  margin-top: 56px;
  display: flex; gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}

/* ---------- CTA band (reused across pages) ---------- */
.cta-band .cta-grid {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 56px;
  align-items: center;
}
.cta-band .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 16px;
}
@media (max-width: 900px) {
  .cta-band .cta-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-band .cta-actions { justify-content: flex-start; }
}

/* ===========================================================
   STORY PAGE
   =========================================================== */
.story-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: end;
}
.story-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 24px;
  text-wrap: balance;
}
.story-h1 em { font-style: italic; color: var(--green-700); }

@media (max-width: 900px) {
  .story-hero { grid-template-columns: 1fr; gap: 40px; }
}

.story-quote {
  margin: 0;
  position: relative;
  padding-left: 40px;
}
.story-quote-mark {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.6;
  color: var(--green-700);
  position: absolute;
  left: -8px;
  top: 0;
}
.story-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 24px;
  color: var(--fg-1);
  text-wrap: pretty;
}
.story-quote-foot {
  display: flex; flex-direction: column; gap: 4px;
}

.story-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.story-chapter {
  display: grid;
  grid-template-columns: 110px 40px 1fr;
  gap: 32px;
  padding-block: 32px;
}
.story-chapter-year {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-700);
  padding-top: 6px;
}
.story-chapter-rail {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.story-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green-700);
  margin-top: 10px;
  flex-shrink: 0;
}
.story-line {
  width: 1px;
  flex: 1;
  background: var(--border-default);
  margin-top: 8px;
}
.story-chapter-body h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 12px;
  line-height: 1.2;
}
.story-chapter-body p {
  margin: 0;
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
  max-width: 640px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .story-chapter { grid-template-columns: 80px 24px 1fr; gap: 16px; }
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: rgba(245,239,226,0.12);
  border: 1px solid rgba(245,239,226,0.12);
}
.value-card {
  background: var(--green-900);
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.value-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: rgba(245,239,226,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper-100);
  margin-bottom: 8px;
}
.value-icon i { width: 20px; height: 20px; stroke-width: 1.5; }
.value-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  color: var(--paper-50);
  line-height: 1.25;
}
.value-card p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--paper-200);
  line-height: 1.55;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px 24px;
}
.team-card { display: flex; flex-direction: column; gap: 16px; }
.team-info { display: flex; flex-direction: column; gap: 4px; }
.team-role {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
  font-weight: 600;
}
.team-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
}
.team-sub {
  font-size: 13px;
  color: var(--fg-2);
}

.bottom-cta {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  padding: 24px;
}
.bottom-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 16px;
  text-wrap: balance;
}
.bottom-cta .lede { margin: 0 auto 32px; max-width: 540px; }
.bottom-cta .flex { justify-content: center; flex-wrap: wrap; }

/* ===========================================================
   SUSTAINABILITY PAGE
   =========================================================== */
.sus-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: end;
}
.sus-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 24px;
  text-wrap: balance;
}
.sus-h1 em { font-style: italic; color: var(--green-700); }

@media (max-width: 900px) {
  .sus-hero { grid-template-columns: 1fr; gap: 40px; }
}

.sus-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--paper-300);
}
.sus-number {
  background: var(--paper-200);
  padding: 32px;
}
.sus-number-v {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--green-900);
  margin-bottom: 8px;
}
.sus-number-l {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-700);
  font-weight: 600;
  font-family: var(--font-mono);
}

.sus-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sus-pillar {
  background: var(--paper-50);
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.sus-pillar-num {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--green-700);
  font-weight: 600;
}
.sus-pillar-tag {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.15;
}
.sus-pillar-tag .vi { color: var(--paper-600); font-style: italic; font-size: 0.85em; }
.sus-pillar-body {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--fg-2);
  line-height: 1.55;
  flex: 1;
}
.sus-pillar-stat {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.sus-pillar-stat-v {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--green-900);
  line-height: 1;
}
.sus-pillar-stat-l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-600);
  margin-top: 6px;
  font-family: var(--font-mono);
}

.replant-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.replant-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(245,239,226,0.16);
}
.replant-stat-v {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--paper-50);
  line-height: 1;
  margin-bottom: 6px;
}
.replant-stat-l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-300);
  font-family: var(--font-mono);
}

.replant-viz {
  background: rgba(245,239,226,0.04);
  border: 1px solid rgba(245,239,226,0.12);
  border-radius: var(--r-lg);
  padding: 40px;
}
.replant-viz-row {
  display: grid;
  grid-template-columns: 60px 1fr 30px;
  gap: 24px;
  align-items: center;
}
.replant-viz-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-300);
  font-weight: 600;
}
.replant-viz-bar {
  display: flex; gap: 8px;
}
.rv-cane, .rv-sap {
  height: 40px;
  border-radius: 4px;
}
.rv-cane {
  flex: 1;
  background: linear-gradient(to right, var(--clay-500), var(--clay-700));
}
.rv-sap {
  flex: 1;
  background: linear-gradient(to right, var(--green-600), var(--green-700));
}
.replant-viz-n {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--paper-100);
  text-align: right;
}
.replant-viz-eq {
  text-align: center;
  font-size: 1.4rem;
  color: var(--paper-300);
  margin-block: 16px;
}
.replant-viz-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(245,239,226,0.1);
  font-size: 12px;
  color: var(--paper-300);
}

@media (max-width: 900px) {
  .replant-grid { grid-template-columns: 1fr; gap: 40px; }
  .replant-stats { grid-template-columns: repeat(3, 1fr); }
}

.certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .certs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .certs-grid { grid-template-columns: 1fr; }
}
.cert-card {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 24px;
  background: var(--paper-50);
}
.cert-code {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--green-900);
  margin-bottom: 4px;
}
.cert-name {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-700);
  font-family: var(--font-mono);
  font-weight: 600;
  margin-bottom: 16px;
}
.cert-body {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
}

.trace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.trace-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.trace-list li {
  display: flex; gap: 12px; align-items: center;
  font-size: var(--fs-body);
  color: var(--fg-2);
}
.trace-list i {
  width: 18px; height: 18px;
  color: var(--green-700);
  stroke-width: 2;
}
.trace-card {
  background: var(--paper-0);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.trace-card-h {
  background: var(--green-900);
  color: var(--paper-50);
  padding: 16px 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.trace-rows { padding: 8px 24px; }
.trace-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: baseline;
}
.trace-row:last-child { border-bottom: none; }
.trace-row-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper-700);
}

@media (max-width: 900px) {
  .trace-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ===========================================================
   PROJECTS PAGE
   =========================================================== */
.proj-list {
  display: flex; flex-direction: column;
  gap: 80px;
}
.proj-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.proj-row.flip { grid-template-columns: 1fr 1.2fr; }
.proj-row.flip .proj-photo { order: 2; }
.proj-row.flip .proj-body { order: 1; }

.proj-photo { position: relative; }
.proj-year {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--paper-50);
  color: var(--green-900);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  z-index: 2;
}
.proj-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-700);
  font-weight: 600;
  margin-bottom: 12px;
}
.proj-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 12px;
}
.proj-units {
  font-size: 13px;
  color: var(--paper-700);
  margin: 0 0 20px;
  letter-spacing: 0.04em;
}
.proj-summary {
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 560px;
}
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 900px) {
  .proj-row, .proj-row.flip {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .proj-row.flip .proj-photo { order: 1; }
  .proj-row.flip .proj-body { order: 2; }
}

/* ===========================================================
   WHY PAGE
   =========================================================== */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 900px) {
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .reasons-grid { grid-template-columns: 1fr; }
}
.reason-card {
  background: var(--paper-50);
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.reason-num {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--green-700);
  font-weight: 600;
  margin-bottom: 8px;
}
.reason-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}
.reason-card p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--fg-2);
  line-height: 1.55;
}

.compare-table {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-50);
}
.compare-head, .compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1fr 1fr;
  gap: 24px;
  padding: 16px 24px;
  align-items: center;
}
.compare-head {
  background: var(--green-900);
  color: var(--paper-50);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: var(--font-mono);
}
.compare-head .compare-us { color: var(--paper-50); }
.compare-row {
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
}
.compare-row:hover { background: var(--paper-100); }
.compare-rl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-700);
  font-weight: 600;
}
.compare-us {
  font-weight: 600;
  color: var(--green-700);
}

@media (max-width: 900px) {
  .compare-head, .compare-row { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px; font-size: 13px; }
  .compare-head > :nth-child(n+3), .compare-row > :nth-child(n+3) { display: none; }
}

/* ===========================================================
   FIT PAGE
   =========================================================== */
.fit-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 32px;
}
.fit-tab {
  padding: 24px 20px;
  background: var(--paper-50);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  transition: background var(--dur-base) var(--ease-standard);
}
.fit-tab:hover { background: var(--paper-100); }
.fit-tab.on { background: var(--green-900); color: var(--paper-50); }
.fit-tab i { width: 22px; height: 22px; stroke-width: 1.5; opacity: 0.85; }
.fit-tab-vi {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-600);
  font-style: italic;
}
.fit-tab.on .fit-tab-vi { color: var(--paper-300); }
.fit-tab-en {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.fit-panel {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--paper-50);
  overflow: hidden;
}
.fit-panel-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.fit-panel-meta {
  background: var(--paper-100);
  padding: 20px 24px;
}
.fit-panel-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper-700);
  font-weight: 600;
  margin-bottom: 6px;
}
.fit-panel-v {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
}
.link-arrow {
  color: var(--green-700);
  font-weight: 600;
  cursor: pointer;
}

.fit-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-subtle);
}
.fit-col {
  background: var(--paper-50);
  padding: 32px;
}
.fit-col-h {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 16px;
}
.fit-col-h i { width: 22px; height: 22px; stroke-width: 2; }
.fit-good .fit-col-h i { color: var(--green-700); }
.fit-bad .fit-col-h i { color: var(--clay-500); }
.fit-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.fit-col li {
  font-size: var(--fs-body);
  color: var(--fg-2);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.fit-col li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 6px; height: 1px;
  background: var(--paper-500);
}

@media (max-width: 700px) {
  .fit-tabs { grid-template-columns: 1fr 1fr; }
  .fit-panel-head { grid-template-columns: 1fr; }
  .fit-cols { grid-template-columns: 1fr; }
}

/* Stub page header (still used for any unbuilt page) */
.stub-h {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 24px;
  letter-spacing: var(--tracking-tight);
}


/* ---------- Filter bar enhancements ---------- */
.cat-bar-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-right: 8px;
  font-weight: 600;
}

/* ---------- Projects listing — clickable photo + cta ---------- */
.proj-photo[onclick],
a.proj-photo {
  cursor: pointer;
  display: block;
}
.proj-photo .ph-img { transition: transform 700ms var(--ease-standard); }
.proj-row:hover .proj-photo .ph-img { transform: scale(1.03); }
.proj-row-tag {
  position: absolute;
  top: 16px; left: 16px;
  padding: 6px 10px;
  background: var(--paper-50);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-1);
  z-index: 2;
}
.proj-row-cta { margin-top: 18px; }

/* ===========================================================
   PROJECT DETAIL PAGE
   =========================================================== */
.page-pdetail .page-hero.compact { padding-top: 24px; padding-bottom: 56px; }

.pd-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 24px;
}
.pd-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.pd-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
  color: var(--fg-1);
}
.pd-h1 em { font-style: italic; color: var(--green-700); font-weight: 500; }

.pd-meta {
  margin: 16px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--paper-300);
  border-bottom: 1px solid var(--paper-300);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-meta-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: baseline;
}
.pd-meta-row dt {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 600;
  margin: 0;
}
.pd-meta-row dd {
  margin: 0;
  font-size: 15px;
  color: var(--fg-1);
}

.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.pd-hero-photo { position: relative; }
.pd-hero-photo .ph { border-radius: 0; }
.pd-hero-badge {
  position: absolute;
  top: 16px; right: 16px;
  padding: 8px 14px;
  background: var(--paper-50);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-1);
}

/* Story section */
.pd-story {
  display: block;
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 0;
}
.pd-story-head { position: static; margin-bottom: 28px; }
.pd-story-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.pd-story-body { display: flex; flex-direction: column; gap: 18px; }
.pd-story-p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
/* Drop-cap removed — keep paragraphs running naturally */

/* Pull quote band */
.pd-quote-band { padding-block: 96px; }
.pd-quote {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.pd-quote-mark {
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 0.7;
  color: var(--green-700);
  font-weight: 400;
}
.pd-quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.3;
  font-weight: 500;
  font-style: italic;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.pd-quote-author {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 600;
}

/* Two-column block: deliverables + timeline */
.pd-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.pd-block { display: flex; flex-direction: column; gap: 16px; }
.pd-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg-1);
}

.pd-deliv { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 0; }
.pd-deliv-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px dashed var(--paper-300);
}
.pd-deliv-row:last-child { border-bottom: none; }
.pd-deliv-k { font-size: 16px; color: var(--fg-1); font-weight: 500; }
.pd-deliv-dots {
  border-bottom: 1px dotted var(--paper-400);
  align-self: center;
  height: 1px;
  position: relative;
  top: -3px;
}
.pd-deliv-v { font-size: 12px; color: var(--fg-2); white-space: nowrap; }

.pd-timeline {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.pd-timeline::before {
  content: '';
  position: absolute;
  left: 90px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--paper-300);
}
.pd-tl-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 14px 0;
  position: relative;
  align-items: baseline;
}
.pd-tl-when {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 600;
  position: relative;
}
.pd-tl-when::after {
  content: '';
  position: absolute;
  right: -8px; top: 6px;
  width: 9px; height: 9px;
  background: var(--green-700);
  border-radius: 50%;
  z-index: 1;
}
.pd-tl-what { font-size: 15px; color: var(--fg-1); }

/* Gallery */
.pd-gal-section { padding-block: 96px; }
.pd-gal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-default);
}
.pd-gal-head > div:first-child { max-width: 600px; }
.pd-gal-head .pd-h3 { margin-top: 8px; }
.pd-gal-sub { margin-top: 12px; }
.pd-gal-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--paper-700);
  white-space: nowrap;
}
.pd-gal-count { font-size: 14px; color: var(--green-700); }
.pd-gal-count .pd-gal-of { color: var(--paper-500); }
.pd-gal-divider { width: 24px; height: 1px; background: var(--paper-400); }

.pd-gal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.pd-gal-cell {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-gal-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--paper-200);
}
.pd-gal-frame .ph {
  border-radius: 0;
  height: 100%;
  transition: transform 600ms var(--ease-standard);
}
.pd-gal-cell:hover .pd-gal-frame .ph { transform: scale(1.03); }
.pd-gal-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(42,36,28,0.55), transparent);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.pd-gal-tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--paper-50);
  text-transform: uppercase;
  background: rgba(42,36,28,0.5);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}
.pd-gal-cap {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--paper-600);
}
.pd-gal-cap-num {
  color: var(--green-700);
  font-weight: 600;
}

/* Editorial 2x2 layout — varied proportions */
.pd-gal-0 { grid-column: span 7; }
.pd-gal-1 { grid-column: span 5; }
.pd-gal-2 { grid-column: span 5; }
.pd-gal-3 { grid-column: span 7; }

/* Related */
.pd-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.pd-rel-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.pd-rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pd-rel-photo { position: relative; overflow: hidden; }
.pd-rel-photo .ph { border-radius: 0; }
.pd-rel-photo .ph-img { transition: transform 700ms var(--ease-standard); }
.pd-rel-card:hover .pd-rel-photo .ph-img { transform: scale(1.04); }
.pd-rel-year {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 10px;
  background: var(--paper-50);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-1); font-weight: 600;
}
.pd-rel-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 6px; }
.pd-rel-loc {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2);
}
.pd-rel-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  color: var(--fg-1);
}
.pd-rel-cta {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--green-700);
  transition: gap var(--dur-base) var(--ease-standard);
}
.pd-rel-card:hover .pd-rel-cta { gap: 10px; }

/* Responsive */
@media (max-width: 1000px) {
  .pd-hero { grid-template-columns: 1fr; gap: 32px; }
  .pd-story { grid-template-columns: 1fr; gap: 24px; }
  .pd-story-head { position: static; }
  .pd-two { grid-template-columns: 1fr; gap: 48px; }
  .pd-related { grid-template-columns: 1fr; }
  .pd-gal-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pd-gal { grid-template-columns: repeat(2, 1fr); }
  .pd-gal-0, .pd-gal-1, .pd-gal-2, .pd-gal-3 { grid-column: span 1; }
}
@media (max-width: 600px) {
  .pd-meta-row { grid-template-columns: 100px 1fr; gap: 12px; }
  .pd-quote-band { padding-block: 64px; }
  .pd-quote-mark { font-size: 5rem; }
}


/* ===========================================================
   BLOG INDEX + DETAIL
   =========================================================== */
.page-blog .blog-feature,
.page-blog-detail {
  /* page wrappers — no shared rules needed */
}

.blog-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  cursor: pointer;
  border-top: 1px solid var(--border-default);
  padding-top: 48px;
}
.blog-feature .bf-photo { position: relative; }
.blog-feature .bf-photo .ph { border-radius: var(--r-md); overflow: hidden; }
.blog-feature .bf-photo .badge {
  position: absolute; top: 16px; left: 16px;
}
.blog-feature .bf-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px;
  color: var(--paper-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.bf-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.blog-feature:hover .bf-title { color: var(--green-700); }
.bf-excerpt {
  margin: 0 0 24px;
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
  text-wrap: pretty;
}
.bf-author {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 24px;
}
.bf-author-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--paper-50);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
}
.bf-author-dot-lg { width: 56px; height: 56px; font-size: 1.3rem; }
.bf-author-name { font-weight: 500; font-size: 14px; }
.bf-read {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--green-700);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .blog-feature { grid-template-columns: 1fr; gap: 32px; }
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 40px 28px;
  margin-top: 32px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
}
.blog-card-photo .ph {
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard);
}
.blog-card:hover .blog-card-photo .ph { transform: scale(1.02); }
.blog-card-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px;
  color: var(--paper-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 4px 0 0;
  text-wrap: balance;
}
.blog-card:hover .blog-card-title { color: var(--green-700); }
.blog-card-excerpt {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
  text-wrap: pretty;
}
.blog-card-foot {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px;
  color: var(--paper-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ---------- Blog detail ---------- */
.bd-head {
  max-width: 1080px;
}
.bd-head-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px;
  color: var(--paper-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}
.bd-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.bd-author {
  display: flex; gap: 12px; align-items: center;
  margin-top: 28px;
}
.bd-lead-img-wrap { padding-top: 0; padding-bottom: 0; }
.bd-lead-img-wrap .ph { border-radius: var(--r-md); overflow: hidden; }

.bd-body { font-size: var(--fs-body-lg); color: var(--fg-1); }
.bd-body .bd-p {
  margin: 0 0 24px;
  line-height: 1.65;
  text-wrap: pretty;
}
.bd-h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 56px 0 20px;
}
.bd-callout {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--green-50, #f3f4ed);
  border-left: 3px solid var(--green-700);
  padding: 24px 28px;
  margin: 32px 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.bd-callout .icon { color: var(--green-700); margin-top: 4px; flex-shrink: 0; }
.bd-callout p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--fg-1);
}
.bd-fig { margin: 32px 0; }
.bd-fig .ph { border-radius: var(--r-md); overflow: hidden; }
.bd-fig figcaption {
  margin-top: 12px;
  font-size: 11px;
  color: var(--paper-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bd-share {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  margin-top: 48px;
}
.bd-share a {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 13px;
  color: var(--fg-2);
  cursor: pointer;
}
.bd-share a:hover { color: var(--green-700); }
.bd-author-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin-top: 32px;
  padding: 24px;
  background: var(--paper-100);
  border-radius: var(--r-md);
}
@media (max-width: 700px) {
  .bd-author-foot { grid-template-columns: auto 1fr; }
  .bd-author-foot .btn { grid-column: 1 / -1; }
}

/* ===========================================================
   CAREERS INDEX + DETAIL
   =========================================================== */
.careers-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.cb-card {
  background: var(--paper-50);
  padding: 32px 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
}
.cb-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--paper-50);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.cb-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.cb-body {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Filters */
.careers-filter {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
  padding: 20px;
  background: var(--paper-50);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  margin-bottom: 32px;
  margin-top: 32px;
}
.cf-search {
  display: flex; gap: 8px; align-items: center;
  background: var(--paper-100);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  flex: 1;
  min-width: 220px;
}
.cf-search input {
  background: transparent;
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 14px;
  color: var(--fg-1);
  font-family: inherit;
}
.cf-search .icon { color: var(--paper-600); flex-shrink: 0; }
.cf-group { display: flex; gap: 8px; align-items: center; }
.cf-lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-600);
}
.cf-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.cf-chip {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 12px;
  color: var(--fg-2);
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: all var(--dur-base);
}
.cf-chip:hover { background: var(--paper-100); }
.cf-chip.on { background: var(--green-900); color: var(--paper-50); border-color: var(--green-900); }

/* Job list */
.job-list { display: flex; flex-direction: column; gap: 16px; }
.job-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding: 28px 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--paper-50);
  cursor: pointer;
  transition: all var(--dur-base);
  align-items: center;
}
.job-card:hover {
  border-color: var(--green-700);
  background: var(--paper-100);
  transform: translateY(-2px);
}
.job-card-head {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-600);
  margin-bottom: 12px;
}
.job-dept { color: var(--green-700); font-weight: 600; }
.job-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.job-card:hover .job-title { color: var(--green-700); }
.job-excerpt {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 56ch;
  text-wrap: pretty;
}
.job-card-aside {
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-end;
  text-align: right;
  min-width: 180px;
}
.job-salary-lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--paper-600);
}
.job-salary-val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--fg-1);
}
.job-card-cta {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-600);
}
.job-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--green-900);
  color: var(--paper-50);
  display: grid; place-items: center;
  transition: transform var(--dur-base);
}
.job-card:hover .job-arrow { transform: translateX(4px); }

.job-empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--paper-50);
  border-radius: var(--r-md);
  border: 1px dashed var(--border-default);
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.job-empty .icon { color: var(--paper-500); }
.job-empty p { margin: 0; color: var(--fg-2); max-width: 40ch; }

@media (max-width: 700px) {
  .job-card { grid-template-columns: 1fr; }
  .job-card-aside { align-items: flex-start; text-align: left; }
}

/* Career detail */
.jd-head { max-width: 880px; }
.jd-head-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px;
  color: var(--paper-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.jd-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.jd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

.jd-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .jd-grid { grid-template-columns: 1fr; gap: 32px; }
}

.jd-body { font-size: var(--fs-body-lg); }
.jd-h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  margin: 48px 0 20px;
  letter-spacing: -0.01em;
}
.jd-h2:first-child { margin-top: 0; }
.jd-p { margin: 0 0 20px; line-height: 1.65; color: var(--fg-1); text-wrap: pretty; }

.jd-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.jd-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.55;
}
.jd-list .icon { color: var(--green-700); margin-top: 4px; }
.jd-list-benefits .icon { color: var(--clay-600, #b45c3e); }

.jd-apply-box {
  margin-top: 56px;
  padding: 28px 32px;
  background: var(--paper-100);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.jd-apply-h {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 4px;
}
@media (max-width: 700px) {
  .jd-apply-box { grid-template-columns: 1fr; }
}

/* Aside */
.jd-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
.jd-card {
  padding: 24px;
  background: var(--paper-50);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
}
.jd-card-h {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--paper-600);
  margin-bottom: 16px;
  font-weight: 600;
}
.jd-dl {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0;
}
.jd-dl > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  font-size: 13px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.jd-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.jd-dl dt {
  color: var(--paper-600);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.jd-dl dd { margin: 0; color: var(--fg-1); font-weight: 500; }

.jd-card-contact {
  background: var(--green-900);
  color: var(--paper-50);
  border-color: var(--green-900);
}
.jd-card-contact .jd-card-h { color: var(--paper-300, rgba(245,239,226,0.6)); }
.jd-card-contact p {
  margin: 0 0 16px;
  font-size: 13px;
  color: rgba(245,239,226,0.85);
  line-height: 1.55;
}
.jd-card-contact .contact-row {
  display: flex; gap: 8px; align-items: center;
  color: var(--paper-50);
  font-size: 13px;
  padding: 6px 0;
}
.jd-card-contact .contact-row:hover { color: var(--clay-400, #e9b18d); }


/* ===========================================================
   TRUSTED-BY (Homepage + Why Us page)
   =========================================================== */
.trusted-by .trusted-head { margin-bottom: 32px; }
.trusted-by .trusted-actions { display: flex; gap: 12px; align-items: center; }

.brand-track-wrap {
  position: relative;
  width: 100%;
}
.brand-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 4px 16px;
  margin: -4px -4px -16px;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.brand-track::-webkit-scrollbar { display: none; }
.brand-track.dragging { cursor: grabbing; }
.brand-track.dragging .brand-card { pointer-events: none; }

.brand-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  position: relative;
  background: var(--paper-50);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base);
}
.brand-card:hover {
  transform: translateY(-2px);
  border-color: var(--green-700);
}
.brand-card-feat {
  background: var(--green-900);
  color: var(--paper-50);
  border-color: var(--green-900);
}
.brand-card-logo {
  height: 56px;
  margin-bottom: 4px;
  color: var(--fg-1);
  display: flex;
  align-items: center;
}
.brand-card-logo svg { width: 100%; height: 100%; }
.brand-card-feat .brand-card-logo { color: var(--paper-50); }
.brand-card-kind {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-600);
  margin-bottom: 16px;
}
.brand-card-feat .brand-card-kind { color: var(--paper-300, rgba(245,239,226,0.65)); }
.brand-card-meta {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.brand-card-feat .brand-card-meta { border-top-color: rgba(245,239,226,0.18); }
.brand-card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.brand-lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--paper-600);
}
.brand-card-feat .brand-lbl { color: rgba(245,239,226,0.55); }
.brand-val {
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 500;
  text-align: right;
}
.brand-card-feat .brand-val { color: var(--paper-50); }
.brand-card-flag {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--clay-500, #c97246);
  color: var(--paper-50);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: var(--r-pill);
}

.trusted-foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-default);
  display: flex; gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.trusted-foot p { margin: 0; max-width: 60ch; }

@media (max-width: 700px) {
  .brand-card { flex-basis: 240px; }
  .trusted-by .proj-slider-nav { display: none; }
}

/* ===========================================================
   WHY PAGE — IKEA partner band
   =========================================================== */
.ikea-band {
  background: var(--green-900);
  color: var(--paper-50);
  position: relative;
  overflow: hidden;
}
.ikea-band .container { position: relative; z-index: 1; }
.ikea-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}
.ikea-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(245,239,226,0.08);
  border: 1px solid rgba(245,239,226,0.2);
  border-radius: var(--r-pill);
  padding: 8px 16px 8px 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-300, rgba(245,239,226,0.85));
  margin-bottom: 24px;
}
.ikea-pill-tag {
  background: var(--clay-500, #c97246);
  color: var(--paper-50);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.ikea-h {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.ikea-h em { color: var(--clay-400, #e9b18d); font-style: italic; }
.ikea-band p {
  margin: 0;
  font-size: var(--fs-body-lg);
  color: rgba(245,239,226,0.85);
  line-height: 1.6;
  text-wrap: pretty;
}
.ikea-band p + p { margin-top: 16px; }
.ikea-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,239,226,0.18);
}
.ikea-stat {
  padding: 28px 0 0;
}
.ikea-stat + .ikea-stat { padding-left: 28px; border-left: 1px solid rgba(245,239,226,0.18); }
.ikea-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--paper-50);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ikea-stat-num span { font-size: 0.5em; color: var(--paper-300, rgba(245,239,226,0.6)); margin-left: 4px; }
.ikea-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,239,226,0.6);
}

@media (max-width: 900px) {
  .ikea-grid { grid-template-columns: 1fr; gap: 32px; }
  .ikea-stats { grid-template-columns: 1fr; }
  .ikea-stat + .ikea-stat { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid rgba(245,239,226,0.18); margin-top: 24px; }
}


/* ===========================================================
   COMMUNITY PAGE
   =========================================================== */
.page-community .lede { max-width: 64ch; }

/* --- Hero --- */
.comm-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: end;
}
.comm-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 24px;
  text-wrap: balance;
}
.comm-h1 em { font-style: italic; color: var(--green-700); }
.comm-hero-meta {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-700);
}
.comm-hero-meta .dot { color: var(--paper-400); }

@media (max-width: 900px) {
  .comm-hero { grid-template-columns: 1fr; gap: 40px; }
}

/* --- Section 2 — Numbers --- */
.comm-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--paper-300);
  border: 1px solid var(--paper-300);
}
.comm-number {
  background: var(--paper-100);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 8px;
}
.comm-number-i {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--green-700);
  font-weight: 600;
  margin-bottom: 8px;
}
.comm-number-v {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  font-weight: 500;
  line-height: 0.95;
  color: var(--green-900);
  margin-bottom: 4px;
}
.comm-number-suf {
  font-size: 0.55em;
  color: var(--green-700);
  margin-left: 4px;
  font-weight: 500;
}
.comm-number-l {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-700);
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1.4;
}
@media (max-width: 900px) { .comm-numbers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .comm-numbers { grid-template-columns: 1fr; } }

/* --- Section 3 — Story --- */
.comm-story {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 72px;
  align-items: start;
}
.comm-story-photo { position: relative; }
.comm-story-photo .ph { border-radius: 0; }
.comm-story-cap {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-700);
  text-transform: uppercase;
}
.comm-story-body { display: flex; flex-direction: column; gap: 18px; }
.comm-story-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 8px 0 8px;
  text-wrap: balance;
}
.comm-story-p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-1);
  text-wrap: pretty;
  max-width: 60ch;
}
.comm-story-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--green-900);
  border-left: 2px solid var(--green-700);
  padding-left: 20px;
  margin: 4px 0 8px;
}
@media (max-width: 900px) {
  .comm-story { grid-template-columns: 1fr; gap: 40px; }
}

/* --- Section 4 — Pillars --- */
.comm-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--paper-300);
  border: 1px solid var(--paper-300);
}
.comm-pillar {
  background: var(--paper-50);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.comm-pillar-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.comm-pillar-num {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--green-700);
  font-weight: 600;
}
.comm-pillar-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-50, #f3f4ed);
  color: var(--green-700);
  display: grid; place-items: center;
}
.comm-pillar-icon i { width: 20px; height: 20px; stroke-width: 1.5; }
.comm-pillar h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}
.comm-pillar p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--fg-2);
  line-height: 1.55;
}
@media (max-width: 900px) { .comm-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .comm-pillars { grid-template-columns: 1fr; } }

/* --- Section 5 — Makers (alternating editorial) --- */
.comm-makers {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.comm-maker {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: center;
}
.comm-maker-b {
  grid-template-columns: 1.3fr 1fr;
}
.comm-maker-b .comm-maker-photo { order: 2; }
.comm-maker-b .comm-maker-body { order: 1; text-align: right; }
.comm-maker-b .comm-maker-village { justify-content: flex-end; }
.comm-maker-b .comm-maker-quote { padding-right: 24px; padding-left: 0; border-right: 2px solid var(--green-700); border-left: none; }
.comm-maker-b .comm-maker-mark { right: -8px; left: auto; }

.comm-maker-photo .ph { border-radius: 0; }
.comm-maker-body { display: flex; flex-direction: column; gap: 12px; }
.comm-maker-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--green-700);
  font-weight: 600;
  text-transform: uppercase;
}
.comm-maker-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 500;
  margin: 0;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
.comm-maker-village {
  display: flex; gap: 6px; align-items: center;
  font-size: 13px;
  color: var(--paper-700);
  font-style: italic;
  margin-bottom: 4px;
}
.comm-maker-village i { color: var(--green-700); }
.comm-maker-quote {
  position: relative;
  margin: 12px 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--green-700);
  max-width: 56ch;
}
.comm-maker-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--green-700);
  position: absolute;
  left: -8px;
  top: -4px;
}
.comm-maker-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg-1);
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .comm-maker, .comm-maker-b { grid-template-columns: 1fr; gap: 24px; }
  .comm-maker-b .comm-maker-photo { order: 1; }
  .comm-maker-b .comm-maker-body { order: 2; text-align: left; }
  .comm-maker-b .comm-maker-village { justify-content: flex-start; }
  .comm-maker-b .comm-maker-quote { padding-right: 0; padding-left: 24px; border-right: none; border-left: 2px solid var(--green-700); }
  .comm-maker-b .comm-maker-mark { right: auto; left: -8px; }
}

/* --- Section 6 — Map + Villages --- */
.comm-map {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.comm-map-canvas {
  position: sticky;
  top: 100px;
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-md);
  padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.comm-map-svg { width: 100%; height: auto; max-height: 480px; }
.comm-map-pins circle {
  fill: var(--green-700);
  stroke: var(--paper-50);
  stroke-width: 2;
}
.comm-map-pins .comm-map-pin-hq {
  fill: var(--clay-600, #b45c3e);
  stroke: var(--paper-50);
  stroke-width: 2.5;
}
.comm-map-pins text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--fg-1);
  letter-spacing: 0.04em;
}
.comm-map-legend {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-300);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--paper-700);
}
.comm-map-legend > div { display: flex; align-items: center; gap: 10px; }
.lg-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green-700);
  display: inline-block;
}
.lg-dot-hq { background: var(--clay-600, #b45c3e); }

.comm-villages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--paper-300);
  border: 1px solid var(--paper-300);
}
.comm-village {
  background: var(--paper-50);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.comm-village-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.comm-village-head h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.1;
}
.comm-village-since {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--green-700);
  font-weight: 600;
}
.comm-village-region {
  font-size: 12px;
  color: var(--paper-700);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.comm-village-craft {
  font-size: 14px;
  color: var(--fg-2);
  margin-top: 2px;
}
.comm-village-foot {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--paper-300);
}
.comm-village-n {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--green-900);
  line-height: 1;
}
.comm-village-l {
  font-size: 11px;
  color: var(--paper-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 1000px) {
  .comm-map { grid-template-columns: 1fr; gap: 32px; }
  .comm-map-canvas { position: static; }
}
@media (max-width: 560px) {
  .comm-villages { grid-template-columns: 1fr; }
}

/* --- Section 7 — Timeline (dark) --- */
.comm-timeline {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex; flex-direction: column;
}
.comm-tl-row {
  display: grid;
  grid-template-columns: 60px 90px 1fr 2fr;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid rgba(245,239,226,0.12);
}
.comm-tl-row:last-child { border-bottom: 1px solid rgba(245,239,226,0.12); }
.comm-tl-step {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-300);
  font-weight: 600;
}
.comm-tl-year {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--paper-50);
  letter-spacing: 0.02em;
  line-height: 1;
}
.comm-tl-line {
  height: 1px;
  background: linear-gradient(to right, rgba(245,239,226,0.4), rgba(245,239,226,0.05));
}
.comm-tl-what {
  font-size: 16px;
  color: var(--paper-200);
  line-height: 1.55;
  text-wrap: pretty;
}
@media (max-width: 800px) {
  .comm-tl-row { grid-template-columns: 50px 80px 1fr; gap: 16px; }
  .comm-tl-line { display: none; }
  .comm-tl-what { grid-column: 2 / -1; padding-top: 4px; }
}

/* --- Section 8 — Photo gallery (mosaic) --- */
.comm-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}
.comm-gal-cell {
  position: relative;
  margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.comm-gal-cell .ph {
  border-radius: 0;
  overflow: hidden;
}
.comm-gal-cell .ph-img {
  transition: transform 700ms var(--ease-standard);
}
.comm-gal-cell:hover .ph-img { transform: scale(1.04); }
.comm-gal-cell figcaption {
  display: flex; gap: 12px; align-items: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-700);
  padding-top: 2px;
}
.comm-gal-cell figcaption .mono {
  color: var(--green-700);
  font-weight: 600;
}
/* Mosaic placement */
.comm-gal-cell.c0 { grid-column: span 5; grid-row: span 2; }
.comm-gal-cell.c1 { grid-column: span 4; grid-row: span 2; }
.comm-gal-cell.c2 { grid-column: span 3; }
.comm-gal-cell.c3 { grid-column: span 3; }
.comm-gal-cell.c4 { grid-column: span 4; }
.comm-gal-cell.c5 { grid-column: span 4; }
.comm-gal-cell.c6 { grid-column: span 4; }
@media (max-width: 900px) {
  .comm-gallery { grid-template-columns: repeat(6, 1fr); }
  .comm-gal-cell.c0, .comm-gal-cell.c1 { grid-column: span 6; grid-row: auto; }
  .comm-gal-cell.c2, .comm-gal-cell.c3 { grid-column: span 3; }
  .comm-gal-cell.c4, .comm-gal-cell.c5, .comm-gal-cell.c6 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .comm-gal-cell.c0, .comm-gal-cell.c1, .comm-gal-cell.c2, .comm-gal-cell.c3,
  .comm-gal-cell.c4, .comm-gal-cell.c5, .comm-gal-cell.c6 { grid-column: span 6; }
}

/* --- Section 9 — Order impact flow --- */
.comm-impact {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.comm-impact-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 20px;
  text-wrap: balance;
}
.comm-impact-copy h2 em { font-style: italic; color: var(--green-700); }
.comm-impact-flow {
  display: flex; flex-direction: column;
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-md);
  overflow: hidden;
}
.comm-impact-step {
  position: relative;
  padding: 24px 28px;
  border-bottom: 1px dashed var(--paper-300);
  display: grid;
  grid-template-columns: 90px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 24px;
  align-items: baseline;
}
.comm-impact-step:last-of-type { border-bottom: none; }
.comm-impact-step:nth-of-type(odd) { background: var(--paper-100); }
.comm-impact-step-i {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--green-700);
  font-weight: 600;
}
.comm-impact-step-k {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--green-900);
  line-height: 1.1;
}
.comm-impact-step-v {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.4;
}
.comm-impact-step-arrow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  background: var(--green-700);
  color: var(--paper-50);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  z-index: 2;
  font-weight: 600;
}
@media (max-width: 900px) {
  .comm-impact { grid-template-columns: 1fr; gap: 40px; }
}

/* --- Section 10 — Partners list --- */
.comm-partners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
.comm-partner {
  background: var(--paper-50);
  padding: 28px 24px;
  display: flex; align-items: center; gap: 14px;
  min-height: 96px;
  transition: background var(--dur-base);
}
.comm-partner:hover { background: var(--paper-100); }
.comm-partner-mark {
  font-size: 1.6rem;
  color: var(--green-700);
  font-weight: 500;
  font-family: var(--font-display);
  line-height: 1;
}
.comm-partner-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: 0;
  line-height: 1.2;
}
@media (max-width: 900px) { .comm-partners { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .comm-partners { grid-template-columns: 1fr; } }

/* --- Section 11 — Get involved --- */
.comm-involved {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(245,239,226,0.12);
  border: 1px solid rgba(245,239,226,0.12);
}
.comm-inv-card {
  background: var(--green-900);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 360px;
}
.comm-inv-num {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-300);
  font-weight: 600;
}
.comm-inv-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(245,239,226,0.08);
  color: var(--paper-100);
  display: grid; place-items: center;
  margin: 4px 0 8px;
}
.comm-inv-icon i { width: 22px; height: 22px; stroke-width: 1.5; }
.comm-inv-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
  color: var(--paper-50);
  line-height: 1.2;
}
.comm-inv-card p {
  margin: 0;
  font-size: 14px;
  color: var(--paper-200);
  line-height: 1.55;
  flex: 1;
}
.comm-inv-cta {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 10px 0 0;
  margin-top: auto;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper-50);
  border-bottom: 1px solid var(--paper-50);
  cursor: pointer;
  transition: gap var(--dur-base) var(--ease-standard);
}
.comm-inv-cta:hover { gap: 14px; }

.comm-involved-foot {
  margin-top: 40px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid rgba(245,239,226,0.12);
}
.comm-involved-foot .muted {
  color: var(--paper-300);
  font-size: 11px;
  letter-spacing: 0.08em;
}

@media (max-width: 900px) {
  .comm-involved { grid-template-columns: 1fr; }
  .comm-inv-card { min-height: auto; }
}


/* Wide-hero variant — no aside stats column; H1 + lede span full container */
.page-hero .ph-copy-wide {
  max-width: 100%;
}
.page-hero .ph-copy-wide .ph-h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  max-width: none;
}
.page-hero .ph-copy-wide .lede {
  max-width: 880px;
  font-size: var(--fs-body-lg);
}
.page-hero .ph-copy-wide .ph-actions {
  margin-top: 36px;
}


/* ===========================================================
   COLLECTION DETAIL PAGE
   =========================================================== */
.page-cdetail .page-hero.compact { padding-bottom: 32px; }

.cd-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 16px;
}

/* Gallery */
.cd-hero-gallery {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: start;
  direction: rtl;
}
.cd-hero-main {
  direction: ltr;
  position: relative;
  background: var(--paper-200);
  overflow: hidden;
  border-radius: var(--r-md);
}
.cd-hero-main .ph { border-radius: 0; }
.cd-badge { position: absolute; top: 14px; left: 14px; }
.cd-thumbs {
  direction: ltr;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cd-thumb {
  width: 80px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  transition: border-color var(--dur-base);
  display: block;
}
.cd-thumb .ph { border-radius: 0; }
.cd-thumb:hover { border-color: var(--paper-400); }
.cd-thumb.on { border-color: var(--green-700); }

/* Info column */
.cd-info { display: flex; flex-direction: column; gap: 18px; }
.cd-code {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--green-700);
  font-weight: 600;
}
.cd-name {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
  text-wrap: balance;
}
.cd-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--fg-2);
  line-height: 1.4;
  margin: 0;
  text-wrap: pretty;
  max-width: 52ch;
}

.cd-metaline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--paper-300);
  border-bottom: 1px solid var(--paper-300);
}
.cd-metaline-l {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--paper-700);
  font-weight: 600;
  margin-bottom: 6px;
}
.cd-metaline-v {
  font-size: 14px;
  color: var(--fg-1);
  font-weight: 500;
  line-height: 1.3;
}

/* Options */
.cd-options {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 0 6px;
}
.cd-options-h {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--paper-700);
  font-weight: 600;
  margin-bottom: 4px;
}
.cd-option { display: flex; flex-direction: column; gap: 8px; }
.cd-option-l {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-700);
}
.cd-option-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-pill {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--paper-400);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--fg-1);
  cursor: pointer;
  transition: all var(--dur-base);
}
.cd-pill:hover { border-color: var(--green-700); color: var(--green-700); }
.cd-pill.on {
  background: var(--green-900);
  border-color: var(--green-900);
  color: var(--paper-50);
  font-weight: 500;
}

.cd-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 10px; }

.cd-stickers {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--paper-300);
  font-size: 12px;
  color: var(--fg-2);
}
.cd-stickers span { display: inline-flex; align-items: center; gap: 6px; }
.cd-stickers .icon { color: var(--green-700); }

@media (max-width: 980px) {
  .cd-hero { grid-template-columns: 1fr; gap: 32px; }
  .cd-hero-gallery { grid-template-columns: 1fr; }
  .cd-thumbs { flex-direction: row; }
  .cd-thumb { width: 64px; }
}

/* Tabs */
.cd-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--bg-page);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.cd-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.cd-tabs::-webkit-scrollbar { display: none; }
.cd-tab {
  background: transparent;
  border: 0;
  font-family: inherit;
  padding: 18px 24px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--dur-base);
  white-space: nowrap;
}
.cd-tab:hover { color: var(--green-700); }
.cd-tab.on { color: var(--green-900); border-bottom-color: var(--green-700); font-weight: 600; }

.cd-body-section { padding-block: 64px; }
.cd-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 980px) {
  .cd-grid { grid-template-columns: 1fr; gap: 32px; }
}
.cd-prose .cd-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 6px 0 16px;
}
.cd-prose .cd-h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 32px 0 14px;
  letter-spacing: -0.005em;
}
.cd-prose .cd-p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-1);
  margin: 0 0 18px;
  text-wrap: pretty;
}

.cd-feature {
  margin: 24px 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.cd-feature .ph { border-radius: 0; }

/* Aside cards */
.cd-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }
@media (max-width: 980px) { .cd-aside { position: static; } }
.cd-card {
  background: var(--paper-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 24px;
}
.cd-card-h {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--paper-700);
  font-weight: 600;
  margin-bottom: 16px;
}
.cd-dl { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cd-dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.cd-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cd-dl dt {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-700);
}
.cd-dl dd { margin: 0; color: var(--fg-1); font-weight: 500; }

.cd-card-contact {
  background: var(--green-900);
  color: var(--paper-50);
  border-color: var(--green-900);
}
.cd-card-contact .cd-card-h { color: var(--paper-300, rgba(245,239,226,0.6)); }
.cd-card-contact p { margin: 0 0 16px; font-size: 13px; color: rgba(245,239,226,0.85); line-height: 1.55; }
.cd-card-contact .contact-row {
  display: flex; gap: 8px; align-items: center;
  color: var(--paper-50);
  font-size: 13px;
  padding: 6px 0;
}

/* Specs */
.cd-specs-dl {
  margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.cd-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: baseline;
}
.cd-spec-row dt {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--paper-700);
  font-weight: 600;
}
.cd-spec-row dd {
  margin: 0;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .cd-spec-row { grid-template-columns: 1fr; gap: 6px; }
}

/* Documents */
.cd-doclist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cd-doclist li {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px;
  color: var(--fg-1);
  padding: 8px 12px;
  background: var(--paper-100);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.cd-doclist li:hover { background: var(--paper-200); }
.cd-doclist .icon { color: var(--green-700); }

/* Order */
.cd-order-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 32px;
}
.cd-order-cell {
  background: var(--paper-50);
  padding: 18px 22px;
}
.cd-order-l {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--paper-700);
  font-weight: 600;
  margin-bottom: 6px;
}
.cd-order-v {
  font-size: 14px;
  color: var(--fg-1);
  font-weight: 500;
}

.cd-flow {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 0;
  counter-reset: cdflow;
}
.cd-flow li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.55;
}
.cd-flow li:last-child { border-bottom: none; }
.cd-flow li .mono { color: var(--green-700); font-weight: 600; font-size: 11px; }

/* Related */
.cd-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 900px) { .cd-related { grid-template-columns: 1fr; } }

.cd-rel-card {
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base);
}
.cd-rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cd-rel-photo { position: relative; overflow: hidden; }
.cd-rel-photo .ph { border-radius: 0; }
.cd-rel-photo .ph-img { transition: transform 700ms var(--ease-standard); }
.cd-rel-card:hover .cd-rel-photo .ph-img { transform: scale(1.04); }
.cd-rel-badge { position: absolute; top: 12px; left: 12px; }
.cd-rel-body {
  padding: 18px 22px 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.cd-rel-code {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--green-700);
  font-weight: 600;
}
.cd-rel-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.15;
}
.cd-rel-mat {
  font-size: 12px;
  color: var(--fg-2);
}
.cd-rel-cta {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--green-700);
  font-weight: 600;
}

/* Indicate the collection card is clickable */
.cat-card { cursor: pointer; }
.cat-card:hover .cat-photo .ph-img { transform: scale(1.02); }
.cat-list-row { cursor: pointer; }


/* ===========================================================
   COLLECTION INDEX (editorial cards)
   =========================================================== */
.coll-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.coll-list-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
  cursor: pointer;
  background: transparent;
  transition: transform var(--dur-base) var(--ease-standard);
}
.coll-list-card.b { grid-template-columns: 1fr 1.15fr; }
.coll-list-card.b .coll-list-photo { order: 2; }
.coll-list-card.b .coll-list-body { order: 1; }
.coll-list-card:hover { transform: translateY(-3px); }
.coll-list-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-200);
}
.coll-list-photo .ph { border-radius: 0; }
.coll-list-photo .ph-img { transition: transform 700ms var(--ease-standard); }
.coll-list-card:hover .coll-list-photo .ph-img { transform: scale(1.04); }
.coll-list-tag {
  position: absolute; top: 16px; left: 16px;
  padding: 6px 12px;
  background: var(--paper-50);
  color: var(--green-900);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  border-radius: var(--r-pill);
}
.coll-list-pieces {
  position: absolute; bottom: 16px; right: 16px;
  padding: 6px 12px;
  background: rgba(20,28,18,0.65);
  color: var(--paper-50);
  font-size: 10px;
  letter-spacing: 0.12em;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}
.coll-list-body {
  display: flex; flex-direction: column;
  gap: 12px;
}
.coll-list-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 8px 0 4px;
  text-wrap: balance;
}
.coll-list-tag-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
  max-width: 50ch;
}
.coll-list-summary {
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 56ch;
}
.coll-list-meta {
  margin: 16px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--paper-300);
  border-bottom: 1px solid var(--paper-300);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.coll-list-meta dt {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--paper-700);
  margin-bottom: 4px;
}
.coll-list-meta dd {
  margin: 0;
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 500;
}
.coll-list-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-700);
  margin-top: 4px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  align-self: flex-start;
  transition: gap var(--dur-base);
}
.coll-list-card:hover .coll-list-cta { gap: 12px; }

@media (max-width: 900px) {
  .coll-list-card, .coll-list-card.b {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .coll-list-card.b .coll-list-photo { order: 1; }
  .coll-list-card.b .coll-list-body { order: 2; }
}

/* ===========================================================
   COLLECTION DETAIL EXTRAS
   =========================================================== */

/* Palette swatches on hero */
.cd-palette {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--paper-300);
}
.cd-palette-h {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--paper-700);
  font-weight: 600;
  margin-bottom: 14px;
}
.cd-palette-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.cd-swatch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  flex: 0 1 auto;
}
.cd-swatch-chip {
  width: 44px;
  height: 56px;
  border-radius: var(--r-sm);
  display: block;
  box-shadow: inset 0 0 0 1px rgba(42,36,28,0.08);
}
.cd-swatch-lbl {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--paper-700);
}

/* Video section */
.cd-video-section { padding-block: 80px; }
.cd-video-head { max-width: 720px; margin-bottom: 36px; }
.cd-video-h {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 8px 0 16px;
  color: var(--paper-50);
}
.cd-video-section .lede { color: rgba(245,239,226,0.7); }

.cd-video {
  position: relative;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.cd-video .ph { border-radius: 0; }
.cd-video .ph::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 45%, rgba(0,0,0,0.2));
  pointer-events: none;
}
.cd-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  color: var(--paper-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  z-index: 3;
}
.cd-video-play-disc {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--paper-50);
  color: var(--green-900);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform var(--dur-base) var(--ease-standard);
}
.cd-video-play-disc i { width: 28px; height: 28px; stroke-width: 2; }
.cd-video-play:hover .cd-video-play-disc { transform: scale(1.06); }
.cd-video-play-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--paper-50);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.cd-video-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(245,239,226,0.15);
  z-index: 2;
}
.cd-video-progress span {
  display: block; height: 100%;
  background: var(--paper-50);
  transition: width 0.3s linear;
}
.cd-video.is-playing .cd-video-progress span {
  animation: cdvideo-progress 12s linear forwards;
}
@keyframes cdvideo-progress {
  from { width: 0%; }
  to { width: 100%; }
}
.cd-video-meta {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display: flex; gap: 8px; align-items: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-50);
  background: rgba(20,28,18,0.55);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
.cd-video-meta .dot { color: rgba(245,239,226,0.5); }

/* Lookbook layout (6 frames) */
.cd-lookbook-grid {
  grid-template-columns: repeat(12, 1fr);
}
.cd-lookbook-grid .cd-look-0 { grid-column: span 7; }
.cd-lookbook-grid .cd-look-1 { grid-column: span 5; }
.cd-lookbook-grid .cd-look-2 { grid-column: span 4; }
.cd-lookbook-grid .cd-look-3 { grid-column: span 8; }
.cd-lookbook-grid .cd-look-4 { grid-column: span 5; }
.cd-lookbook-grid .cd-look-5 { grid-column: span 7; }

/* Products grid in collection detail */
.cd-prodgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 28px;
}
@media (max-width: 800px) {
  .cd-prodgrid { grid-template-columns: 1fr; gap: 24px; }
}
.cd-prodcard {
  background: var(--paper-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cd-prodcard-photo {
  position: relative;
  overflow: hidden;
}
.cd-prodcard-photo .ph { border-radius: 0; }
.cd-prodcard-photo .ph-img { transition: transform 700ms var(--ease-standard); }
.cd-prodcard:hover .cd-prodcard-photo .ph-img { transform: scale(1.03); }
.cd-prodcard-badge { position: absolute; top: 14px; left: 14px; }
.cd-prodcard-body {
  padding: 24px 26px 26px;
  display: flex; flex-direction: column;
  gap: 8px;
  flex: 1;
}
.cd-prodcard-code {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--green-700);
  font-weight: 600;
}
.cd-prodcard-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.15;
  margin: 4px 0 0;
}
.cd-prodcard-mat {
  font-size: 13px;
  color: var(--fg-2);
  margin: 0;
}
.cd-prodcard-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.4;
  margin: 6px 0 0;
  flex: 1;
}
.cd-prodcard-foot {
  display: flex; gap: 10px; align-items: center;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--fg-2);
}
.cd-prodcard-spec-l {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--paper-700);
  margin-right: 4px;
}
.cd-prodcard-foot .dot { color: var(--paper-400); }

/* Related collections — slightly different cards */
.cd-rel-collections { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .cd-rel-collections { grid-template-columns: 1fr; }
}

/* ========================================================================
   MEDIA LIBRARY — bento grid (project + collection detail)
   ------------------------------------------------------------------------
   Apple-style mixed-size grid of image cards, label cards, and one big
   serif "hero" cell that names the subject. Cards sit on warm paper-200
   tiles with a hairline border — never grey.
   ======================================================================== */

.ml-section { padding-block: 112px; }

/* Demo tag — labels each of the 3 variants when rendered together */
.ml-demo-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  font-weight: 600;
  padding: 5px 10px 5px 11px;
  background: var(--green-100);
  border-radius: 999px;
  margin-bottom: 14px;
}
.ml-demo-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-600);
  display: inline-block;
}

/* Separator drawn between stacked variants when all 3 are shown */
.ml-demo-sep {
  height: 1px;
  background: var(--border-default);
  margin: 0 auto;
  max-width: var(--container-max, 1280px);
  width: calc(100% - 64px);
}
.ml-demo-sep + .ml-section { padding-top: 96px; }
.ml-section:has(+ .ml-demo-sep) { padding-bottom: 96px; }

.ml-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-default);
}
.ml-head-copy { max-width: 600px; }
.ml-head-copy .pd-h3 { margin-top: 8px; }
.ml-head-sub { margin-top: 12px; }
.ml-head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-600);
  white-space: nowrap;
}
.ml-head-count { font-size: 14px; color: var(--green-700); }
.ml-head-count .ml-head-of { color: var(--paper-500); }
.ml-head-divider { width: 24px; height: 1px; background: var(--paper-400); }

/* --- Bento grid --- */

.ml-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

/* 4-up: projects. 2 rows × 12 cols.
   Each row is 300px tall. The tall image (img0) spans both rows. */
.ml-bento-4 {
  grid-auto-rows: 300px;
  grid-template-areas:
    "yearLbl yearLbl img0 img0 img0 img1 img1 img1 img1 countLbl countLbl countLbl"
    "img2    img2    img0 img0 img0 hero hero hero hero img3     img3     img3";
}

/* 6-up: collections. 3 rows × 12 cols.
   img0 spans rows 1-2 (tall portrait), img1 spans rows 2-3 (tall portrait). */
.ml-bento-6 {
  grid-auto-rows: 260px;
  grid-template-areas:
    "seasonLbl seasonLbl img0 img0 img0 hero      hero      hero      hero      paletteLbl paletteLbl paletteLbl"
    "countLbl  countLbl  img0 img0 img0 img2      img2      img2      img2      img1       img1       img1"
    "img3      img3      img4 img4 img4 img5      img5      img5      img5      img1       img1       img1";
}

/* --- Cards (shared) --- */

.ml-cell {
  background: var(--paper-200);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg, 10px);
  overflow: hidden;
  position: relative;
  min-width: 0;
  min-height: 0;
  transition: border-color 220ms var(--ease-standard);
}
.ml-cell:hover { border-color: var(--border-default); }

/* --- Image cell --- */

.ml-img {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 18px;
  gap: 12px;
}
.ml-img.is-bleed { padding: 0; }
.ml-img-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: calc(var(--r-lg, 10px) - 4px);
  overflow: hidden;
  background: var(--paper-300);
}
.ml-img.is-bleed .ml-img-frame {
  border-radius: 0;
  height: 100%;
}
.ml-img-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-standard);
}
.ml-cell:hover .ml-img-photo { transform: scale(1.025); }
.ml-img-num {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-50);
  background: rgba(31, 42, 20, 0.55);
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.ml-img-cap {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  color: var(--fg-1);
  padding: 0 8px 4px;
  letter-spacing: var(--tracking-tight);
}

/* --- Hero (big serif name) cell --- */

.ml-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 28px;
  text-align: center;
  background: var(--green-900);
  color: var(--paper-50);
}
.ml-hero.is-cream {
  background: var(--paper-200);
  color: var(--fg-1);
}
.ml-hero.is-brand {
  background: var(--green-600);
  color: var(--paper-50);
}
.ml-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-300);
  font-weight: 600;
}
.ml-hero.is-cream .ml-hero-eyebrow { color: var(--green-700); }
.ml-hero-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
}
.ml-hero-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper-300);
  max-width: 36ch;
  text-wrap: balance;
}
.ml-hero.is-cream .ml-hero-sub { color: var(--fg-3); }

/* Decorative woven divider above hero name */
.ml-hero::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
}

/* --- Label cell (year, frame count, sector) --- */

.ml-label {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.ml-label-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  font-weight: 600;
}
.ml-label-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-1);
}
.ml-label-sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

/* --- Palette cell --- */

.ml-palette {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ml-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  margin-top: 4px;
}
.ml-palette-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ml-palette-chip {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex: 0 0 auto;
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.ml-palette-lbl {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Responsive --- */

@media (max-width: 1024px) {
  .ml-bento-4 { grid-auto-rows: 240px; }
  .ml-bento-6 { grid-auto-rows: 220px; }
  .ml-hero-name { font-size: clamp(36px, 5vw, 52px); }
}

@media (max-width: 820px) {
  .ml-section { padding-block: 80px; }
  .ml-head { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Collapse to a friendlier 6-col layout on tablet. */
  .ml-bento-4 {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 220px;
    grid-template-areas:
      "yearLbl yearLbl img1     img1     img1     countLbl"
      "img0    img0    img0     hero     hero     hero"
      "img2    img2    img2     img3     img3     img3";
  }
  .ml-bento-6 {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    grid-template-areas:
      "seasonLbl seasonLbl hero       hero       hero       paletteLbl"
      "img0      img0      img0       img1       img1       img1"
      "countLbl  countLbl  img2       img2       img2       img2"
      "img3      img3      img4       img4       img5       img5";
  }
  .ml-hero-name { font-size: clamp(32px, 6vw, 44px); }
}

@media (max-width: 600px) {
  .ml-bento-4,
  .ml-bento-6 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    grid-template-areas: none;
  }
  .ml-bento-4 .ml-cell,
  .ml-bento-6 .ml-cell { grid-area: auto !important; }
  /* Force the hero to span both columns and stand a bit taller on mobile. */
  .ml-bento-4 .ml-hero,
  .ml-bento-6 .ml-hero {
    grid-column: 1 / -1;
    min-height: 240px;
  }
  .ml-hero-name { font-size: 36px; }
  .ml-label-value { font-size: 32px; }
  .ml-img-cap { font-size: 16px; }
}

/* ========================================================================
   VARIANT: IMAGES ONLY (4-up project / 6-up collection)
   ------------------------------------------------------------------------
   No text tiles — just photographs, with the subject's name overlaid on
   the largest frame like a magazine cover.
   ======================================================================== */

.ml-bento-4-img {
  grid-auto-rows: 320px;
  grid-template-areas:
    "img0 img0 img0 img0 img0 img0 img0 img1 img1 img1 img1 img1"
    "img2 img2 img2 img2 img3 img3 img3 img1 img1 img1 img1 img1";
}

.ml-bento-6-img {
  grid-auto-rows: 280px;
  grid-template-areas:
    "img0 img0 img0 img0 img0 img0 img0 img0 img1 img1 img1 img1"
    "img0 img0 img0 img0 img0 img0 img0 img0 img2 img2 img2 img2"
    "img3 img3 img3 img4 img4 img4 img4 img5 img5 img5 img5 img5";
}

/* Overlaid name on the hero photo (images-only variant) */
.ml-img.has-overlay .ml-img-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31,42,20,0) 30%, rgba(31,42,20,0.75) 100%);
  pointer-events: none;
}
.ml-img-overlay {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  color: var(--paper-50);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.ml-img-overlay-eb {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-200);
  font-weight: 600;
}
.ml-img-overlay-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 0.98;
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
}
.ml-img-overlay-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper-200);
  max-width: 36ch;
  text-wrap: balance;
}

@media (max-width: 1024px) {
  .ml-bento-4-img,
  .ml-bento-6-img { grid-auto-rows: 240px; }
  .ml-img-overlay-name { font-size: clamp(32px, 5vw, 44px); }
}
@media (max-width: 820px) {
  .ml-bento-4-img {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 220px;
    grid-template-areas:
      "img0 img0 img0 img0 img0 img0"
      "img1 img1 img1 img2 img2 img3";
  }
  .ml-bento-6-img {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    grid-template-areas:
      "img0 img0 img0 img0 img1 img1"
      "img0 img0 img0 img0 img2 img2"
      "img3 img3 img4 img4 img5 img5";
  }
}
@media (max-width: 600px) {
  .ml-bento-4-img,
  .ml-bento-6-img {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    grid-template-areas: none;
  }
  .ml-bento-4-img .ml-cell,
  .ml-bento-6-img .ml-cell { grid-area: auto !important; }
  .ml-bento-4-img .ml-cell:first-child,
  .ml-bento-6-img .ml-cell:first-child {
    grid-column: 1 / -1;
    min-height: 280px;
  }
}

/* ========================================================================
   VARIANT: FOCUS (single spotlight + 2 supporting frames + detail copy)
   ------------------------------------------------------------------------
   Compact two-row grid sized to fit a typical viewport without scrolling.
   Hero image takes the left half; detail copy sits in the middle as a
   sidebar; supporting frames stack on the right.
   ======================================================================== */

.ml-bento-focus {
  grid-auto-rows: 260px;
  grid-template-areas:
    "featureImg featureImg featureImg featureImg featureImg detail   detail   detail   detail   featureA featureA featureA"
    "featureImg featureImg featureImg featureImg featureImg detail   detail   detail   detail   featureB featureB featureB";
}

/* Detail copy card */
.ml-detail {
  background: var(--green-900);
  color: var(--paper-50);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  overflow: hidden;
}
.ml-detail .ml-label-eyebrow { color: var(--green-300); }
.ml-detail-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper-50);
  margin: 0;
  text-wrap: balance;
}
.ml-detail-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper-300);
  margin: 0;
  /* Clamp to 4 lines so the card never blows past the grid row. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ml-detail-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  border-top: 1px solid rgba(245,239,226,0.14);
  padding-top: 14px;
}
.ml-detail-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 12px;
}
.ml-detail-spec-row dt {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  color: var(--green-300);
  margin: 0;
  white-space: nowrap;
}
.ml-detail-spec-row dd {
  margin: 0;
  color: var(--paper-100);
  text-align: right;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .ml-bento-focus { grid-auto-rows: 220px; }
  .ml-detail-title { font-size: 18px; }
  .ml-detail-body { -webkit-line-clamp: 3; }
}
@media (max-width: 820px) {
  .ml-bento-focus {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    grid-template-areas:
      "featureImg featureImg featureImg featureImg featureImg featureImg"
      "detail     detail     detail     detail     detail     detail"
      "featureA   featureA   featureA   featureB   featureB   featureB";
  }
  .ml-detail-body { -webkit-line-clamp: unset; }
}
@media (max-width: 600px) {
  .ml-bento-focus {
    grid-template-columns: 1fr;
    grid-template-areas:
      "featureImg"
      "detail"
      "featureA"
      "featureB";
  }
}

/* ========================================================================
   LAYOUT-VARIANT SWITCHER (in the header)
   ======================================================================== */

.ml-head-variants {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 12px;
  padding: 3px;
  background: var(--paper-200);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}
.ml-head-vbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-700);
  cursor: pointer;
  transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard);
}
.ml-head-vbtn:hover { color: var(--green-700); }
.ml-head-vbtn.is-active {
  background: var(--green-600);
  color: var(--paper-50);
}
.ml-head-vbtn i,
.ml-head-vbtn svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
}

@media (max-width: 820px) {
  .ml-head-variants { margin-left: 0; margin-top: 8px; }
  .ml-head-vbtn span { display: none; }
  .ml-head-vbtn { padding: 8px 10px; }
}

/* ========================================================================
   IMAGE HOVER · ZOOM AFFORDANCE
   ======================================================================== */

.ml-img[role="button"] { cursor: zoom-in; }
.ml-img[role="button"]:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}
.ml-img-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 42, 20, 0.7);
  color: var(--paper-50);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard);
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 3;
}
.ml-img-zoom i,
.ml-img-zoom svg { width: 14px; height: 14px; stroke-width: 1.75; }
.ml-img[role="button"]:hover .ml-img-zoom,
.ml-img[role="button"]:focus-visible .ml-img-zoom {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================================
   LIGHTBOX
   ======================================================================== */

.ml-lb {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 20, 0.92);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 80px;
  animation: ml-lb-fade 200ms var(--ease-standard);
}
@keyframes ml-lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ml-lb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  max-width: 1200px;
  max-height: 100%;
  width: 100%;
}
.ml-lb-imgwrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg, 10px);
  overflow: hidden;
  background: var(--paper-900);
}
.ml-lb-img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ml-lb-cap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--paper-100);
  padding: 0 4px;
}
.ml-lb-num {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-300);
}
.ml-lb-of { color: var(--paper-400); }
.ml-lb-divider { width: 24px; height: 1px; background: rgba(245,239,226,0.25); }
.ml-lb-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: var(--tracking-tight);
}
.ml-lb-subject {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-400);
  margin-left: auto;
}

.ml-lb-arrow,
.ml-lb-close {
  position: absolute;
  border: none;
  background: rgba(245,239,226,0.10);
  color: var(--paper-50);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms var(--ease-standard);
  backdrop-filter: blur(6px);
}
.ml-lb-arrow:hover,
.ml-lb-close:hover { background: rgba(245,239,226,0.22); }
.ml-lb-arrow i,
.ml-lb-arrow svg,
.ml-lb-close i,
.ml-lb-close svg { width: 22px; height: 22px; stroke-width: 1.5; }

.ml-lb-close { top: 24px; right: 24px; }
.ml-lb-prev  { top: 50%; left: 24px;  transform: translateY(-50%); }
.ml-lb-next  { top: 50%; right: 24px; transform: translateY(-50%); }

@media (max-width: 820px) {
  .ml-lb { padding: 24px 16px; }
  .ml-lb-prev { left: 12px; }
  .ml-lb-next { right: 12px; }
  .ml-lb-close { top: 12px; right: 12px; }
  .ml-lb-title { font-size: 18px; }
}


/* ============================================================
   FIT-FOR-US — HUB PAGE
   Editorial 4-row layout, image one side, copy the other.
   ============================================================ */

.page-fit-hub .ph-h1 { margin-bottom: 16px; }
.fit-hub-meta {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-600);
  padding: 8px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--paper-100);
}
.fit-hub-meta .dot { color: var(--paper-400); }

.fit-hub-rows { padding-block: 64px 96px; }
.fit-hub-rows .container { display: flex; flex-direction: column; gap: 80px; }

.fit-hub-row {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 72px;
  align-items: center;
  padding: 48px;
  border-radius: var(--r-xl, 16px);
  background: var(--paper-100);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: transform 280ms var(--ease-standard), border-color 280ms var(--ease-standard), background 280ms var(--ease-standard);
  position: relative;
}
.fit-hub-row:hover {
  transform: translateY(-2px);
  border-color: var(--green-300);
  background: var(--paper-50);
}
.fit-hub-row:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 4px;
}
.fit-hub-row.photo-left { grid-template-columns: 6fr 5fr; }
.fit-hub-row.photo-left .fit-hub-photo { order: 1; }
.fit-hub-row.photo-left .fit-hub-body  { order: 2; }
.fit-hub-row.photo-right .fit-hub-photo { order: 2; }
.fit-hub-row.photo-right .fit-hub-body  { order: 1; }

.fit-hub-photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fit-hub-photo-num {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(31,42,20,0.78);
  color: var(--paper-50);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.18em;
  backdrop-filter: blur(6px);
}

.fit-hub-body { display: flex; flex-direction: column; gap: 24px; }
.fit-hub-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-600);
  flex-wrap: wrap;
}
.fit-hub-no { color: var(--green-700); font-weight: 600; }
.fit-hub-divider { width: 24px; height: 1px; background: var(--paper-400); }
.fit-hub-en { color: var(--paper-700); font-weight: 500; }

.fit-hub-headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

.fit-hub-blurb {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
  max-width: 56ch;
}

.fit-hub-flags { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.fit-hub-flag {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--paper-200);
}
.fit-hub-flag i {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  stroke-width: 2.5;
}
.fit-hub-flag-yes i { color: var(--green-700); }
.fit-hub-flag-no  i { color: var(--clay-500); }
.fit-hub-flag-l { font-size: 10px; letter-spacing: 0.16em; color: var(--paper-600); font-weight: 600; margin-bottom: 2px; }
.fit-hub-flag-v { font-size: 14px; line-height: 1.45; color: var(--fg-1); }

.fit-hub-foot {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.fit-hub-specs { display: flex; gap: 32px; flex-wrap: wrap; }
.fit-hub-spec-l { font-size: 10px; letter-spacing: 0.16em; color: var(--paper-600); font-weight: 600; margin-bottom: 4px; }
.fit-hub-spec-v { font-size: 14px; color: var(--fg-1); font-weight: 500; }
.fit-hub-cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--green-700);
}

@media (max-width: 980px) {
  .fit-hub-row { grid-template-columns: 1fr !important; gap: 32px; padding: 32px; }
  .fit-hub-row .fit-hub-photo { order: 1 !important; }
  .fit-hub-row .fit-hub-body  { order: 2 !important; }
  .fit-hub-headline { font-size: 1.8rem; }
}

/* ============================================================
   FIT-FOR-US — DETAIL PAGE (shared)
   ============================================================ */

.fit-detail-hero { padding-block: 64px 80px; }
.fit-detail-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
  margin-top: 24px;
}
.fit-detail-hero-copy { max-width: 60ch; }
.fit-detail-hero-photo { border-radius: var(--r-lg); overflow: hidden; }
.fit-hero-kicker {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--green-900);
  color: var(--paper-100);
  border-radius: 999px;
}
.fit-hero-post { margin-top: 12px; font-size: 14px; }

@media (max-width: 900px) {
  .fit-detail-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Numbers row --- */
.fit-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.fit-number {
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fit-number + .fit-number { border-left: 1px solid var(--border-subtle); padding-left: 32px; }
.fit-number-i { font-size: 10px; color: var(--green-700); letter-spacing: 0.18em; }
.fit-number-v {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.fit-number-suf { font-size: 0.5em; color: var(--paper-500); margin-left: 4px; }
.fit-number-l { font-size: 14px; color: var(--fg-1); font-weight: 500; }
.fit-number-sub { font-size: 12px; }

@media (max-width: 700px) {
  .fit-numbers { grid-template-columns: 1fr; }
  .fit-number + .fit-number { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-subtle); }
}

/* --- Reference project cards --- */
.fit-refs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.fit-ref {
  background: var(--paper-100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fit-ref-photo { background: var(--paper-200); }
.fit-ref-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.fit-ref-meta { font-size: 10px; color: var(--paper-600); letter-spacing: 0.16em; }
.fit-ref-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 4px 0 8px;
  text-wrap: balance;
}
.fit-ref-row { font-size: 13px; color: var(--fg-2); display: flex; gap: 10px; align-items: baseline; }
.fit-ref-l { font-size: 9px; letter-spacing: 0.18em; color: var(--paper-600); width: 48px; flex: 0 0 48px; }

@media (max-width: 1100px) { .fit-refs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .fit-refs { grid-template-columns: 1fr; } }

/* --- Table (the math) --- */
.fit-table-scroll {
  /* Allow horizontal scroll on narrow screens instead of breaking layout. */
  overflow-x: auto;
  margin-top: 32px;
  -webkit-overflow-scrolling: touch;
}
.fit-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.fit-table th, .fit-table td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
  vertical-align: top;
  color: var(--fg-1);
}
.fit-table th {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-600);
  font-weight: 600;
  background: var(--paper-100);
  border-bottom: 1px solid var(--border-default);
}
.fit-table-label { font-weight: 600; color: var(--fg-1); font-size: 14px; }
.fit-math-note { margin-top: 18px; font-size: 14px; line-height: 1.6; }
.fit-math-note strong { color: var(--fg-1); font-weight: 600; }

/* --- Spec list (Materials & certification) --- */
.fit-spec-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
.fit-specs {
  display: flex;
  flex-direction: column;
  margin: 32px 0 0;
  padding: 0;
}
.fit-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: baseline;
}
.fit-spec-row dt {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-600);
  font-weight: 600;
}
.fit-spec-row dd { margin: 0; color: var(--fg-1); font-size: 15px; line-height: 1.55; }
.fit-spec-photo { border-radius: var(--r-md); overflow: hidden; }
@media (max-width: 900px) {
  .fit-spec-grid { grid-template-columns: 1fr; gap: 32px; }
  .fit-spec-row { grid-template-columns: 1fr; gap: 4px; }
}

/* --- Document pack --- */
.fit-docs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.fit-doc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--paper-100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}
.fit-doc:hover { background: var(--paper-50); border-color: var(--green-300); }
.fit-doc-icon {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 8px;
  background: var(--paper-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green-700);
}
.fit-doc-icon i { width: 20px; height: 20px; stroke-width: 1.6; }
.fit-doc-body { flex: 1 1 auto; min-width: 0; }
.fit-doc-name { font-size: 14px; color: var(--fg-1); font-weight: 500; line-height: 1.35; }
.fit-doc-meta { font-size: 10px; color: var(--paper-600); margin-top: 4px; letter-spacing: 0.14em; }
.fit-doc-dl { width: 18px; height: 18px; color: var(--paper-500); flex: 0 0 18px; }
@media (max-width: 800px) { .fit-docs { grid-template-columns: 1fr; } }

/* --- Sales contact card --- */
.fit-sales {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: stretch;
  padding: 36px;
  border-radius: var(--r-xl);
  background: var(--green-900);
  color: var(--paper-100);
}
.fit-sales-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--green-800);
}
.fit-sales-photo img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 240px; }
.fit-sales-body { display: flex; flex-direction: column; gap: 12px; }
.fit-sales-body .eyebrow { color: var(--green-300); }
.fit-sales-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--paper-50);
  margin: 4px 0 0;
}
.fit-sales-role { font-size: 10px; letter-spacing: 0.18em; color: var(--green-300); margin-bottom: 12px; }
.fit-sales-blurb {
  font-size: 16px;
  line-height: 1.65;
  color: var(--paper-200);
  margin: 0 0 8px;
  text-wrap: pretty;
}
.fit-sales-channels { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.fit-sales-channel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper-100);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 14px;
  background: rgba(245,239,226,0.08);
  border: 1px solid rgba(245,239,226,0.18);
  border-radius: 999px;
  transition: background 160ms;
}
.fit-sales-channel:hover { background: rgba(245,239,226,0.16); }
.fit-sales-channel i { width: 16px; height: 16px; }

@media (max-width: 800px) {
  .fit-sales { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
}

/* ============================================================
   RETAIL — compliance card grid
   ============================================================ */
.fit-compliance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.fit-comp-card {
  padding: 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--paper-100);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fit-comp-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--green-900);
  color: var(--paper-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.fit-comp-icon i { width: 18px; height: 18px; stroke-width: 1.6; }
.fit-comp-k {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--fg-1);
}
.fit-comp-v { font-size: 13px; line-height: 1.5; }
@media (max-width: 800px) { .fit-compliance { grid-template-columns: 1fr; } }

/* ============================================================
   ARCHITECTS — material library + maker mark
   ============================================================ */
.arch-materials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.arch-material {
  background: var(--paper-100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.arch-material-photo { width: 96px; flex: 0 0 96px; background: var(--paper-200); }
.arch-material-body { padding: 18px 18px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.arch-material-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--fg-1);
}
.arch-material-v { font-size: 13px; margin: 0; line-height: 1.45; }
@media (max-width: 900px) { .arch-materials { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .arch-materials { grid-template-columns: 1fr; } }

.arch-swatch-cta { margin-top: 24px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.arch-swatch-cta .muted { font-size: 13px; }

.arch-mark-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
.arch-mark-photo { border-radius: var(--r-lg); overflow: hidden; }
.arch-mark-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.arch-mark-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--fg-1);
}
.arch-mark-list i {
  width: 18px; height: 18px;
  color: var(--green-700);
  flex: 0 0 18px;
  stroke-width: 1.8;
}
.arch-mark-list .mono { font-size: 13px; color: var(--green-700); }
@media (max-width: 900px) { .arch-mark-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   DISTRIBUTORS — territory rows + OEM tiers
   ============================================================ */
.dist-map {
  margin-top: 32px;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}
.dist-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1fr 0.6fr;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.dist-row:last-child { border-bottom: 0; }
.dist-region {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.dist-partner { color: var(--fg-1); font-size: 14px; }
.dist-row-open .dist-partner { color: var(--paper-500); font-style: italic; }
.dist-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 6px 12px;
  border-radius: 999px;
  justify-self: start;
}
.dist-status i { width: 14px; height: 14px; stroke-width: 2; }
.dist-status-exclusive { background: var(--green-100); color: var(--green-800); }
.dist-status-non-excl  { background: var(--paper-200); color: var(--paper-700); }
.dist-status-open      { background: rgba(196, 138, 79, 0.14); color: var(--clay-600, #b86d3f); }
.dist-since { font-size: 11px; color: var(--paper-600); letter-spacing: 0.16em; text-align: right; }

@media (max-width: 800px) {
  .dist-row { grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 16px 0; }
  .dist-since { text-align: left; }
}

.dist-oem-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: center;
}
.dist-oem-photo { border-radius: var(--r-lg); overflow: hidden; }
.dist-oem-tiers {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}
.dist-oem-tier {
  padding: 20px 22px;
  background: var(--paper-100);
  border-left: 3px solid var(--green-600);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.dist-oem-tier-h {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--green-700);
  font-weight: 600;
  margin-bottom: 8px;
}
.dist-oem-tier p {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) { .dist-oem-grid { grid-template-columns: 1fr; gap: 32px; } }


/* ============================================================
   FIT-FOR-US — defensive responsive overrides
   ============================================================ */

/* Prevent long unbreakable strings (emails, URLs, codes) from blowing
   out narrow cards. */
.fit-sales-channel,
.fit-doc-name,
.fit-comp-k,
.fit-comp-v,
.fit-ref-name,
.fit-ref-row,
.arch-material-name,
.dist-region,
.dist-partner,
.fit-hub-headline,
.fit-hub-blurb,
.fit-hub-flag-v {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Hero kicker pill — allow wrap on narrow viewports */
.fit-hero-kicker {
  white-space: normal;
  line-height: 1.5;
  max-width: 100%;
  text-wrap: balance;
}

@media (max-width: 600px) {
  .fit-detail-hero { padding-block: 32px 48px; }
  .fit-hero-kicker {
    padding: 10px 14px;
    font-size: 10px;
    line-height: 1.6;
  }

  /* Hub cards stack tight on mobile */
  .fit-hub-rows { padding-block: 32px 48px; }
  .fit-hub-rows .container { gap: 32px; }
  .fit-hub-row { padding: 20px; gap: 20px; }
  .fit-hub-headline { font-size: 1.5rem; }
  .fit-hub-blurb { font-size: 15px; }
  .fit-hub-foot { gap: 14px; }
  .fit-hub-specs { gap: 18px; flex-direction: column; }

  /* Distributors: territory rows stack cleanly */
  .dist-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }
  .dist-region { font-size: 15px; }
  .dist-partner { font-size: 13px; }
  .dist-since { font-size: 10px; text-align: left; }

  /* OEM tier cards */
  .dist-oem-tier { padding: 16px; }

  /* Sales card — tighter padding */
  .fit-sales { padding: 20px; gap: 18px; }
  .fit-sales-photo img { min-height: 200px; }
  .fit-sales-channels { gap: 10px; }
  .fit-sales-channel { font-size: 12px; padding: 6px 12px; }

  /* Numbers row — give each number more breathing room */
  .fit-number { padding: 22px 0; }

  /* Reference card — slightly tighter */
  .fit-ref-body { padding: 14px 16px 18px; }

  /* Document cards */
  .fit-doc { padding: 14px 16px; gap: 12px; }
  .fit-doc-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .fit-doc-name { font-size: 13px; }

  /* Section heads tighter */
  .page-fit-detail .section-head h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }

  /* Compliance card icons smaller */
  .fit-comp-card { padding: 16px; }
}

/* Mid (601–900) — keep grids comfortable */
@media (max-width: 900px) and (min-width: 601px) {
  .fit-refs { grid-template-columns: repeat(2, 1fr); }
  .fit-numbers { grid-template-columns: 1fr 1fr; }
  .fit-number:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-subtle);
    padding-top: 24px;
  }
}

/* Buttons inside the kicker / sales blocks shouldn't blow wider than container */
.page-fit-detail .btn,
.page-fit-hub .btn { max-width: 100%; }

/* Ph component placeholders inside fit-detail-hero-photo respect rounded corners */
.fit-detail-hero-photo > * { width: 100%; height: 100%; }