/* Proposal page for the homepage concept. Uses the tokens from styles.css. */

.proposal { background: var(--white); }

.p-wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Reading text keeps a short line but starts on the same left edge as everything else. */
.p-text > * { max-width: 600px; }
.p-text > p + p,
.p-text > h2 + p { margin-top: 20px; }
.p-text .btn { margin-top: 12px; }
.p-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.p-pair a { display: block; }

.p-cover { background: var(--noir); color: var(--champagne-pale); padding-block: clamp(56px, 8vw, 104px); }
.p-logo { width: 168px; margin-bottom: clamp(40px, 6vw, 72px); }
.p-cover h1 { max-width: 14ch; font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 0.98; letter-spacing: -0.02em; }
.p-for { margin-top: 24px; font: italic 400 1.25rem/1.4 var(--serif); color: var(--champagne); }

.p-section { padding-block: clamp(56px, 8vw, 104px); }
.p-tint { background: var(--stone); }
.p-dark { background: var(--noir); color: var(--bone); }
.p-dark h2 { color: var(--champagne-pale); }

.p-section h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--espresso); }
.p-dark.p-section h2 { color: var(--champagne-pale); }
.p-sub { margin-top: 14px; max-width: 46ch; font-size: 1.0625rem; color: var(--taupe); }
.p-dark .p-sub { color: rgba(248, 248, 246, 0.74); }
.p-lead { font: 400 clamp(1.625rem, 3vw, 2.25rem)/1.25 var(--serif); letter-spacing: -0.01em; color: var(--espresso); }

.p-section img { width: 100%; border: 1px solid var(--rule); }
.p-dark img { border-color: var(--rule-light); }

.p-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: clamp(28px, 4vw, 48px);
}
.p-pair figcaption { margin-top: 10px; font-size: 0.9375rem; color: var(--taupe); }

.p-item {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--rule);
}
.p-item:first-of-type { margin-top: clamp(28px, 4vw, 48px); }
.p-item h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; color: var(--espresso); }
.p-item p { margin-top: 12px; color: var(--taupe); }

.p-phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 32px);
  max-width: 880px;
  margin-top: clamp(28px, 4vw, 48px);
}

.p-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 88px); }
.p-list { margin-top: 24px; }
.p-list li { padding-block: 14px; border-top: 1px solid var(--rule); }
.p-list li:last-child { border-bottom: 1px solid var(--rule); }

@media (max-width: 760px) {
  .p-pair, .p-item, .p-columns { grid-template-columns: 1fr; }
  .p-item img { order: 2; }
  .p-columns { gap: 48px; }
}