/* preview.css: TEMPORARY sections for the early preview (services + contact).
   They will be replaced by Screens 2–4. */
.preview-dark { background: var(--black); color: var(--white); padding: var(--space-8) var(--space-6); }
.preview-dark h2 { color: var(--yellow); font-size: clamp(32px, 4vw, 56px); margin-bottom: var(--space-6); }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); max-width: 1200px; }
.service-card { background: var(--yellow); color: var(--black); padding: var(--space-5); border-radius: 4px; }
.service-card:nth-child(2) { transform: translateY(var(--space-6)); }
.service-card:nth-child(4) { transform: translateY(var(--space-6)); }
.service-card h3 { font-size: 24px; margin-bottom: var(--space-2); }
.service-card p { margin: 0; font-size: 17px; line-height: 1.45; }
.coming-soon { margin-top: var(--space-8); font-size: 18px; color: var(--white); }
.coming-soon strong { color: var(--yellow); }
.site-footer { background: var(--black); color: var(--white); border-top: var(--line-thin) solid var(--yellow); padding: var(--space-6); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); font-size: 15px; line-height: 1.6; }
.site-footer h4 { color: var(--yellow); font-size: 16px; margin-bottom: var(--space-2); }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--yellow); }
@media (max-width: 760px) {
  .preview-dark { padding: var(--space-7) var(--space-3) var(--space-7) calc(56px + var(--space-3)); }
  .service-grid { grid-template-columns: 1fr; }
  .service-card:nth-child(even) { transform: translateX(var(--space-4)); }
  .site-footer { grid-template-columns: 1fr; padding-left: calc(56px + var(--space-3)); }
}