/* ================================================================
   LAYOUT
   ================================================================ */
.section { padding: 72px var(--page-gutter); }

.section--dark { background: var(--charcoal); }
.section--light { background: var(--off-black); }

.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 48px;
}

.section-label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 8px; font-family: var(--ff-ui);
}

.section-title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--white); text-transform: uppercase;
}
.section-title em { font-style: italic; font-weight: 400; }

.see-all-link {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray); border-bottom: 1px solid var(--mid-gray);
  padding-bottom: 2px; cursor: none; transition: color var(--speed-fast);
  white-space: nowrap;
}
.see-all-link:hover { color: var(--white); border-color: var(--white); }

/* Grids */
.grid-2    { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--dark-gray); }
.grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dark-gray); }
.grid-4    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-asymm { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1px; background: var(--dark-gray); }

/* Buttons */
.btn-primary-wh {
  background: var(--white); color: var(--black);
  padding: 14px 32px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; transition: background var(--speed-fast); cursor: none;
  font-family: var(--ff-ui); border: none;
}
.btn-primary-wh:hover { background: var(--silver); }

.btn-ghost-wh {
  background: transparent; color: var(--white);
  border: var(--border); padding: 14px 32px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: all var(--speed-fast); cursor: none; font-family: var(--ff-ui);
}
.btn-ghost-wh:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }

.btn-dark {
  background: var(--black); color: var(--white);
  padding: 16px 48px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; cursor: none; transition: background var(--speed-fast);
  display: inline-block; font-family: var(--ff-ui); border: none;
}
.btn-dark:hover { background: var(--charcoal); }