/* Shared inner-page furniture: prose blocks, forms, accordions, tables. */

.prose { max-width: 68ch; }
.prose h2 { margin: 46px 0 18px; }
.prose h3 { margin: 34px 0 14px; font-size: 16px; }
.prose p, .prose li { color: var(--ink-muted); }
.prose ul { list-style: disc; padding-left: 20px; display: grid; gap: 9px; margin-bottom: 20px; }
.prose blockquote {
  margin: 34px 0;
  padding: 22px 26px;
  border-left: 2px solid var(--brand);
  background: var(--surface);
  font-family: var(--font-head);
  font-size: 17px;
  color: var(--brand);
  line-height: 1.5;
}
.prose .aside {
  margin: 30px 0;
  padding: 20px 24px;
  background: var(--surface-alt);
  font-size: 13px;
  color: var(--ink-muted);
}

/* Forms ------------------------------------------------------------------- */
.field { display: grid; gap: 7px; margin-bottom: 20px; }
.field > label,
.field__label {
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* MEASURED against the reference's contact form: 49px tall, white ground,
   square corners, 13px/15px padding - all already matching. Its hairline is
   rgba(0,0,0,.1) rather than --line, which is the one thing that differed.

   Font size is a deliberate departure. The reference sets 14px; iOS Safari
   zooms the page in whenever a focused field is under 16px, so tapping a field
   there jerks the layout. 16px costs nothing visually and avoids that. */
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 13px 15px;
  width: 100%;
  border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
}
.field textarea { min-height: 130px; resize: vertical; }
.field__hint { font-size: 11px; color: var(--ink-muted); }
.field--error input, .field--error textarea, .field--error select { border-color: var(--sale); }
.field__error { font-size: 11px; color: var(--sale); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 575px) { .form__row { grid-template-columns: 1fr; gap: 0; } }

.form__note {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 14px;
}

/* Accordion (FAQ) --------------------------------------------------------- */
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  text-align: left;
  padding: 22px 40px 22px 0;
  position: relative;
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: var(--tracking-head);
  text-transform: uppercase;
  color: var(--brand);
}
.acc__btn::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.acc__btn[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.acc__panel { overflow: hidden; }
.acc__panel > div { padding: 0 0 24px; color: var(--ink-muted); max-width: 72ch; }

/* Two-column page layout -------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 991px) { .split { grid-template-columns: 1fr; gap: 40px; } }

.stat { text-align: center; }
.stat__n { font-family: var(--font-head); font-size: 40px; color: var(--brand); display: block; }
.stat__l { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-muted); }

/* iOS zooms the whole page when a focused input's font-size is under 16px.
   Forms are the one place that is genuinely disruptive, so bump them on small
   screens - the visual difference is slight, the behaviour difference is not. */
@media (max-width: 767px) {
  .field input,
  .field select,
  .field textarea { font-size: 16px; }
}

/* Contact page -------------------------------------------------------------
   The reference opens with a full-width map and leads each info line with an
   icon rather than a text label. */
.contact__map { line-height: 0; }
.contact__map iframe {
  width: 100%;
  height: 380px;
  border: 0;
  display: block;
}
@media (max-width: 767px) { .contact__map iframe { height: 260px; } }

.contact__rows { display: grid; gap: 16px; margin-top: 30px; }
.contact__rows li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.contact__rows svg { flex: none; margin-top: 2px; color: var(--brand); }
.contact__rows a:hover { color: var(--brand); text-decoration: underline; }