/* Hallmark · shape: form page · genre: editorial · theme: custom (Ben's brand system, locked) · job: request a proposal · idea: "one form, a principal on the other end" · vibe: "institutional, calm, exact, quietly confident"
 * paper: #FFFFFF (brand) · accent: #256868 teal (brand) · display: Archivo · body: Open Sans · hero: Ben's two lines and the proposal form side by side, the office and tenant lines under them · nav: the site bar shared with the homepage · footer: granite, four columns shared with the homepage · imagery: a map of the Surrey office · signature: the proposal form, on the first screen · surface: absolute
 * axes: light/grotesk-heavy/cool · posture: restrained · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H3 E4 S3 R4 V3 · weakest: S, a contact page by design; the form is the page */
/* Hallmark · dismissed 77 · a contact page by design: the form with the office and tenant lines, the map, the footer */
/* Hallmark · answered F19 · four weights (300 lede, 400 body, 600 and 700 heads), the same set as every Taurus page */
/* Hallmark · answered F15 · one 64px column gap below the hero; the form uses 16px, one nesting level down */

.small-h { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; margin-bottom: var(--space-2); }

/* ---------- 1. Head and form ---------- */
.ct-head { padding-top: var(--space-6); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.ct-copy { display: grid; gap: var(--space-5); align-content: start; }
.ct-head h1 { max-width: 8em; font-size: clamp(44px, 5.4vw, 84px); }
.reach { display: grid; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.6; }
.reach p + p { margin-top: var(--space-2); }
.reach a { color: var(--link); text-underline-offset: .2em; }
.reach a:hover { color: var(--taurus-teal); }
.reach a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.reach .em { font-weight: 700; white-space: nowrap; }

.rfp { display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--fieldstone); }
.rfp .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); }
.rfp label { display: grid; gap: var(--space-1); font-size: 14px; line-height: 1.3; color: var(--text); font-weight: 600; }
.rfp label.full { grid-column: 1 / -1; }
.opt { font-weight: 400; color: var(--text-muted); }
.rfp input, .rfp select, .rfp textarea { width: 100%; height: 48px; padding: 0 var(--space-25); border: 1px solid var(--slate); border-radius: var(--radius-1); background: var(--paper); font: inherit; font-size: 16px; font-weight: 400; color: var(--text); transition: border-color .25s var(--ease); }
.rfp textarea { height: auto; padding-block: var(--space-25); min-height: 96px; resize: vertical; line-height: 1.5; }
.rfp input::placeholder { color: var(--text-muted); }
.rfp input:hover, .rfp select:hover, .rfp textarea:hover { border-color: var(--ink); }
.rfp input:focus-visible, .rfp select:focus-visible, .rfp textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); transition: none; }
.rfp [aria-invalid] { border-color: var(--mark); }
.rfp input:disabled, .rfp select:disabled, .rfp textarea:disabled { opacity: .5; cursor: not-allowed; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.form-help { flex: 1 1 16em; min-height: 1.55em; }
.form-help.bad { color: var(--mark); }

/* ---------- 2. Map ---------- */
.where { padding-block: var(--space-7) var(--space-8); }
.map { aspect-ratio: 21 / 8; background: var(--fieldstone); overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ct-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rfp { padding: var(--space-4); }
  .rfp .grid, .reach { grid-template-columns: minmax(0, 1fr); }
  .map { aspect-ratio: 4 / 3; }
  .where { padding-bottom: var(--space-7); }
}
@media (prefers-reduced-motion: reduce) {
  .rfp input, .rfp select, .rfp textarea { transition: none; }
}