/* Home page. Overrides and extends theme.css (shared components live there). Mobile single column first. */

/* Hero: bigger headline, and the app picture runs to the bottom of the section and fades out */
.page-home .section-hero { padding-bottom: 0; }
.page-home .section-hero h1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 5rem); max-width: 11ch; }
.hero-visual {
  width: 100%;
  max-width: 78rem;
  height: auto;
  margin: var(--space-5) auto 0;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}

/* Local section: the white panel with a checklist beside the text */
.section-local { padding-top: 0; }

/* Our work */
.section-work .section-intro { color: var(--text); }

/* Contact form */
.contact-local { max-width: 54ch; margin: 0 0 var(--space-4); }
.contact-form { display: grid; gap: var(--space-2); grid-template-columns: 1fr; max-width: 44rem; }
.form-field { display: grid; gap: 0.35rem; }
.form-field label { font-weight: 600; }
.optional { font-weight: 400; color: var(--text-muted); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible { outline: 3px solid var(--accent); border-color: var(--accent); }
.form-actions { margin-top: var(--space-1); }
.section-contact .form-actions .button { border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.95rem; }
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@container content (min-width: 40rem) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .form-field-wide, .form-actions { grid-column: 1 / -1; }
}