/* Markd Design — minimal, flat, geometric stylesheet */
/* No gradients, no shadows, no rounded corners, no animations */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #111;
  background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; font-weight: 600; }
p { margin: 0 0 1rem; }

/* --- Layout helpers --- */
.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.section-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 0.1em; color: #111; }

/* --- Header --- */
.header { padding: 1.5rem 0; border-bottom: 1px solid #e5e5e5; }
.header .container { display: flex; justify-content: space-between; align-items: center; }

/* --- Hero --- */
.hero { padding: 5rem 0 4rem; text-align: center; }
.hero__headline { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.hero__subhead { font-size: 1.125rem; color: #444; max-width: 60ch; margin: 0 auto 2.5rem; line-height: 1.7; }

/* --- Buttons --- */
.btn { display: inline-block; padding: 0.875rem 2rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 2px solid #111; background: transparent; cursor: pointer; transition: background 0.15s, color 0.15s; }
.btn--primary { color: #111; }
.btn--primary:hover, .btn--primary:focus { background: #111; color: #fff; outline: none; }
.btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* --- Services --- */
.services { padding: 5rem 0; background: #fafafa; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.service { padding: 1.5rem; border: 1px solid #e5e5e5; background: #fff; }
.service__title { font-size: 1.125rem; margin-bottom: 0.75rem; }
.service__desc { font-size: 0.9375rem; color: #444; line-height: 1.6; margin: 0; }

/* --- Contact --- */
.contact { padding: 5rem 0; }
.contact__intro { font-size: 1rem; color: #444; max-width: 50ch; margin-bottom: 2.5rem; }

.form { max-width: 560px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form__field { margin-bottom: 1.5rem; }
.form__label { display: block; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; color: #111; }
.form__input, .form__textarea { width: 100%; padding: 0.75rem 1rem; font-family: inherit; font-size: 1rem; line-height: 1.5; color: #111; background: #fff; border: 1px solid #ccc; }
.form__input:focus, .form__textarea:focus { outline: none; border-color: #111; }
.form__textarea { resize: vertical; min-height: 120px; }
.form__submit { width: 100%; margin-top: 0.5rem; }
.form__note { margin-top: 1rem; font-size: 0.9375rem; min-height: 1.5em; }
.form__note--success { color: #006600; }
.form__note--error { color: #cc0000; }

/* --- Footer --- */
.footer { padding: 2rem 0; border-top: 1px solid #e5e5e5; text-align: center; font-size: 0.875rem; color: #666; }
.footer__copy { margin-bottom: 0.25rem; }
.footer__contact a:hover { text-decoration: underline; }

/* --- Responsive --- */
@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
  .hero { padding: 3.5rem 0 2.5rem; }
  .services, .contact { padding: 3.5rem 0; }
}